From 7893db9f2ea6fd8ed1f1e6211925aef994db79e9 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:27:47 +0100 Subject: [PATCH 01/13] chore: migrate to prettier 2.3 --- package.json | 7 ++++--- .../package.json | 2 +- yarn.lock | 16 ++++++++-------- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index acce4ef43b79af..f13b2c17fa0667 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "@types/micromatch": "4.0.2", "@types/node": "14.18.32", "@types/node-fetch": "2.5.7", - "@types/prettier": "2.2.3", + "@types/prettier": "2.3.2", "@types/progress": "2.0.5", "@types/prompts": "2.4.1", "@types/react": "17.0.44", @@ -287,7 +287,7 @@ "postcss": "8.3.5", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.2.1", + "prettier": "2.3.2", "pretty-bytes": "5.6.0", "progress": "2.0.3", "prompts": "2.4.2", @@ -378,7 +378,8 @@ "jest-axe/axe-core": "4.4.3", "eslint": "7.25.0", "@mdx-js/loader/loader-utils": "~2.0.4", - "swc-loader": "^0.2.3" + "swc-loader": "^0.2.3", + "prettier": "2.3.2" }, "syncpack": { "prod": true, diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index 860e21922e9e78..b97609b991e939 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/core": "^7.10.4", - "prettier": "2.2.1", + "prettier": "2.3.2", "pkg-up": "^3.1.0", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index 97688db64660dc..1509b212b62a0b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5785,10 +5785,10 @@ resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== -"@types/prettier@*", "@types/prettier@2.2.3", "@types/prettier@^2.1.5": - version "2.2.3" - resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.3.tgz#ef65165aea2924c9359205bf748865b8881753c0" - integrity sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA== +"@types/prettier@*", "@types/prettier@2.3.2", "@types/prettier@^2.1.5": + version "2.3.2" + resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3" + integrity sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog== "@types/pretty-hrtime@^1.0.0": version "1.0.1" @@ -21011,10 +21011,10 @@ prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.2.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5" - integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q== +prettier@2.3.2, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: + version "2.3.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d" + integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ== pretty-bytes@5.6.0, pretty-bytes@^5.6.0: version "5.6.0" From 9ee666e34ae3b3ca4f9e4f52c9a057f293ed25c0 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:34:53 +0100 Subject: [PATCH 02/13] style: apply 2.3 on whole codebase --- .../src/scenarios/Persona.tsx | 3 +- .../tasks/perf-test.ts | 15 +- .../Components/IconCatalog/IconCatalog.tsx | 11 +- .../FromV8/ThemeColors/colorUtils.ts | 14 +- .../Controls/AvatarPage/AvatarPage.doc.ts | 12 +- .../pages/Controls/AvatarPage/AvatarPage.tsx | 9 +- .../BottomNavigationPage.doc.ts | 6 +- .../BottomSheetPage/BottomSheetPage.doc.ts | 3 +- .../BottomSheetPage/BottomSheetPage.tsx | 3 +- .../Controls/ButtonPage/ButtonPage.doc.ts | 24 +- .../pages/Controls/ButtonPage/ButtonPage.tsx | 9 +- .../Controls/CalendarPage/CalendarPage.doc.ts | 3 +- .../Controls/CalendarPage/CalendarPage.tsx | 3 +- .../pages/Controls/ChipPage/ChipPage.doc.ts | 6 +- .../DatePickerPage/DatePickerPage.doc.ts | 12 +- .../Controls/DrawerPage/DrawerPage.doc.ts | 6 +- .../pages/Controls/DrawerPage/DrawerPage.tsx | 6 +- .../pages/Controls/LinkPage/LinkPage.doc.ts | 12 +- .../src/pages/Controls/LinkPage/LinkPage.tsx | 3 +- .../ListCellsPage/ListCellsPage.doc.ts | 6 +- .../Controls/ListCellsPage/ListCellsPage.tsx | 6 +- .../MessageBarPage/MessageBarPage.doc.ts | 3 +- .../MessageBarPage/MessageBarPage.tsx | 3 +- .../Controls/NavBarPage/NavBarPage.doc.ts | 6 +- .../pages/Controls/NavBarPage/NavBarPage.tsx | 6 +- .../PeoplePickerPage/PeoplePickerPage.doc.ts | 3 +- .../PeoplePickerPage/PeoplePickerPage.tsx | 3 +- .../Controls/PersonaPage/PersonaPage.doc.ts | 15 +- .../PillButtonBarPage.doc.ts | 3 +- .../PillButtonBarPage/PillButtonBarPage.tsx | 3 +- .../pages/Controls/PivotPage/PivotPage.doc.ts | 3 +- .../PopupMenuPage/PopupMenuPage.doc.ts | 6 +- .../Controls/PopupMenuPage/PopupMenuPage.tsx | 6 +- .../SeparatorPage/SeparatorPage.doc.ts | 18 +- .../Controls/SeparatorPage/SeparatorPage.tsx | 9 +- .../Controls/ShimmerPage/ShimmerPage.doc.ts | 3 +- .../Controls/ShimmerPage/ShimmerPage.tsx | 3 +- .../Controls/SnackbarPage/SnackbarPage.doc.ts | 3 +- .../Controls/SnackbarPage/SnackbarPage.tsx | 3 +- .../Controls/SpinnerPage/SpinnerPage.doc.ts | 6 +- .../Controls/SpinnerPage/SpinnerPage.tsx | 6 +- .../pages/Controls/TextPage/TextPage.doc.ts | 12 +- .../src/pages/Controls/TextPage/TextPage.tsx | 6 +- .../Controls/TooltipPage/TooltipPage.doc.ts | 6 +- .../Controls/TooltipPage/TooltipPage.tsx | 6 +- .../ControlsPage/ControlsPage.doc.ts | 21 +- .../Overviews/ControlsPage/ControlsPage.tsx | 15 +- .../GetStartedPage/GetStartedPage.doc.ts | 21 +- .../GetStartedPage/GetStartedPage.tsx | 15 +- .../ResourcesPage/ResourcesPage.doc.ts | 3 +- .../Overviews/StylesPage/StylesPage.doc.ts | 3 +- .../TemplatePage/TemplatePage.doc.ts | 21 +- .../Styles/Colors/getColorsImplementation.tsx | 9 +- .../Styles/ElevationPage/ElevationPage.tsx | 3 +- .../FabricIconsPage/FabricIconsPage.doc.ts | 3 +- .../FabricIconsPage/FabricIconsPage.tsx | 6 +- .../pages/Styles/MotionPage/MotionPage.doc.ts | 3 +- .../ThemeSlotsPage/ThemeSlotsPage.base.tsx | 3 +- .../ThemeSlotsPage/ThemeSlotsPage.doc.ts | 3 +- .../Styles/TypographyPage/TypographyPage.tsx | 6 +- apps/stress-test/scripts/commands/run.ts | 2 +- .../src/shared/css/RandomSelector.ts | 2 +- .../src/shared/vanilla/VanillaSelectorTree.ts | 28 +- .../.storybook/preview.js | 19 +- .../src/stories/AvatarGroup.stories.tsx | 45 ++- .../src/utilities/TestWrapperDecorator.tsx | 39 +- .../menuButtonBehaviorDefinition.ts | 15 +- packages/api-docs/src/pageJson.ts | 2 +- packages/api-docs/src/tableJson.ts | 2 +- packages/api-docs/src/tableRowJson.ts | 4 +- packages/codemods/src/helpers/maybe.ts | 2 +- packages/codemods/src/helpers/result.ts | 2 +- .../codemods/src/helpers/tests/maybe.test.ts | 2 +- .../eslint-plugin/src/rules/ban-imports.js | 10 +- .../datepickerCalendarCellButtonBehavior.ts | 19 +- .../behaviors/splitButtonBehavior-test.tsx | 10 +- .../test/behaviors/testDefinitions.ts | 202 ++++------ .../src/createCallbackLogFormatter.ts | 26 +- .../ComponentExample/ComponentExample.tsx | 21 +- .../AvatarExampleSize.shorthand.tsx | 13 +- .../ChatDuplicateMessages.perf.tsx | 3 +- .../Chat/Performance/ChatWithPopover.perf.tsx | 3 +- .../List/Performance/ListCommon.perf.tsx | 6 +- .../Performance/ListWith60ListItems.perf.tsx | 3 +- .../Performance/TreeWith60ListItems.perf.tsx | 3 +- .../Divider/DividerExampleSize.stories.tsx | 6 +- .../e2e/tests/popupInMenu-example.tsx | 28 +- .../src/FocusZone/FocusTrapZone.tsx | 6 +- .../src/FocusZone/FocusZone.tsx | 6 +- .../react-bindings/src/compose/compose.ts | 10 +- .../react-bindings/src/compose/consts.ts | 12 +- .../react-bindings/src/compose/mergeProps.ts | 2 +- .../src/context-selector/createContext.ts | 4 +- .../context-selector/useContextSelector.ts | 2 +- .../context-selector/useContextSelectors.ts | 4 +- .../react-bindings/src/hooks/useMergedRefs.ts | 8 +- .../test/FocusZone/FocusTrapZone-test.tsx | 4 +- .../test/FocusZone/FocusZone-test.tsx | 4 +- .../accesibility/shouldHandleOnKeys-test.ts | 21 +- .../test/hooks/useAutoControlled-test.tsx | 9 +- .../test/hooks/useTriggerElement-test.tsx | 2 +- .../src/components/MultiTypeKnob.tsx | 16 +- .../src/createEmotionRenderer.tsx | 2 +- .../test/emotionRenderer-test.ts | 2 +- .../src/createFelaRenderer.tsx | 2 +- .../src/felaExpandCssShorthandsPlugin.ts | 51 +-- .../table/ResponsiveTableContainer.tsx | 7 +- .../src/components/Accordion/Accordion.tsx | 4 +- .../components/Accordion/AccordionContent.tsx | 4 +- .../components/Accordion/AccordionTitle.tsx | 4 +- .../src/components/Alert/Alert.tsx | 4 +- .../components/Alert/AlertDismissAction.tsx | 4 +- .../src/components/Animation/Animation.tsx | 20 +- .../src/components/Avatar/Avatar.tsx | 4 +- .../src/components/Avatar/AvatarIcon.tsx | 4 +- .../src/components/Avatar/AvatarImage.tsx | 4 +- .../src/components/Avatar/AvatarLabel.tsx | 4 +- .../src/components/Avatar/AvatarStatus.tsx | 4 +- .../components/Avatar/AvatarStatusIcon.tsx | 4 +- .../components/Avatar/AvatarStatusImage.tsx | 4 +- .../src/components/Button/ButtonGroup.tsx | 4 +- .../src/components/Card/Card.tsx | 4 +- .../src/components/Card/CardBody.tsx | 4 +- .../src/components/Card/CardColumn.tsx | 5 +- .../src/components/Card/CardFooter.tsx | 5 +- .../src/components/Card/CardHeader.tsx | 5 +- .../src/components/Card/CardPreview.tsx | 4 +- .../src/components/Card/CardTopControls.tsx | 4 +- .../src/components/Carousel/Carousel.tsx | 4 +- .../src/components/Carousel/CarouselItem.tsx | 4 +- .../Carousel/CarouselNavigation.tsx | 4 +- .../Carousel/CarouselNavigationItem.tsx | 4 +- .../components/Carousel/CarouselPaddle.tsx | 4 +- .../Carousel/CarouselPaddlesContainer.tsx | 4 +- .../src/components/Chat/Chat.tsx | 4 +- .../src/components/Chat/ChatItem.tsx | 4 +- .../src/components/Chat/ChatMessage.tsx | 9 +- .../src/components/Chat/chatContext.ts | 4 +- .../src/components/Checkbox/Checkbox.tsx | 4 +- .../src/components/Datepicker/Datepicker.tsx | 4 +- .../Datepicker/DatepickerCalendar.tsx | 4 +- .../Datepicker/DatepickerCalendarHeader.tsx | 17 +- .../src/components/Debug/DebugSelector.tsx | 11 +- .../src/components/Dialog/Dialog.tsx | 4 +- .../src/components/Dialog/DialogFooter.tsx | 4 +- .../src/components/Divider/Divider.tsx | 19 +- .../src/components/Dropdown/Dropdown.tsx | 337 ++++++++-------- .../src/components/Dropdown/DropdownItem.tsx | 4 +- .../Dropdown/DropdownSearchInput.tsx | 4 +- .../Dropdown/DropdownSelectedItem.tsx | 4 +- .../src/components/Embed/Embed.tsx | 4 +- .../src/components/Flex/Flex.tsx | 4 +- .../src/components/Form/Form.tsx | 4 +- .../src/components/Form/FormField.tsx | 4 +- .../src/components/Form/FormFieldCustom.tsx | 4 +- .../src/components/Grid/Grid.tsx | 4 +- .../src/components/Header/Header.tsx | 4 +- .../components/Header/HeaderDescription.tsx | 4 +- .../src/components/Image/Image.tsx | 4 +- .../src/components/ItemLayout/ItemLayout.tsx | 134 +++---- .../src/components/Label/Label.tsx | 4 +- .../src/components/List/List.tsx | 4 +- .../src/components/List/ListItem.tsx | 4 +- .../src/components/Loader/Loader.tsx | 19 +- .../src/components/Menu/Menu.tsx | 4 +- .../src/components/Menu/MenuDivider.tsx | 9 +- .../src/components/Menu/MenuItem.tsx | 10 +- .../src/components/Menu/MenuItemContent.tsx | 8 +- .../src/components/Menu/MenuItemIcon.tsx | 4 +- .../src/components/Menu/MenuItemIndicator.tsx | 4 +- .../src/components/Menu/MenuItemWrapper.tsx | 4 +- .../src/components/MenuButton/MenuButton.tsx | 5 +- .../src/components/Pill/Pill.tsx | 4 +- .../src/components/Pill/PillAction.tsx | 5 +- .../src/components/Pill/PillContent.tsx | 4 +- .../src/components/Pill/PillGroup.tsx | 4 +- .../src/components/Pill/PillIcon.tsx | 4 +- .../src/components/Pill/PillImage.tsx | 5 +- .../src/components/Popup/Popup.tsx | 124 +++--- .../src/components/Popup/PopupContent.tsx | 4 +- .../src/components/Provider/Provider.tsx | 9 +- .../src/components/RadioGroup/RadioGroup.tsx | 4 +- .../components/RadioGroup/RadioGroupItem.tsx | 18 +- .../src/components/Reaction/Reaction.tsx | 4 +- .../src/components/Reaction/ReactionGroup.tsx | 4 +- .../src/components/Segment/Segment.tsx | 4 +- .../src/components/Slider/Slider.tsx | 11 +- .../components/SplitButton/SplitButton.tsx | 4 +- .../SplitButton/SplitButtonDivider.tsx | 4 +- .../SplitButton/SplitButtonToggle.tsx | 4 +- .../src/components/Status/Status.tsx | 4 +- .../src/components/Table/Table.tsx | 4 +- .../src/components/Table/TableCell.tsx | 4 +- .../src/components/Table/TableRow.tsx | 4 +- .../src/components/Text/Text.tsx | 4 +- .../src/components/TextArea/TextArea.tsx | 4 +- .../src/components/Toolbar/ToolbarItem.tsx | 4 +- .../components/Toolbar/ToolbarMenuItem.tsx | 4 +- .../src/components/Tooltip/TooltipContent.tsx | 4 +- .../src/components/Tree/Tree.tsx | 4 +- .../src/components/Tree/TreeItem.tsx | 4 +- .../src/components/Tree/TreeTitle.tsx | 4 +- .../src/components/Tree/hooks/useTree.ts | 9 +- .../src/components/Video/Video.tsx | 4 +- .../Chat/chatMessageStylesComfyRefresh.ts | 310 ++++++++------- .../Datepicker/datepickerCalendarStyles.ts | 14 +- .../Dropdown/dropdownSearchInputStyles.ts | 32 +- .../teams/components/Layout/layoutStyles.ts | 15 +- .../List/listItemHeaderMediaStyles.ts | 20 +- .../SplitButton/splitButtonToggleStyles.ts | 240 ++++++----- .../Toolbar/toolbarMenuItemIconStyles.ts | 22 +- .../react-northstar/src/themes/types.ts | 6 +- .../react-northstar/src/utils/factories.ts | 7 +- .../src/utils/positioner/getScrollParent.ts | 2 +- .../src/utils/positioner/usePopper.ts | 4 +- .../test/specs/commonTests/isConformant.tsx | 13 +- .../components/Dropdown/Dropdown-test.tsx | 94 ++--- .../fluentui/react-proptypes/src/index.ts | 374 +++++++++--------- packages/fluentui/state/src/types.ts | 2 +- packages/fluentui/styles/src/callable.ts | 8 +- packages/fluentui/styles/src/mergeThemes.ts | 15 +- packages/fluentui/styles/src/types.ts | 2 +- packages/fluentui/styles/src/withDebugId.ts | 4 +- packages/font-icons-mdl2/src/index.ts | 24 +- packages/foundation-legacy/src/IComponent.ts | 4 +- packages/foundation-legacy/src/ISlots.ts | 4 +- .../foundation-legacy/src/createComponent.tsx | 6 +- .../foundation-legacy/src/hooks/controlled.ts | 2 +- .../foundation-legacy/src/next/IComponent.ts | 6 +- packages/foundation-legacy/src/next/ISlots.ts | 2 +- .../foundation-legacy/src/next/composed.tsx | 6 +- packages/foundation-legacy/src/slots.tsx | 4 +- .../merge-styles/src/extractStyleParts.ts | 7 +- .../components/AreaChart/AreaChart.base.tsx | 4 +- .../HeatMapChart/HeatMapChart.base.tsx | 11 +- .../src/components/Legends/shape.tsx | 5 +- .../SankeyChart/SankeyChart.base.tsx | 4 +- .../react-charting/src/utilities/utilities.ts | 39 +- .../src/transformPlugin.ts | 260 ++++++------ .../AccordionItem/useAccordionItem.ts | 8 +- .../useAccordionItemContextValues.ts | 9 +- .../src/button/useARIAButtonProps.ts | 11 +- .../react-avatar/src/utils/getInitials.ts | 3 +- .../src/utils/useToggleState.test.ts | 12 +- .../react-button/src/utils/useToggleState.ts | 2 +- .../react-card/src/components/Card/useCard.ts | 36 +- .../src/components/Card/useCardSelectable.ts | 9 +- .../src/components/Dropdown/useDropdown.tsx | 11 +- .../src/components/Option/useOption.tsx | 10 +- .../src/contexts/useListboxContextValues.ts | 11 +- .../AccessibilityScenarios/Input.stories.tsx | 6 +- .../stories/Migrations/utils.stories.tsx | 6 +- .../src/createContext.ts | 6 +- .../src/useContextSelector.ts | 2 +- .../src/useHasParentContext.ts | 2 +- .../components/CalendarDay/CalendarDay.tsx | 20 +- .../useCalendarDayGridStyles.ts | 9 +- .../components/DatePicker/useDatePicker.tsx | 2 +- .../react-input/docs/Spec-variants.md | 2 +- .../components/MenuList/useMenuList.test.ts | 8 +- .../react-menu/src/contexts/menuContext.ts | 4 +- .../src/testing/mockUseMenuContext.ts | 4 +- .../components/Button/ActionButtonShim.tsx | 19 +- .../src/components/Button/ButtonShim.tsx | 23 +- .../components/Button/DefaultButtonShim.tsx | 9 +- .../src/components/Button/MenuButtonShim.tsx | 55 ++- .../components/Button/PrimaryButtonShim.tsx | 9 +- .../components/Button/ToggleButtonShim.tsx | 27 +- .../createBrandVariants/index.stories.tsx | 2 +- .../Persona/PersonaDefault.stories.tsx | 3 +- .../src/virtualParent/getParent.test.ts | 2 +- .../src/utils/getScrollParent.ts | 2 +- .../utils/parseFloatingUIPlacement.test.ts | 2 +- .../useFluentProviderThemeStyleTag.test.tsx | 6 +- .../DataGridBody/DataGridBody.test.tsx | 2 +- .../src/hooks/useTableColumnResizeState.ts | 94 ++--- .../src/hooks/useTableSelection.ts | 7 +- .../src/hooks/useTableSort.test.ts | 2 +- .../src/testing/mockSyntheticEvent.ts | 2 +- .../src/utils/columnResizeUtils.ts | 8 +- .../stories/DataGrid/CustomRowId.stories.tsx | 4 +- .../MultipleSelectControlled.stories.tsx | 4 +- .../SingleSelectControlled.stories.tsx | 4 +- .../MultipleSelectControlled.stories.tsx | 4 +- .../Table/SingleSelectControlled.stories.tsx | 4 +- .../src/hooks/useFocusFinders.ts | 7 +- .../Theme/spacing/ThemeSpacing.stories.tsx | 14 +- .../react-tree/src/components/Tree/useTree.ts | 7 +- .../react-tree/src/hooks/useFlatTreeItems.ts | 7 +- .../src/compose/getSlots.test.tsx | 12 +- .../react-utilities/src/compose/getSlots.ts | 14 +- .../react-utilities/src/compose/types.ts | 2 +- .../src/hooks/useMergedRefs.ts | 8 +- .../src/hooks/useOnClickOutside.test.ts | 6 +- .../src/hooks/useOnScrollOutside.test.ts | 6 +- .../src/utils/getNativeElementProps.ts | 2 +- .../ColorTokens/ColorTokensList.tsx | 2 +- .../ColorTokens/getAccessibilityChecker.ts | 2 +- .../getOverridableTokenBrandColors.ts | 2 +- .../src/components/TokenBoxes/TokenBoxes.tsx | 4 +- .../ApiReferencesTable/ApiReferencesTable.tsx | 52 ++- .../components/ExampleCard/ExampleCard.tsx | 2 +- .../src/utilities/PlatformContext.tsx | 2 +- .../AreaChart/AreaChartPage.tsx | 12 +- .../DonutChart/DonutChartPage.tsx | 12 +- .../GroupedVerticalBarChartPage.tsx | 12 +- .../HorizontalBarChartPage.tsx | 15 +- .../react-charting/Legends/LegendsPage.tsx | 12 +- .../LineChart/LineChartPage.tsx | 24 +- .../MultiStackedBarChartPage.tsx | 9 +- .../react-charting/PieChart/PieChartPage.tsx | 6 +- .../SankeyChart/SankeyChartPage.tsx | 6 +- .../SparklineChart/SparklineChartPage.tsx | 3 +- .../StackedBarChart/StackedBarChartPage.tsx | 18 +- .../TreeChart/TreeChartPage.tsx | 12 +- .../VerticalBarChart/VerticalBarChartPage.tsx | 18 +- .../VerticalStackedBarChartPage.tsx | 15 +- .../react-experiments/Chiclet/ChicletPage.tsx | 18 +- .../CollapsibleSectionPage.tsx | 18 +- .../FileTypeIcon/FileTypeIconPage.tsx | 3 +- .../FloatingSuggestionsPage.tsx | 9 +- .../FolderCover/FolderCoverPage.tsx | 3 +- .../LayoutGroup/LayoutGroupPage.tsx | 3 +- .../MicroFeedback/MicroFeedbackPage.tsx | 9 +- .../Pagination/PaginationPage.tsx | 12 +- .../react-experiments/Persona/PersonaPage.tsx | 6 +- .../PersonaCoin/PersonaCoinPage.tsx | 6 +- .../SelectedPeopleListPage.tsx | 21 +- .../react-experiments/Sidebar/SidebarPage.tsx | 6 +- .../react-experiments/Signals/SignalsPage.tsx | 6 +- .../react-experiments/Slider/SliderPage.tsx | 6 +- .../react-experiments/Theming/ThemingPage.tsx | 6 +- .../src/react-experiments/Tile/TilePage.tsx | 9 +- .../TilesList/ExampleHelpers.tsx | 38 +- .../TilesList/TilesList.Basic.Example.tsx | 18 +- .../TilesList/TilesListPage.tsx | 9 +- .../UnifiedPeoplePickerPage.tsx | 6 +- .../VirtualizedList/VirtualizedListPage.tsx | 6 +- .../react-focus/FocusZone/FocusZone.doc.tsx | 15 +- .../react/ActivityItem/ActivityItem.doc.tsx | 9 +- .../src/react/Announced/Announced.doc.tsx | 12 +- .../src/react/Breadcrumb/Breadcrumb.doc.tsx | 9 +- .../src/react/Button/Button.doc.tsx | 36 +- .../src/react/Calendar/Calendar.doc.tsx | 39 +- .../src/react/Callout/Callout.doc.tsx | 15 +- .../src/react/Checkbox/Checkbox.doc.tsx | 9 +- .../src/react/ChoiceGroup/ChoiceGroup.doc.tsx | 18 +- .../src/react/Coachmark/Coachmark.doc.tsx | 3 +- .../src/react/ColorPicker/ColorPicker.doc.tsx | 3 +- .../src/react/ComboBox/ComboBox.doc.tsx | 30 +- .../CommandBar.CommandBarButtonAs.Example.tsx | 61 +-- .../CommandBar/CommandBar.Lazy.Example.tsx | 4 +- .../src/react/CommandBar/CommandBar.doc.tsx | 15 +- .../ContextualMenu/ContextualMenu.doc.tsx | 48 ++- .../src/react/DatePicker/DatePicker.doc.tsx | 24 +- .../DetailsList.ColumnResize.Example.tsx | 24 +- .../src/react/DetailsList/DetailsList.doc.tsx | 57 ++- .../src/react/Dialog/Dialog.doc.tsx | 15 +- .../src/react/Divider/Divider.doc.tsx | 6 +- .../Divider/VerticalDivider.Basic.Example.tsx | 42 +- .../VerticalDivider.Custom.Example.tsx | 42 +- .../react/DocumentCard/DocumentCard.doc.tsx | 15 +- .../src/react/Dropdown/Dropdown.doc.tsx | 24 +- .../ExtendedPeoplePicker.doc.tsx | 15 +- .../ExtendedPeoplePicker.doc.tsx | 15 +- .../src/react/Facepile/Facepile.doc.tsx | 9 +- .../FloatingPeoplePicker.doc.tsx | 15 +- .../react/FocusTrapZone/FocusTrapZone.doc.tsx | 18 +- .../src/react/GroupedList/GroupedList.doc.tsx | 9 +- .../src/react/HoverCard/HoverCard.doc.tsx | 15 +- .../src/react/Icon/Icon.doc.tsx | 15 +- .../src/react/Image/Image.doc.tsx | 24 +- .../react/Keytip/Keytips.Button.Example.tsx | 5 +- .../src/react/Keytip/Keytips.doc.tsx | 15 +- .../src/react/Label/Label.doc.tsx | 3 +- .../src/react/Layer/Layer.doc.tsx | 12 +- .../src/react/Link/Link.doc.tsx | 3 +- .../src/react/List/List.doc.tsx | 12 +- .../MarqueeSelection/MarqueeSelection.doc.tsx | 3 +- .../src/react/MessageBar/MessageBar.doc.tsx | 6 +- .../src/react/Modal/Modal.doc.tsx | 6 +- .../react-examples/src/react/Nav/Nav.doc.tsx | 18 +- .../src/react/OverflowSet/OverflowSet.doc.tsx | 12 +- .../src/react/Overlay/Overlay.doc.tsx | 6 +- .../src/react/Panel/Panel.doc.tsx | 33 +- .../react/PeoplePicker/PeoplePicker.doc.tsx | 21 +- .../src/react/Persona/Persona.doc.tsx | 24 +- .../Pickers/Picker.CustomResult.Example.tsx | 5 +- .../src/react/Pickers/Pickers.doc.tsx | 12 +- .../src/react/Pivot/Pivot.doc.tsx | 30 +- .../src/react/Popup/Popup.doc.tsx | 6 +- .../ProgressIndicator.doc.tsx | 6 +- .../src/react/Rating/Rating.Basic.Example.tsx | 8 +- .../src/react/Rating/Rating.doc.tsx | 6 +- .../src/react/ResizeGroup/ResizeGroup.doc.tsx | 9 +- .../ScrollablePane/ScrollablePane.doc.tsx | 6 +- .../src/react/SearchBox/SearchBox.doc.tsx | 15 +- .../SelectedPeopleList.doc.tsx | 6 +- .../src/react/Selection/Selection.doc.tsx | 3 +- .../src/react/Separator/Separator.doc.tsx | 9 +- .../src/react/Shimmer/Shimmer.doc.tsx | 15 +- .../src/react/Slider/Slider.doc.tsx | 9 +- .../src/react/SpinButton/SpinButton.doc.tsx | 18 +- .../src/react/Spinner/Spinner.doc.tsx | 6 +- .../src/react/Stack/Stack.doc.tsx | 66 ++-- .../SwatchColorPicker.doc.tsx | 3 +- .../TeachingBubble/TeachingBubble.doc.tsx | 24 +- .../src/react/Text/Text.doc.tsx | 9 +- .../src/react/TextField/TextField.doc.tsx | 27 +- .../react/ThemeProvider/ThemeProvider.doc.tsx | 6 +- .../src/react/TimePicker/TimePicker.doc.tsx | 3 +- .../src/react/Toggle/Toggle.doc.tsx | 6 +- .../src/react/Tooltip/Tooltip.doc.tsx | 18 +- .../FloatingSuggestions.tsx | 7 +- .../Suggestions/SuggestionsItem.tsx | 83 ++-- .../FloatingSuggestionsComposite.test.tsx | 16 +- .../MicroFeedback/MicroFeedback.state.ts | 2 +- .../subcomponents/DefaultEditingItem.tsx | 7 +- .../SelectedPeopleList/SelectedPeopleList.tsx | 15 +- .../src/components/Sidebar/Sidebar.tsx | 12 +- .../Tile/ShimmerTile/ShimmerTile.base.tsx | 10 +- .../src/components/Tile/Tile.tsx | 9 +- .../UnifiedPicker/UnifiedPicker.test.tsx | 24 +- .../src/getFileTypeIconProps.test.ts | 2 +- .../components/FocusZone/FocusZone.test.tsx | 52 +-- .../src/components/FocusZone/FocusZone.tsx | 6 +- packages/react-hooks/README.md | 2 +- .../react-hooks/src/useControllableValue.ts | 6 +- packages/react-hooks/src/useMergedRefs.ts | 8 +- packages/react-hooks/src/useSetInterval.ts | 2 +- packages/react-hooks/src/useSetTimeout.ts | 2 +- .../src/components/EditorWrapper.tsx | 9 +- .../src/transpiler/transpile.ts | 58 ++- .../src/transpiler/transpileHelpers.test.ts | 46 +-- .../src/WindowProvider.test.tsx | 4 +- .../components/Breadcrumb/Breadcrumb.base.tsx | 26 +- .../ActionButton/ActionButton.styles.ts | 138 ++++--- .../components/Button/BaseButton.styles.ts | 164 ++++---- .../src/components/Button/BaseButton.tsx | 10 +- .../Button/IconButton/IconButton.styles.ts | 96 +++-- .../Button/SplitButton/SplitButton.styles.ts | 350 ++++++++-------- .../src/components/Calendar/Calendar.base.tsx | 5 +- .../Calendar/CalendarDay/CalendarDay.base.tsx | 22 +- .../PositioningContainer.styles.ts | 54 ++- .../ColorRectangle/ColorRectangle.base.tsx | 3 +- .../ColorRectangle/ColorRectangle.test.tsx | 20 +- .../components/ComboBox/ComboBox.styles.ts | 40 +- .../components/CommandBar/CommandBar.base.tsx | 2 +- .../CommandBar/CommandBar.styles.ts | 30 +- .../ContextualMenu/ContextualMenu.cnstyles.ts | 344 ++++++++-------- .../DetailsList/DetailsColumn.base.tsx | 36 +- .../DetailsList/DetailsHeader.base.tsx | 3 +- .../DetailsList/DetailsList.test.tsx | 2 +- .../DetailsList/DetailsListV2.test.tsx | 2 +- .../DetailsList/DetailsRow.styles.ts | 11 +- .../ExtendedPicker/BaseExtendedPicker.tsx | 3 +- .../BaseFloatingPicker.test.tsx | 8 +- .../FloatingPicker/BaseFloatingPicker.tsx | 18 +- .../Suggestions/SuggestionsControl.tsx | 5 +- .../Suggestions/SuggestionsStore.ts | 2 +- .../GroupedList/GroupedList.test.tsx | 90 ++--- .../GroupedList/GroupedListV2.base.tsx | 3 +- .../GroupedList/GroupedListV2.test.tsx | 90 ++--- .../HoverCard/ExpandingCard.styles.ts | 10 +- .../src/components/List/utils/scroll.test.ts | 2 +- .../Persona/PersonaCoin/PersonaCoin.base.tsx | 70 ++-- .../ScrollablePane/ScrollablePane.base.tsx | 3 +- .../BaseSelectedItemsList.test.tsx | 8 +- .../BaseSelectedItemsList.tsx | 3 +- .../react/src/components/Slider/useSlider.ts | 33 +- .../SpinButton/SpinButton.styles.ts | 38 +- .../SwatchColorPicker.base.tsx | 2 +- .../components/TextField/TextField.base.tsx | 3 +- .../src/components/TimePicker/TimePicker.tsx | 9 +- .../src/components/Tooltip/Tooltip.test.tsx | 2 +- .../src/components/pickers/BasePicker.tsx | 3 +- .../DraggableZone/DraggableZone.styles.ts | 28 +- packages/test-utilities/src/safeMount.ts | 2 +- packages/utilities/src/Async.ts | 2 +- packages/utilities/src/createMergedRef.ts | 20 +- packages/utilities/src/initials.ts | 3 +- packages/utilities/src/merge.ts | 6 +- packages/utilities/src/modalize.ts | 2 +- packages/utilities/src/styled.tsx | 6 +- packages/utilities/src/useFocusRects.test.tsx | 4 +- .../utilities/src/warn/warnControlledUsage.ts | 12 +- .../_docs/design-system/color-explorer/app.ts | 40 +- packages/web-components/src/design-tokens.ts | 6 +- .../web-components/src/styles/elevation.ts | 49 +-- .../convergence/theme-tokens.md | 12 +- scripts/babel/plugins/types.ts | 4 +- scripts/beachball/utils.ts | 6 +- .../utils/getRuntimeDependencies.ts | 10 +- scripts/gulp/src/config.ts | 17 +- .../gulp/src/plugins/util/getComponentInfo.ts | 11 +- scripts/puppeteer/src/utils.spec.ts | 6 +- scripts/storybook/src/utils.js | 17 +- scripts/tasks/src/utils.spec.ts | 2 +- scripts/tasks/src/utils.ts | 2 +- scripts/triage-bot/src/triage-bot.spec.ts | 6 +- tools/generators/epic-generator/index.spec.ts | 4 +- 501 files changed, 4363 insertions(+), 4114 deletions(-) diff --git a/apps/perf-test-react-components/src/scenarios/Persona.tsx b/apps/perf-test-react-components/src/scenarios/Persona.tsx index bc0dbd40b4bcdb..b73c4268c7ff8e 100644 --- a/apps/perf-test-react-components/src/scenarios/Persona.tsx +++ b/apps/perf-test-react-components/src/scenarios/Persona.tsx @@ -10,8 +10,7 @@ const Scenario = () => ( presence={{ status: 'available' }} avatar={{ image: { - src: - 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20221209.001/office-ui-fabric-react-assets/persona-male.png', + src: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20221209.001/office-ui-fabric-react-assets/persona-male.png', }, }} /> diff --git a/apps/perf-test-react-components/tasks/perf-test.ts b/apps/perf-test-react-components/tasks/perf-test.ts index 794ed65e9b1ce0..f54e00573fa998 100644 --- a/apps/perf-test-react-components/tasks/perf-test.ts +++ b/apps/perf-test-react-components/tasks/perf-test.ts @@ -226,15 +226,16 @@ export async function getPerfRegressions() { * Create test summary based on test results. */ function createReport(scenarioSettings: ScenarioSetting, testResults: CookResults) { - const report = '## [Perf Analysis (`@fluentui/react-components`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n' + const report = + '## [Perf Analysis (`@fluentui/react-components`)](https://github.com/microsoft/fluentui/wiki/Perf-Testing)\n' - // Show only significant changes by default. - .concat(createScenarioTable(scenarioSettings, testResults, false)) + // Show only significant changes by default. + .concat(createScenarioTable(scenarioSettings, testResults, false)) - // Show all results in a collapsible table. - .concat('
All results

') - .concat(createScenarioTable(scenarioSettings, testResults, true)) - .concat('

\n\n'); + // Show all results in a collapsible table. + .concat('
All results

') + .concat(createScenarioTable(scenarioSettings, testResults, true)) + .concat('

\n\n'); return report; } diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx index ae88d1f6d95f33..408388ff23281e 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx @@ -28,8 +28,8 @@ const _mapping = rawMapping .map(entry => { const v0IconName = `${entry.v0}`; const v9IconName = `${entry.v9}Regular`; - const V0Icon = ((v0Icons as unknown) as Record)[v0IconName]; - const V9Icon = ((v9Icons as unknown) as Record)[v9IconName]; + const V0Icon = (v0Icons as unknown as Record)[v0IconName]; + const V9Icon = (v9Icons as unknown as Record)[v9IconName]; if (!V0Icon) { return null; @@ -75,9 +75,10 @@ const IconCatalogInner: React.FC = () => { [searchTerm, searchV0], ); - const onInputChange: InputProps['onChange'] = React.useCallback((e, { value }) => updateSearchDebounced(value), [ - updateSearchDebounced, - ]); + const onInputChange: InputProps['onChange'] = React.useCallback( + (e, { value }) => updateSearchDebounced(value), + [updateSearchDebounced], + ); const onSwitchChange: SwitchProps['onChange'] = React.useCallback((e, { checked }) => setSearchV0(checked), []); return ( diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorUtils.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorUtils.ts index 046acbf4ea2d32..37f9212114ad77 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorUtils.ts +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorUtils.ts @@ -12,7 +12,7 @@ import { import { DefaultPalette } from '@fluentui/react'; const palettePrefix = 'palette.'; -const paletteMap = (DefaultPalette as unknown) as Record; +const paletteMap = DefaultPalette as unknown as Record; const blackAlphaPrefix = 'blackAlpha['; const greyPrefix = 'grey['; @@ -20,11 +20,11 @@ const whiteAlphaPrefix = 'whiteAlpha['; const sharedColorsPrefix = 'sharedColors.'; const brandPrefix = 'brand['; -const blackAlphaMap = (blackAlpha as unknown) as Record; -const greyMap = (grey as unknown) as Record; -const whiteAlphaMap = (whiteAlpha as unknown) as Record; -const sharedColorsMap = (sharedColors as unknown) as Record; -const brandMap = (brandWeb as unknown) as Record; +const blackAlphaMap = blackAlpha as unknown as Record; +const greyMap = grey as unknown as Record; +const whiteAlphaMap = whiteAlpha as unknown as Record; +const sharedColorsMap = sharedColors as unknown as Record; +const brandMap = brandWeb as unknown as Record; const getV9BlackAlpha = (name: string): string => { const rampNumber = name.substring(blackAlphaPrefix.length, name.length - 1); @@ -47,7 +47,7 @@ const getV9SharedColor = (name: string): string => { throw new Error('Could not get color block info. Unsupported shared color specified.'); } const parent = sharedColorsMap[colorParts[0]]; - return ((parent as unknown) as Record)[colorParts[1]]; + return (parent as unknown as Record)[colorParts[1]]; }; const getV9BrandColor = (name: string): string => { diff --git a/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.doc.ts b/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.doc.ts index 1d1c7380c82ff0..cf32855bd0934f 100644 --- a/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.doc.ts @@ -13,18 +13,22 @@ const componentUrl = export const AvatarPageProps: TFabricPlatformPageProps = { ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarOverview.md') as string, related, componentUrl, }, mac: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.tsx b/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.tsx index d7fb6a7312417e..50220d96895eb6 100644 --- a/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.tsx +++ b/apps/public-docsite/src/pages/Controls/AvatarPage/AvatarPage.tsx @@ -25,7 +25,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/AvatarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/ios/AvatarImplementation.md') as string, }, ]; @@ -34,7 +35,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/AvatarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/android/AvatarImplementation.md') as string, }, ]; case 'mac': @@ -42,7 +44,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/mac/AvatarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/AvatarPage/docs/mac/AvatarImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/BottomNavigationPage/BottomNavigationPage.doc.ts b/apps/public-docsite/src/pages/Controls/BottomNavigationPage/BottomNavigationPage.doc.ts index 203bca64aa868e..dec4801a5b374a 100644 --- a/apps/public-docsite/src/pages/Controls/BottomNavigationPage/BottomNavigationPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/BottomNavigationPage/BottomNavigationPage.doc.ts @@ -11,13 +11,15 @@ const componentUrl = export const BottomNavigationPageProps: TFabricPlatformPageProps = { ios: { title: 'Tab Bar', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomNavigationPage/docs/ios/BottomNavigationOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomNavigationPage/docs/ios/BottomNavigationOverview.md') as string, related, componentUrl, }, android: { title: 'Bottom Navigation', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomNavigationPage/docs/android/BottomNavigationOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomNavigationPage/docs/android/BottomNavigationOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.doc.ts b/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.doc.ts index 1065fc32167b12..437866504d4fb0 100644 --- a/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.doc.ts @@ -11,7 +11,8 @@ const componentUrl = export const BottomSheetPageProps: TFabricPlatformPageProps = { android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.tsx b/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.tsx index 4a16202d5d81dc..43a6497d280fe9 100644 --- a/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.tsx +++ b/apps/public-docsite/src/pages/Controls/BottomSheetPage/BottomSheetPage.tsx @@ -26,7 +26,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/BottomSheetImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/BottomSheetPage/docs/android/BottomSheetImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.doc.ts b/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.doc.ts index 17f4215130cc0c..cc4239f9a4ceed 100644 --- a/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.doc.ts @@ -20,30 +20,38 @@ export const ButtonPageProps = (disabled: boolean, checked: boolean): TPlatformP related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonOverview.md') as string, related, componentUrl, }, windows: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/windows/ButtonOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/windows/ButtonUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/windows/ButtonOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/windows/ButtonUsage.md') as string, related, componentUrl, }, mac: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonUsage.md') as string, related, componentUrl, }, cross: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/cross/ButtonUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.tsx b/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.tsx index ae23594c4a61b1..98f6372261842e 100644 --- a/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.tsx +++ b/apps/public-docsite/src/pages/Controls/ButtonPage/ButtonPage.tsx @@ -72,7 +72,8 @@ export class ButtonPage extends React.Component< { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/ButtonImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/ios/ButtonImplementation.md') as string, }, ]; @@ -81,7 +82,8 @@ export class ButtonPage extends React.Component< { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/ButtonImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/android/ButtonImplementation.md') as string, }, ]; case 'windows': @@ -96,7 +98,8 @@ export class ButtonPage extends React.Component< { sectionName: 'Implementation', editUrl: baseUrl + 'docs/mac/ButtonImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ButtonPage/docs/mac/ButtonImplementation.md') as string, }, ]; case 'cross': diff --git a/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.doc.ts b/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.doc.ts index 5db954014fe330..d8e29eb12570fb 100644 --- a/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.doc.ts @@ -16,7 +16,8 @@ export const CalendarPageProps: TFabricPlatformPageProps = { related, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.tsx b/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.tsx index 06c3daa7e1b941..b084ee46c64c09 100644 --- a/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.tsx +++ b/apps/public-docsite/src/pages/Controls/CalendarPage/CalendarPage.tsx @@ -26,7 +26,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/CalendarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/CalendarPage/docs/android/CalendarImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/ChipPage/ChipPage.doc.ts b/apps/public-docsite/src/pages/Controls/ChipPage/ChipPage.doc.ts index 491de600d240db..06a1fa504cdb91 100644 --- a/apps/public-docsite/src/pages/Controls/ChipPage/ChipPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/ChipPage/ChipPage.doc.ts @@ -12,13 +12,15 @@ const componentUrl = export const ChipPageProps: TFabricPlatformPageProps = { ios: { title: 'Chip', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ChipPage/docs/ios/ChipOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ChipPage/docs/ios/ChipOverview.md') as string, related, componentUrl, }, android: { title: 'Chip', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ChipPage/docs/android/ChipOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ChipPage/docs/android/ChipOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/DatePickerPage/DatePickerPage.doc.ts b/apps/public-docsite/src/pages/Controls/DatePickerPage/DatePickerPage.doc.ts index bfd8fb2af0d82d..1688613b6b492b 100644 --- a/apps/public-docsite/src/pages/Controls/DatePickerPage/DatePickerPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/DatePickerPage/DatePickerPage.doc.ts @@ -20,22 +20,26 @@ export const DatePickerPageProps: TFabricPlatformPageProps = { ios: { title: 'Date & Time Picker', fileNamePrefix: 'DateTimePicker', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/ios/DateTimePickerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/ios/DateTimePickerOverview.md') as string, related, componentUrl, }, android: { title: 'Date & Time Picker', fileNamePrefix: 'DateTimePicker', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/android/DateTimePickerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/android/DateTimePickerOverview.md') as string, related, componentUrl, }, mac: { title: 'Date Picker', fileNamePrefix: 'DatePicker', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DatePickerPage/docs/mac/DatePickerUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.doc.ts b/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.doc.ts index adb8bdde1cf21f..1a29d89a095d39 100644 --- a/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.doc.ts @@ -12,12 +12,14 @@ const componentUrl = export const DrawerPageProps: TFabricPlatformPageProps = { ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.tsx b/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.tsx index 3ddf28f5f4e05a..6ccc02b1acee36 100644 --- a/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.tsx +++ b/apps/public-docsite/src/pages/Controls/DrawerPage/DrawerPage.tsx @@ -25,7 +25,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/DrawerImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/ios/DrawerImplementation.md') as string, }, ]; case 'android': @@ -33,7 +34,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/DrawerImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/DrawerPage/docs/android/DrawerImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.doc.ts b/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.doc.ts index 5c996ef6bd9142..37f75c46c08b62 100644 --- a/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.doc.ts @@ -18,16 +18,20 @@ export const LinkPageProps: TFabricPlatformPageProps = { mac: { title: 'Link', fileNamePrefix: 'Link', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkUsage.md') as string, related, componentUrl, }, cross: { title: 'Link', fileNamePrefix: 'Link', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/cross/LinkUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.tsx b/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.tsx index 752b62010146e6..be813a37946afb 100644 --- a/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.tsx +++ b/apps/public-docsite/src/pages/Controls/LinkPage/LinkPage.tsx @@ -28,7 +28,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/mac/LinkImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/LinkPage/docs/mac/LinkImplementation.md') as string, }, ]; case 'cross': diff --git a/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.doc.ts b/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.doc.ts index 6d9d1439ed2a76..a372176cec18cc 100644 --- a/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.doc.ts @@ -10,12 +10,14 @@ const componentUrl = export const ListCellsPageProps: TFabricPlatformPageProps = { ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.tsx b/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.tsx index b35b86b4d341aa..3ea96989459bf3 100644 --- a/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.tsx +++ b/apps/public-docsite/src/pages/Controls/ListCellsPage/ListCellsPage.tsx @@ -26,7 +26,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/ListCellsImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/ios/ListCellsImplementation.md') as string, }, ]; case 'android': @@ -34,7 +35,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/ListCellsImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ListCellsPage/docs/android/ListCellsImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.doc.ts b/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.doc.ts index 35bbae7b34c8f7..6ab8e6190fa3e1 100644 --- a/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.doc.ts @@ -12,7 +12,8 @@ export const MessageBarPageProps: TFabricPlatformPageProps = { related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.tsx b/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.tsx index c5217553e42cdc..8fb3b58af6deeb 100644 --- a/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.tsx +++ b/apps/public-docsite/src/pages/Controls/MessageBarPage/MessageBarPage.tsx @@ -24,7 +24,8 @@ function _otherSections(platform?: Platforms): IPageSectionProps[] | { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/MessageBarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/MessageBarPage/docs/ios/MessageBarImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.doc.ts b/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.doc.ts index de497c83dcdfac..22c72f1c59533b 100644 --- a/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.doc.ts @@ -11,13 +11,15 @@ const componentUrl = export const NavBarPageProps: TFabricPlatformPageProps = { ios: { title: 'Navigation Bar', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarOverview.md') as string, related, componentUrl, }, android: { title: 'Top App Bar', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.tsx b/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.tsx index 0915e66a9deff0..7f2b4211078540 100644 --- a/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.tsx +++ b/apps/public-docsite/src/pages/Controls/NavBarPage/NavBarPage.tsx @@ -24,7 +24,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/NavBarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/ios/NavBarImplementation.md') as string, }, ]; case 'android': @@ -32,7 +33,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/NavBarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/NavBarPage/docs/android/NavBarImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.doc.ts b/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.doc.ts index eb07e715831b6c..eb0d212bacd131 100644 --- a/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.doc.ts @@ -17,7 +17,8 @@ export const PeoplePickerPageProps: TFabricPlatformPageProps = { componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.tsx b/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.tsx index b78ca997ee7de9..2c459834f21ef1 100644 --- a/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.tsx +++ b/apps/public-docsite/src/pages/Controls/PeoplePickerPage/PeoplePickerPage.tsx @@ -26,7 +26,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/PeoplePickerImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PeoplePickerPage/docs/android/PeoplePickerImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.doc.ts b/apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.doc.ts index 577f9af37965ff..24811128fca24e 100644 --- a/apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/PersonaPage/PersonaPage.doc.ts @@ -18,20 +18,25 @@ export const PersonaPageProps: TFabricPlatformPageProps = { related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaOverview.md') as string, dos: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaDos.md') as string, - donts: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaDonts.md') as string, + donts: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/ios/PersonaDonts.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/android/PersonaOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/android/PersonaOverview.md') as string, related, componentUrl, }, cross: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PersonaPage/docs/cross/PersonaUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.doc.ts b/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.doc.ts index 256a854d9d168e..7596ce16a4ecd1 100644 --- a/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.doc.ts @@ -12,7 +12,8 @@ const componentUrl = export const PillButtonBarPageProps: TFabricPlatformPageProps = { ios: { title: 'Pill Button Bar', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.tsx b/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.tsx index 271eca93a9fd7b..78e85960c04fb8 100644 --- a/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.tsx +++ b/apps/public-docsite/src/pages/Controls/PillButtonBarPage/PillButtonBarPage.tsx @@ -24,7 +24,8 @@ function _otherSections(platform?: Platforms): IPageSectionProps[] | { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/PillButtonBarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PillButtonBarPage/docs/ios/PillButtonBarImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/PivotPage/PivotPage.doc.ts b/apps/public-docsite/src/pages/Controls/PivotPage/PivotPage.doc.ts index 74fd88d0a1e122..95145731ca254d 100644 --- a/apps/public-docsite/src/pages/Controls/PivotPage/PivotPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/PivotPage/PivotPage.doc.ts @@ -17,7 +17,8 @@ export const PivotPageProps: TFabricPlatformPageProps = { }, ios: { title: 'Pivot', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PivotPage/docs/ios/PivotOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PivotPage/docs/ios/PivotOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.doc.ts b/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.doc.ts index 91e9cdc48e8e32..03dc9ffe8b04dd 100644 --- a/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.doc.ts @@ -12,12 +12,14 @@ const componentUrl = export const PopupMenuPageProps: TFabricPlatformPageProps = { ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.tsx b/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.tsx index 7645a2903f6a4a..a83ce3459244cb 100644 --- a/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.tsx +++ b/apps/public-docsite/src/pages/Controls/PopupMenuPage/PopupMenuPage.tsx @@ -26,7 +26,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/PopupMenuImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/ios/PopupMenuImplementation.md') as string, }, ]; case 'android': @@ -34,7 +35,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/PopupMenuImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/PopupMenuPage/docs/android/PopupMenuImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.doc.ts b/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.doc.ts index 06dfce758ff70d..8444b99617dcd3 100644 --- a/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.doc.ts @@ -19,25 +19,31 @@ export const SeparatorPageProps: TFabricPlatformPageProps = { related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorOverview.md') as string, related, componentUrl, }, mac: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorUsage.md') as string, related, componentUrl, }, cross: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/cross/SeparatorUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.tsx b/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.tsx index 583e7947c1aa32..5a8216e3d1f0fe 100644 --- a/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.tsx +++ b/apps/public-docsite/src/pages/Controls/SeparatorPage/SeparatorPage.tsx @@ -30,7 +30,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/SeparatorImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/ios/SeparatorImplementation.md') as string, }, ]; @@ -39,7 +40,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/SeparatorImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/android/SeparatorImplementation.md') as string, }, ]; @@ -48,7 +50,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/mac/SeparatorImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SeparatorPage/docs/mac/SeparatorImplementation.md') as string, }, ]; diff --git a/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.doc.ts b/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.doc.ts index 13f59a2658a1b7..f1a0758fba299c 100644 --- a/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.doc.ts @@ -15,7 +15,8 @@ export const ShimmerPageProps: TFabricPlatformPageProps = { related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.tsx b/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.tsx index 162ab6df922506..231b6f07855bd5 100644 --- a/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.tsx +++ b/apps/public-docsite/src/pages/Controls/ShimmerPage/ShimmerPage.tsx @@ -25,7 +25,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/ShimmerImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/ShimmerPage/docs/ios/ShimmerImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.doc.ts b/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.doc.ts index 96aff97c1358e9..df859bf210aba0 100644 --- a/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.doc.ts @@ -8,7 +8,8 @@ const componentUrl = export const SnackbarPageProps: TFabricPlatformPageProps = { android: { title: 'Snackbar', - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.tsx b/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.tsx index 0b956b81547899..57da8adc1ffe90 100644 --- a/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.tsx +++ b/apps/public-docsite/src/pages/Controls/SnackbarPage/SnackbarPage.tsx @@ -25,7 +25,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/SnackbarImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SnackbarPage/docs/android/SnackbarImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.doc.ts b/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.doc.ts index 7fa9b70ebac1bd..e2115216529191 100644 --- a/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.doc.ts @@ -16,12 +16,14 @@ export const SpinnerPageProps: TFabricPlatformPageProps = { related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.tsx b/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.tsx index 00873435772e59..ee9ea1e15ec8b2 100644 --- a/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.tsx +++ b/apps/public-docsite/src/pages/Controls/SpinnerPage/SpinnerPage.tsx @@ -24,7 +24,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u sectionName: 'Implementation', editUrl: 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/ios/SpinnerImplementation.md') as string, }, ]; case 'android': @@ -33,7 +34,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u sectionName: 'Implementation', editUrl: 'https://github.com/microsoft/fluentui/tree/master/apps/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/SpinnerPage/docs/android/SpinnerImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Controls/TextPage/TextPage.doc.ts b/apps/public-docsite/src/pages/Controls/TextPage/TextPage.doc.ts index 530b3ade2eef0b..9626555723c45a 100644 --- a/apps/public-docsite/src/pages/Controls/TextPage/TextPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/TextPage/TextPage.doc.ts @@ -17,18 +17,22 @@ export const TextPageProps: TFabricPlatformPageProps = { related, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/ios/TextOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/ios/TextOverview.md') as string, related, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/android/TextOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/android/TextOverview.md') as string, related, componentUrl, }, cross: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/cross/TextOverview.md') as string, - usage: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/cross/TextUsage.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/cross/TextOverview.md') as string, + usage: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/cross/TextUsage.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/TextPage/TextPage.tsx b/apps/public-docsite/src/pages/Controls/TextPage/TextPage.tsx index 4ed8005229fa93..d90a1018df5779 100644 --- a/apps/public-docsite/src/pages/Controls/TextPage/TextPage.tsx +++ b/apps/public-docsite/src/pages/Controls/TextPage/TextPage.tsx @@ -28,7 +28,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/TextImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/ios/TextImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/ios/TextImplementation.md') as string, }, ]; @@ -37,7 +38,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/TextImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/android/TextImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TextPage/docs/android/TextImplementation.md') as string, }, ]; case 'cross': diff --git a/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.doc.ts b/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.doc.ts index 76ad00a43e7100..6187fe81314329 100644 --- a/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.doc.ts @@ -16,12 +16,14 @@ export const TooltipPageProps: TFabricPlatformPageProps = { related, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipOverview.md') as string, related, componentUrl, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipOverview.md') as string, related, componentUrl, }, diff --git a/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.tsx b/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.tsx index 39abb5b6f531cb..945adc493c15f2 100644 --- a/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.tsx +++ b/apps/public-docsite/src/pages/Controls/TooltipPage/TooltipPage.tsx @@ -24,7 +24,8 @@ function _otherSections(platform?: Platforms): IPageSectionProps[] | { sectionName: 'Implementation', editUrl: baseUrl + 'docs/android/TooltipImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/android/TooltipImplementation.md') as string, }, ]; case 'ios': @@ -32,7 +33,8 @@ function _otherSections(platform?: Platforms): IPageSectionProps[] | { sectionName: 'Implementation', editUrl: baseUrl + 'docs/ios/TooltipImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Controls/TooltipPage/docs/ios/TooltipImplementation.md') as string, }, ]; } diff --git a/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.doc.ts b/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.doc.ts index 5f64c8a876354f..857cafe202857f 100644 --- a/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.doc.ts +++ b/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.doc.ts @@ -5,31 +5,38 @@ const componentUrl = export const ControlsPageProps: TFabricPlatformPageProps = { web: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/web/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/web/ControlsOverview.md') as string, componentUrl, }, webcomponents: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/webcomponents/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/webcomponents/ControlsOverview.md') as string, componentUrl, }, ios: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/ios/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/ios/ControlsOverview.md') as string, componentUrl, }, android: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/android/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/android/ControlsOverview.md') as string, componentUrl, }, mac: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/mac/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/mac/ControlsOverview.md') as string, componentUrl, }, windows: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/windows/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/windows/ControlsOverview.md') as string, componentUrl, }, cross: { - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/cross/ControlsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Overviews/ControlsPage/docs/cross/ControlsOverview.md') as string, componentUrl, }, }; diff --git a/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.tsx b/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.tsx index 43022905623d67..bd9cb9928437fe 100644 --- a/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.tsx +++ b/apps/public-docsite/src/pages/Overviews/ControlsPage/ControlsPage.tsx @@ -69,27 +69,32 @@ function _otherControlsRequestSections(platform: Platforms): IPageSectionProps

{ - const colorsMarkdown = require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/Colors/docs/web/ColorsImplementation.md') - .replace(/CommunicationColors\.primary/g, `${jsColorGroup}.${jsColorName}`) - .replace(/CommunicationColors/g, jsColorGroup) - .replace(/communicationPrimary/g, scssColorName); + const colorsMarkdown = + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/Colors/docs/web/ColorsImplementation.md') + .replace(/CommunicationColors\.primary/g, `${jsColorGroup}.${jsColorName}`) + .replace(/CommunicationColors/g, jsColorGroup) + .replace(/communicationPrimary/g, scssColorName); return { sectionName: 'Implementation', diff --git a/apps/public-docsite/src/pages/Styles/ElevationPage/ElevationPage.tsx b/apps/public-docsite/src/pages/Styles/ElevationPage/ElevationPage.tsx index 6e998bd834b1e6..2695faa70c0377 100644 --- a/apps/public-docsite/src/pages/Styles/ElevationPage/ElevationPage.tsx +++ b/apps/public-docsite/src/pages/Styles/ElevationPage/ElevationPage.tsx @@ -41,7 +41,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { { sectionName: 'Implementation', editUrl: `${baseUrl}/web/ElevationImplementation.md`, - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/ElevationPage/docs/web/ElevationImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/ElevationPage/docs/web/ElevationImplementation.md') as string, }, ]; diff --git a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.doc.ts b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.doc.ts index a88c2de0495027..b285d84fe63d97 100644 --- a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.doc.ts +++ b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.doc.ts @@ -7,7 +7,8 @@ const componentUrl = export const FabricIconsPageProps: TFabricPlatformPageProps = { web: { title, - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsOverview.md') as string, componentUrl, }, }; diff --git a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx index c3e0a6534abda3..8ce1e823b4a0d9 100644 --- a/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx +++ b/apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx @@ -33,7 +33,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { { sectionName: 'Usage: Font icons', editUrl: `${baseUrl}/web/FabricIconsUsage.md`, - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsUsage.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsUsage.md') as string, jumpLinks: [ { text: enDash + ' Fluent UI React', url: 'fluent-ui-react' }, { text: enDash + ' Fabric Core', url: 'fabric-core' }, @@ -44,7 +45,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { { sectionName: 'Usage: SVG icons', editUrl: `${baseUrl}/web/FabricIconsSvgUsage.md`, - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/FabricIconsPage/docs/web/FabricIconsSvgUsage.md') as string, }, { diff --git a/apps/public-docsite/src/pages/Styles/MotionPage/MotionPage.doc.ts b/apps/public-docsite/src/pages/Styles/MotionPage/MotionPage.doc.ts index 06ad8f6ba2d5f2..6d55705c106954 100644 --- a/apps/public-docsite/src/pages/Styles/MotionPage/MotionPage.doc.ts +++ b/apps/public-docsite/src/pages/Styles/MotionPage/MotionPage.doc.ts @@ -7,7 +7,8 @@ const componentUrl = export const MotionPageProps: TFabricPlatformPageProps = { web: { title, - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/MotionPage/docs/web/MotionOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/MotionPage/docs/web/MotionOverview.md') as string, componentUrl, }, }; diff --git a/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.base.tsx b/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.base.tsx index e157965bcbbc1b..e142792e742706 100644 --- a/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.base.tsx +++ b/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.base.tsx @@ -69,7 +69,8 @@ function _otherSections(platform: Platforms): IPageSectionProps[] { { sectionName: 'Implementation', editUrl: baseUrl + 'web/ThemeSlotsImplementation.md', - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/ThemeSlotsPage/docs/web/ThemeSlotsImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/ThemeSlotsPage/docs/web/ThemeSlotsImplementation.md') as string, }, ]; diff --git a/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.doc.ts b/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.doc.ts index 50aec703fdeed8..9f7bc828d9b705 100644 --- a/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.doc.ts +++ b/apps/public-docsite/src/pages/Styles/ThemeSlotsPage/ThemeSlotsPage.doc.ts @@ -5,6 +5,7 @@ const componentUrl = export const ThemeSlotsPageProps: TFabricPlatformPageProps = { web: { componentUrl, - overview: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/ThemeSlotsPage/docs/web/ThemeSlotsOverview.md') as string, + overview: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/ThemeSlotsPage/docs/web/ThemeSlotsOverview.md') as string, }, }; diff --git a/apps/public-docsite/src/pages/Styles/TypographyPage/TypographyPage.tsx b/apps/public-docsite/src/pages/Styles/TypographyPage/TypographyPage.tsx index f9e391ff123fec..898d71876dcc8f 100644 --- a/apps/public-docsite/src/pages/Styles/TypographyPage/TypographyPage.tsx +++ b/apps/public-docsite/src/pages/Styles/TypographyPage/TypographyPage.tsx @@ -65,12 +65,14 @@ function _otherSections(platform: Platforms): IPageSectionProps[] | u { sectionName: 'Implementation', editUrl: `${baseUrl}/web/TypographyImplementation.md`, - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyImplementation.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyImplementation.md') as string, }, { sectionName: 'Customization', editUrl: `${baseUrl}/web/TypographyCustomization.md`, - content: require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md') as string, + content: + require('!raw-loader?esModule=false!@fluentui/public-docsite/src/pages/Styles/TypographyPage/docs/web/TypographyCustomization.md') as string, }, ]; } diff --git a/apps/stress-test/scripts/commands/run.ts b/apps/stress-test/scripts/commands/run.ts index 2fc25713909b2c..98bfb69436fb0e 100644 --- a/apps/stress-test/scripts/commands/run.ts +++ b/apps/stress-test/scripts/commands/run.ts @@ -35,7 +35,7 @@ const api: yargs.CommandModule = { buildDefaultFixtures(); const { $0, _, ...rest } = argv; - const args = (rest as unknown) as CLIRunOptions; + const args = rest as unknown as CLIRunOptions; await handler(args); if (argv.processResults) { diff --git a/apps/stress-test/src/shared/css/RandomSelector.ts b/apps/stress-test/src/shared/css/RandomSelector.ts index 1a3e0b92665fd6..89b084d8e68f3c 100644 --- a/apps/stress-test/src/shared/css/RandomSelector.ts +++ b/apps/stress-test/src/shared/css/RandomSelector.ts @@ -32,7 +32,7 @@ export class RandomSelector { constructor({ seed, selectorTypes, tags, classNames, attributeNames, attributeValues }: SelectorParams = {}) { this.rando = random(seed); - this.selectorTypes = selectorTypes ?? ((defaultSelectorTypes as unknown) as SelectorType[]); + this.selectorTypes = selectorTypes ?? (defaultSelectorTypes as unknown as SelectorType[]); this.tags = tags ?? []; this.classNames = classNames ?? []; this.attributeNames = attributeNames ?? []; diff --git a/apps/stress-test/src/shared/vanilla/VanillaSelectorTree.ts b/apps/stress-test/src/shared/vanilla/VanillaSelectorTree.ts index 34122b11e6b2af..af1367f190ba63 100644 --- a/apps/stress-test/src/shared/vanilla/VanillaSelectorTree.ts +++ b/apps/stress-test/src/shared/vanilla/VanillaSelectorTree.ts @@ -3,24 +3,22 @@ import { SelectorTreeNode } from '../tree/types'; import { DOMSelectorTreeComponentRenderer } from './types'; import { renderVanillaTree } from './VanillaTree'; -const itemRenderer = (componentRenderer: DOMSelectorTreeComponentRenderer) => ( - node: SelectorTreeNode, - depth: number, - index: number, -): HTMLElement => { - const { value } = node; +const itemRenderer = + (componentRenderer: DOMSelectorTreeComponentRenderer) => + (node: SelectorTreeNode, depth: number, index: number): HTMLElement => { + const { value } = node; - const div = document.createElement('div'); - div.classList.add(...value.classNames.map(cn => cn.substring(1))); - value.attributes.forEach(attr => { - div.setAttribute(attr.key, attr.value ?? ''); - }); + const div = document.createElement('div'); + div.classList.add(...value.classNames.map(cn => cn.substring(1))); + value.attributes.forEach(attr => { + div.setAttribute(attr.key, attr.value ?? ''); + }); - div.style.marginLeft = `${depth * 10}px`; - div.appendChild(componentRenderer(node, depth, index)); + div.style.marginLeft = `${depth * 10}px`; + div.appendChild(componentRenderer(node, depth, index)); - return div; -}; + return div; + }; export const renderVanillaSelectorTree = ( tree: SelectorTreeNode, diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js index 32dfd46958c75d..4d58f82e03742c 100644 --- a/apps/vr-tests-react-components/.storybook/preview.js +++ b/apps/vr-tests-react-components/.storybook/preview.js @@ -52,15 +52,16 @@ setAddon({ }); } if (config.includeHighContrast) { - this.add(storyName + ' - High Contrast', ( - /** @type {import('../src/utilities/types').StoryContext} */ context, - ) => { - return ( - - {storyFn(context)} - - ); - }); + this.add( + storyName + ' - High Contrast', + (/** @type {import('../src/utilities/types').StoryContext} */ context) => { + return ( + + {storyFn(context)} + + ); + }, + ); } return this; diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 6bd674763f1cb4..b249303b49cfa0 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -45,30 +45,29 @@ const names = [ const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; -const AvatarGroupList: React.FC< - AvatarGroupProps & { overflowIndicator?: AvatarGroupPopoverProps['indicator'] } -> = props => { - const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout }); +const AvatarGroupList: React.FC = + props => { + const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout }); - return ( -

- {sizes.map(size => ( - - {inlineItems.map(name => ( - - ))} - {overflowItems && ( - - {overflowItems.map(name => ( - - ))} - - )} - - ))} -
- ); -}; + return ( +
+ {sizes.map(size => ( + + {inlineItems.map(name => ( + + ))} + {overflowItems && ( + + {overflowItems.map(name => ( + + ))} + + )} + + ))} +
+ ); + }; // Non-interactive stories storiesOf('AvatarGroup Converged', module) diff --git a/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx b/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx index b3c53740c67869..34ee61c6c88f23 100644 --- a/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx +++ b/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx @@ -18,26 +18,29 @@ export const TestWrapperDecoratorTall: DecoratorFunction ); -export const TestWrapperDecoratorTallFixedWidth: DecoratorFunction = story => ( -
-
- {story()} +export const TestWrapperDecoratorTallFixedWidth: DecoratorFunction = + story => ( +
+
+ {story()} +
-
-); + ); -export const TestWrapperDecoratorFixedWidth: DecoratorFunction = story => ( -
-
- {story()} +export const TestWrapperDecoratorFixedWidth: DecoratorFunction = + story => ( +
+
+ {story()} +
-
-); + ); -export const TestWrapperDecoratorFullWidth: DecoratorFunction = story => ( -
-
- {story()} +export const TestWrapperDecoratorFullWidth: DecoratorFunction = + story => ( +
+
+ {story()} +
-
-); + ); diff --git a/packages/a11y-testing/src/definitions/MenuButton/menuButtonBehaviorDefinition.ts b/packages/a11y-testing/src/definitions/MenuButton/menuButtonBehaviorDefinition.ts index 53421a96247e27..ca5cc12f6e8861 100644 --- a/packages/a11y-testing/src/definitions/MenuButton/menuButtonBehaviorDefinition.ts +++ b/packages/a11y-testing/src/definitions/MenuButton/menuButtonBehaviorDefinition.ts @@ -34,15 +34,12 @@ const menuButtonBehaviorDefinitionTriggerSlot: Rule[] = [ BehaviorRule.slot('trigger').forProps({ contextMenu: true, open: true }).doesNotHaveAttribute('aria-expanded'), ]; -export const menuButtonBehaviorDefinitionTriggerSlotTabbable = menuButtonBehaviorDefinitionTriggerSlot.concat( - triggerTabbable, -); -export const menuButtonBehaviorDefinitionTriggerSlotNotTabbable = menuButtonBehaviorDefinitionTriggerSlot.concat( - triggerNotTabbable, -); -export const menuButtonBehaviorDefinitionTriggerWithTabIndex = menuButtonBehaviorDefinitionTriggerSlot.concat( - triggerWithTabIndex, -); +export const menuButtonBehaviorDefinitionTriggerSlotTabbable = + menuButtonBehaviorDefinitionTriggerSlot.concat(triggerTabbable); +export const menuButtonBehaviorDefinitionTriggerSlotNotTabbable = + menuButtonBehaviorDefinitionTriggerSlot.concat(triggerNotTabbable); +export const menuButtonBehaviorDefinitionTriggerWithTabIndex = + menuButtonBehaviorDefinitionTriggerSlot.concat(triggerWithTabIndex); export const menuButtonBehaviorDefinitionMenuSlot: Rule[] = [ BehaviorRule.slot('menu') diff --git a/packages/api-docs/src/pageJson.ts b/packages/api-docs/src/pageJson.ts index bc453999748115..8f2d00d214901b 100644 --- a/packages/api-docs/src/pageJson.ts +++ b/packages/api-docs/src/pageJson.ts @@ -70,7 +70,7 @@ function initPageDataForItem( fallbackGroup?: string, ): void { if ( - supportedApiItems.includes((apiItem.kind as unknown) as ApiItemKind) && + supportedApiItems.includes(apiItem.kind as unknown as ApiItemKind) && apiItem instanceof ApiDocumentedItem && apiItem.tsdocComment ) { diff --git a/packages/api-docs/src/tableJson.ts b/packages/api-docs/src/tableJson.ts index 6082e13e7f172e..10a14fb33c04b9 100644 --- a/packages/api-docs/src/tableJson.ts +++ b/packages/api-docs/src/tableJson.ts @@ -15,7 +15,7 @@ import { ICollectedData } from './types-private'; import { createTableRowJson, createEnumTableRowJson } from './tableRowJson'; export function createTableJson(collectedData: ICollectedData, apiItem: ApiItem): ITableJson | undefined { - switch ((apiItem.kind as unknown) as ApiItemKind) { + switch (apiItem.kind as unknown as ApiItemKind) { case ApiItemKind.Interface: { return createInterfacePageJson(collectedData, apiItem as ApiInterface); } diff --git a/packages/api-docs/src/tableRowJson.ts b/packages/api-docs/src/tableRowJson.ts index 5ab3ce5228b85a..14312686d50cb2 100644 --- a/packages/api-docs/src/tableRowJson.ts +++ b/packages/api-docs/src/tableRowJson.ts @@ -23,7 +23,7 @@ import { export function createTableRowJson(collectedData: ICollectedData, apiItem: ApiItem): ITableRowJson | undefined { let tableRowJson: ITableRowJson | undefined; - const apiKind = (apiItem.kind as unknown) as ApiItemKind; + const apiKind = apiItem.kind as unknown as ApiItemKind; switch (apiKind) { case ApiItemKind.Property: @@ -51,7 +51,7 @@ export function createTableRowJson(collectedData: ICollectedData, apiItem: ApiIt apiMethod.excerpt.tokenRange, ); - if (((apiMethod.kind as unknown) as ApiItemKind) === ApiItemKind.Constructor) { + if ((apiMethod.kind as unknown as ApiItemKind) === ApiItemKind.Constructor) { // The constructor is similar to a method, but we have to manually add the name. tableRowJson.name = 'constructor'; } diff --git a/packages/codemods/src/helpers/maybe.ts b/packages/codemods/src/helpers/maybe.ts index 7dd5a83bd601e5..dbb1f95b05fe4b 100644 --- a/packages/codemods/src/helpers/maybe.ts +++ b/packages/codemods/src/helpers/maybe.ts @@ -66,7 +66,7 @@ export const Something = (value: NonNullable): Something => { }; export const MaybeDictionary = (dictionary: { [key: string]: T }): { [key: string]: Maybe } => { - return new Proxy<{ [key: string]: Maybe }>((dictionary as unknown) as { [key: string]: Maybe }, { + return new Proxy<{ [key: string]: Maybe }>(dictionary as unknown as { [key: string]: Maybe }, { get: (target: { [key: string]: Maybe | T }, name: string): Maybe => { const value = target[name]; if (!value || !('__isMaybe' in value)) { diff --git a/packages/codemods/src/helpers/result.ts b/packages/codemods/src/helpers/result.ts index 9e48cf2378e207..d2b30a5c6075a4 100644 --- a/packages/codemods/src/helpers/result.ts +++ b/packages/codemods/src/helpers/result.ts @@ -52,7 +52,7 @@ class ResultInternal implements Chainable { if (this.value && this.value instanceof ResultInternal) { return this.value as Flattened>; } - return (this as unknown) as Flattened>; + return this as unknown as Flattened>; } /** diff --git a/packages/codemods/src/helpers/tests/maybe.test.ts b/packages/codemods/src/helpers/tests/maybe.test.ts index f6c02f2bff0b62..76814cea23c7ca 100644 --- a/packages/codemods/src/helpers/tests/maybe.test.ts +++ b/packages/codemods/src/helpers/tests/maybe.test.ts @@ -67,7 +67,7 @@ describe('Maybe', () => { it('wraps undefined in Maybe correctly', () => { expect( Maybe('foo') - .then(v => (undefined as unknown) as string) + .then(v => undefined as unknown as string) .orElse('defaultValue'), ).toEqual('defaultValue'); }); diff --git a/packages/eslint-plugin/src/rules/ban-imports.js b/packages/eslint-plugin/src/rules/ban-imports.js index 3c2b152fce9d78..285fb63c21ee10 100644 --- a/packages/eslint-plugin/src/rules/ban-imports.js +++ b/packages/eslint-plugin/src/rules/ban-imports.js @@ -154,10 +154,12 @@ module.exports = createRule({ return; } - const specifiers = /** @type {ImportSpecifier[]} */ (imprt.specifiers.filter( - // Filter out default imports and namespace (star) imports - spec => spec.type === AST_NODE_TYPES.ImportSpecifier, - )) + const specifiers = /** @type {ImportSpecifier[]} */ ( + imprt.specifiers.filter( + // Filter out default imports and namespace (star) imports + spec => spec.type === AST_NODE_TYPES.ImportSpecifier, + ) + ) // spec.imported is the original name: `foo` in `import { foo as bar } from 'whatever'` .map(spec => spec.imported); diff --git a/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts index 7a9ab95437f12d..1028aaaf9adf8e 100644 --- a/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts +++ b/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts @@ -9,16 +9,17 @@ import { Accessibility } from '../../types'; * Adds attribute 'aria-selected=true' based on the property 'selected'. * Adds role='gridcell'. */ -export const datepickerCalendarCellButtonBehavior: Accessibility = props => ({ - attributes: { - root: { - role: 'gridcell', - ...(props.selected && { 'aria-selected': true }), - ...(props.disabled && { 'aria-disabled': true }), - ...(props.today && { 'aria-current': 'date' }), +export const datepickerCalendarCellButtonBehavior: Accessibility = + props => ({ + attributes: { + root: { + role: 'gridcell', + ...(props.selected && { 'aria-selected': true }), + ...(props.disabled && { 'aria-disabled': true }), + ...(props.today && { 'aria-current': 'date' }), + }, }, - }, -}); + }); export type DatepickerCalendarCellButtonBehaviorProps = { /** Cell can be selected. */ diff --git a/packages/fluentui/accessibility/test/behaviors/splitButtonBehavior-test.tsx b/packages/fluentui/accessibility/test/behaviors/splitButtonBehavior-test.tsx index ffa46ca08bb2f2..12ac7ae4dfb8ea 100644 --- a/packages/fluentui/accessibility/test/behaviors/splitButtonBehavior-test.tsx +++ b/packages/fluentui/accessibility/test/behaviors/splitButtonBehavior-test.tsx @@ -27,16 +27,18 @@ describe('SplitButtonBehavior.ts', () => { { keyCode: keyboardKey.Tab, shiftKey: false }, { keyCode: keyboardKey.Tab, shiftKey: true }, ]; - const keysFromBehavior = splitButtonBehavior(property)['childBehaviors']['menuButton'](property).keyActions.popup - .closeAndFocusTrigger.keyCombinations; + const keysFromBehavior = + splitButtonBehavior(property)['childBehaviors']['menuButton'](property).keyActions.popup.closeAndFocusTrigger + .keyCombinations; verifyKeys(supportedKeys, keysFromBehavior); }); test('open menu with alt + arrow down ', () => { const property = {}; const supportedKeys = [{ altKey: true, keyCode: keyboardKey.ArrowDown }]; - const keysFromBehavior = splitButtonBehavior(property)['childBehaviors']['menuButton'](property).keyActions.root - .openAndFocusFirst.keyCombinations; + const keysFromBehavior = + splitButtonBehavior(property)['childBehaviors']['menuButton'](property).keyActions.root.openAndFocusFirst + .keyCombinations; verifyKeys(supportedKeys, keysFromBehavior); }); }); diff --git a/packages/fluentui/accessibility/test/behaviors/testDefinitions.ts b/packages/fluentui/accessibility/test/behaviors/testDefinitions.ts index ae6cf858eeae82..8213e526248512 100644 --- a/packages/fluentui/accessibility/test/behaviors/testDefinitions.ts +++ b/packages/fluentui/accessibility/test/behaviors/testDefinitions.ts @@ -63,15 +63,11 @@ definitions.push({ // Example: Adds attribute 'aria-expanded=true' based on the property 'menuOpen' if the component has 'menu' property to 'anchor' slot. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d]+)' based on the property '([\w-]+)' if the component has '([\w-]+)' property to '([\w-]+)' slot\./g, + regexp: + /Adds attribute '([\w-]+)=([\w\d]+)' based on the property '([\w-]+)' if the component has '([\w-]+)' property to '([\w-]+)' slot\./g, testMethod: (parameters: TestMethod) => { - const [ - attributeToBeAdded, - attributeExpectedValue, - propertyBasedOn, - propertyDependingOn, - elementWhereToBeAdded, - ] = parameters.props; + const [attributeToBeAdded, attributeExpectedValue, propertyBasedOn, propertyDependingOn, elementWhereToBeAdded] = + parameters.props; const property = {}; property[propertyDependingOn] = [{}, {}]; property[propertyBasedOn] = true; @@ -81,17 +77,15 @@ definitions.push({ // when property depending on is undefined, then there should not be 'aria' attribute added const propertyDependingOnValue = undefined; property[propertyDependingOn] = propertyDependingOnValue; - const expectedResultDependingPropertyUndefined = parameters.behavior(property).attributes[elementWhereToBeAdded][ - attributeToBeAdded - ]; + const expectedResultDependingPropertyUndefined = + parameters.behavior(property).attributes[elementWhereToBeAdded][attributeToBeAdded]; expect(expectedResultDependingPropertyUndefined).toEqual(propertyDependingOnValue); // when property based on is undefined, then there should 'aria' attribute get false value property[propertyDependingOn] = [{}, {}]; property[propertyBasedOn] = undefined; - const expectedResultBasedOnPropertyUndefined = parameters.behavior(property).attributes[elementWhereToBeAdded][ - attributeToBeAdded - ]; + const expectedResultBasedOnPropertyUndefined = + parameters.behavior(property).attributes[elementWhereToBeAdded][attributeToBeAdded]; expect(expectedResultBasedOnPropertyUndefined).toEqual(false); }, }); @@ -114,24 +108,18 @@ definitions.push({ // Example: Adds attribute 'aria-selected=true' to 'anchor' slot based on the property 'active'. This can be overriden by directly providing 'aria-selected' property to the component. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d]+)' to '([\w-]+)' slot based on the property '([\w-]+)'\. This can be overriden by providing '[\w-]+' property directly to the component\./g, + regexp: + /Adds attribute '([\w-]+)=([\w\d]+)' to '([\w-]+)' slot based on the property '([\w-]+)'\. This can be overriden by providing '[\w-]+' property directly to the component\./g, testMethod: (parameters: TestMethod) => { - const [ - attributeToBeAdded, - valueOfAttributeToBeAdded, - component, - propertyBasedOn, - overridingProperty, - ] = parameters.props; + const [attributeToBeAdded, valueOfAttributeToBeAdded, component, propertyBasedOn, overridingProperty] = + parameters.props; const propertyWithOverride = { [overridingProperty]: valueOfAttributeToBeAdded }; const propertyWithoutOverride = { [propertyBasedOn]: valueOfAttributeToBeAdded }; - const expectedResultPropOveride = parameters.behavior(propertyWithOverride).attributes[component][ - attributeToBeAdded - ]; - const expectedResultPropBasedOn = parameters.behavior(propertyWithoutOverride).attributes[component][ - attributeToBeAdded - ]; + const expectedResultPropOveride = + parameters.behavior(propertyWithOverride).attributes[component][attributeToBeAdded]; + const expectedResultPropBasedOn = + parameters.behavior(propertyWithoutOverride).attributes[component][attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultPropOveride)).toEqual( testHelper.convertToMatchingTypeIfApplicable(valueOfAttributeToBeAdded), @@ -144,14 +132,14 @@ definitions.push({ // Example: Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d]+)' based on the property '([\w-]+)'\. This can be overriden by providing '[\w-]+' property directly to the component\./g, + regexp: + /Adds attribute '([\w-]+)=([\w\d]+)' based on the property '([\w-]+)'\. This can be overriden by providing '[\w-]+' property directly to the component\./g, testMethod: (parameters: TestMethod) => { const [attributeToBeAdded, valueOfAttributeToBeAdded, overridingProperty] = parameters.props; const propertyWithOverride = {}; propertyWithOverride[overridingProperty] = valueOfAttributeToBeAdded; - const expectedResultAttributeDefined = parameters.behavior(propertyWithOverride).attributes.root[ - attributeToBeAdded - ]; + const expectedResultAttributeDefined = + parameters.behavior(propertyWithOverride).attributes.root[attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultAttributeDefined)).toEqual( testHelper.convertToMatchingTypeIfApplicable(valueOfAttributeToBeAdded), ); @@ -170,17 +158,15 @@ function testMethodConditionallyAddAttribute( ) { const propertyWithAriaSelected = {}; propertyWithAriaSelected[propertyDependsOn] = valueOfPropertyOtherwise; - const expectedResultAttributeNotDefined = parameters.behavior(propertyWithAriaSelected).attributes[component][ - attributeToBeAdded - ]; + const expectedResultAttributeNotDefined = + parameters.behavior(propertyWithAriaSelected).attributes[component][attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultAttributeNotDefined)).toEqual( testHelper.convertToMatchingTypeIfApplicable(valueOfAttributeToBeAddedOtherwise), ); propertyWithAriaSelected[propertyDependsOn] = valueOfProperty; - const expectedResultAttributeDefined = parameters.behavior(propertyWithAriaSelected).attributes[component][ - attributeToBeAdded - ]; + const expectedResultAttributeDefined = + parameters.behavior(propertyWithAriaSelected).attributes[component][attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultAttributeDefined)).toEqual( testHelper.convertToMatchingTypeIfApplicable(valueOfAttributeToBeAddedIfTrue), ); @@ -188,7 +174,8 @@ function testMethodConditionallyAddAttribute( // Example: Adds attribute 'aria-disabled=true' to 'trigger' slot if 'disabled' property is true. Does not set the attribute otherwise. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d-]+)' to '([\w-]+)' slot if '([\w-]+)' property is true\. Does not set the attribute otherwise\./g, + regexp: + /Adds attribute '([\w-]+)=([\w\d-]+)' to '([\w-]+)' slot if '([\w-]+)' property is true\. Does not set the attribute otherwise\./g, testMethod: (parameters: TestMethod) => { const [attributeToBeAdded, valueOfAttributeToBeAdded, component, propertyDependsOn] = parameters.props; @@ -207,7 +194,8 @@ definitions.push({ // Example: Adds attribute 'aria-disabled=true' to 'trigger' slot if 'disabled' property is false or undefined. Does not set the attribute if true. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d-]+)' to '([\w-]+)' slot if '([\w-]+)' property is false or undefined\. Does not set the attribute if true\./g, + regexp: + /Adds attribute '([\w-]+)=([\w\d-]+)' to '([\w-]+)' slot if '([\w-]+)' property is false or undefined\. Does not set the attribute if true\./g, testMethod: (parameters: TestMethod) => { const [attributeToBeAdded, valueOfAttributeToBeAdded, component, propertyDependsOn] = parameters.props; @@ -226,7 +214,8 @@ definitions.push({ // Example: Adds attribute 'aria-disabled=true' to 'trigger' slot if 'disabled' property is true. Sets the attribute to 'false' otherwise. definitions.push({ - regexp: /Adds attribute '([\w-]+)=([\w\d]+)' to '([\w-]+)' slot if '([\w-]+)' property is true\. Sets the attribute to '([\w\d-]+)' otherwise\./g, + regexp: + /Adds attribute '([\w-]+)=([\w\d]+)' to '([\w-]+)' slot if '([\w-]+)' property is true\. Sets the attribute to '([\w\d-]+)' otherwise\./g, testMethod: (parameters: TestMethod) => { const [ attributeToBeAdded, @@ -281,9 +270,8 @@ definitions.push({ const [attributeToBeAdded, valueOfAttributeToBeAdded, slot, propertyDependsOn] = parameters.props; const propertyDependsOnUndefined = {}; - const expectedResultAttributeNotDefined = parameters.behavior(propertyDependsOnUndefined).attributes[slot][ - attributeToBeAdded - ]; + const expectedResultAttributeNotDefined = + parameters.behavior(propertyDependsOnUndefined).attributes[slot][attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultAttributeNotDefined)).toEqual( testHelper.convertToMatchingTypeIfApplicable(valueOfAttributeToBeAdded), ); @@ -291,9 +279,8 @@ definitions.push({ const propertyDependsOnFalse = { [propertyDependsOn]: false, }; - const expectedResultAttributeDefinedFalse = parameters.behavior(propertyDependsOnFalse).attributes[slot][ - attributeToBeAdded - ]; + const expectedResultAttributeDefinedFalse = + parameters.behavior(propertyDependsOnFalse).attributes[slot][attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultAttributeDefinedFalse)).toEqual( testHelper.convertToMatchingTypeIfApplicable(valueOfAttributeToBeAdded), ); @@ -301,9 +288,8 @@ definitions.push({ const propertyDependsOnExists = { [propertyDependsOn]: true, }; - const expectedResultAttributeDefined = parameters.behavior(propertyDependsOnExists).attributes[slot][ - attributeToBeAdded - ]; + const expectedResultAttributeDefined = + parameters.behavior(propertyDependsOnExists).attributes[slot][attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultAttributeDefined)).toEqual(undefined); }, }); @@ -320,9 +306,8 @@ definitions.push({ ); const dependingOnProperty = { [propertyDependingOn]: 'mockText' }; - const expectedResultForPropertyDependingOn = parameters.behavior(dependingOnProperty).attributes.root[ - attributeToBeAdded - ]; + const expectedResultForPropertyDependingOn = + parameters.behavior(dependingOnProperty).attributes.root[attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(expectedResultForPropertyDependingOn)).toBe( testHelper.convertToMatchingTypeIfApplicable(undefined), ); @@ -331,14 +316,11 @@ definitions.push({ // Example: Adds attribute 'aria-expanded=true' based on the property 'open' if the component has 'hasSubtree' property false or undefined. Does not set anything if true. definitions.push({ - regexp: /Adds attribute '([\w-]+)=(\w+)' based on the property '(\w+)' if the component has '(\w+)' property false or undefined. Does not set anything if true\./g, + regexp: + /Adds attribute '([\w-]+)=(\w+)' based on the property '(\w+)' if the component has '(\w+)' property false or undefined. Does not set anything if true\./g, testMethod: (parameters: TestMethod) => { - const [ - attributeToBeAdded, - attributeExpectedValue, - propertyDependingOnFirst, - propertyDependingOnSecond, - ] = parameters.props; + const [attributeToBeAdded, attributeExpectedValue, propertyDependingOnFirst, propertyDependingOnSecond] = + parameters.props; const property = {}; @@ -357,9 +339,8 @@ definitions.push({ const propertyFirstPropUndefined = {}; propertyFirstPropUndefined[propertyDependingOnSecond] = true; - const actualResultFirstPropertyNegateUndefined = parameters.behavior(propertyFirstPropUndefined).attributes.root[ - attributeToBeAdded - ]; + const actualResultFirstPropertyNegateUndefined = + parameters.behavior(propertyFirstPropUndefined).attributes.root[attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(actualResultFirstPropertyNegateUndefined)).toEqual(undefined); }, }); @@ -368,12 +349,8 @@ definitions.push({ definitions.push({ regexp: /Adds attribute '([\w-]+)=(\w+)' based on the property '(\w+)' if the component has '(\w+)' property\./g, testMethod: (parameters: TestMethod) => { - const [ - attributeToBeAdded, - attributeExpectedValue, - propertyDependingOnFirst, - propertyDependingOnSecond, - ] = parameters.props; + const [attributeToBeAdded, attributeExpectedValue, propertyDependingOnFirst, propertyDependingOnSecond] = + parameters.props; const property = {}; @@ -386,13 +363,11 @@ definitions.push({ if (typeof testHelper.convertToMatchingTypeIfApplicable(attributeExpectedValue) === 'boolean') { const propertyFirstPropNegate = {}; - propertyFirstPropNegate[propertyDependingOnFirst] = !testHelper.convertToMatchingTypeIfApplicable( - attributeExpectedValue, - ); + propertyFirstPropNegate[propertyDependingOnFirst] = + !testHelper.convertToMatchingTypeIfApplicable(attributeExpectedValue); propertyFirstPropNegate[propertyDependingOnSecond] = true; - const actualResultFirstPropertyNegate = parameters.behavior(propertyFirstPropNegate).attributes.root[ - attributeToBeAdded - ]; + const actualResultFirstPropertyNegate = + parameters.behavior(propertyFirstPropNegate).attributes.root[attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(actualResultFirstPropertyNegate)).toEqual( !testHelper.convertToMatchingTypeIfApplicable(attributeExpectedValue), ); @@ -401,9 +376,8 @@ definitions.push({ const propertyFirstPropUndefined = {}; propertyFirstPropUndefined[propertyDependingOnFirst] = true; propertyFirstPropUndefined[propertyDependingOnSecond] = undefined; - const actualResultFirstPropertyNegateUndefined = parameters.behavior(propertyFirstPropUndefined).attributes.root[ - attributeToBeAdded - ]; + const actualResultFirstPropertyNegateUndefined = + parameters.behavior(propertyFirstPropUndefined).attributes.root[attributeToBeAdded]; expect(testHelper.convertToMatchingTypeIfApplicable(actualResultFirstPropertyNegateUndefined)).toEqual(undefined); }, }); @@ -572,10 +546,10 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, firstKey, secondKey, elementToPerformAction] = [...parameters.props]; const property = {}; - const expectedFirstKeyNumber = parameters.behavior(property).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; - const expectedSecondKeyNumber = parameters.behavior(property).keyActions[elementToPerformAction][action] - .keyCombinations[1].keyCode; + const expectedFirstKeyNumber = + parameters.behavior(property).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; + const expectedSecondKeyNumber = + parameters.behavior(property).keyActions[elementToPerformAction][action].keyCombinations[1].keyCode; expect(expectedFirstKeyNumber).toBe(keysAndAliases[firstKey]); expect(expectedSecondKeyNumber).toBe(keysAndAliases[secondKey]); }, @@ -587,8 +561,8 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const property = {}; - const expectedKeyNumber = parameters.behavior(property).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumber = + parameters.behavior(property).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumber).toBe(keysAndAliases[key]); }, }); @@ -601,8 +575,8 @@ definitions.push({ const propsInOpenState = {}; propsInOpenState[propertyDependingOn] = true; - const expectedResultOpenState = parameters.behavior(propsInOpenState).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedResultOpenState = + parameters.behavior(propsInOpenState).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedResultOpenState).toBe(keysAndAliases[key]); const propsInCloseState = {}; @@ -631,8 +605,8 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const property = {}; - const expectedKeyNumber = parameters.behavior(property).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumber = + parameters.behavior(property).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumber).toBe(keysAndAliases[key]); }, }); @@ -643,8 +617,8 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const propertyVertical = { vertical: true }; - const expectedKeyNumberVertical = parameters.behavior(propertyVertical).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumberVertical = + parameters.behavior(propertyVertical).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumberVertical).toBe(keysAndAliases[key]); }, }); @@ -655,8 +629,8 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const propertyHorizontal = { horizontal: true }; - const expectedKeyNumber = parameters.behavior(propertyHorizontal).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumber = + parameters.behavior(propertyHorizontal).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumber).toBe(keysAndAliases[key]); }, }); @@ -667,8 +641,8 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const propertyHorizontal = { horizontal: false }; - const expectedKeyNumberVertical = parameters.behavior(propertyHorizontal).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumberVertical = + parameters.behavior(propertyHorizontal).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumberVertical).toBe(keysAndAliases[key]); }, }); @@ -685,9 +659,8 @@ definitions.push({ siblings: [], hasSubtree: true, }; - const expectedKeyNumberVertical = parameters.behavior(propertyOpenedSubtree).keyActions[elementToPerformAction][ - action - ].keyCombinations[0].keyCode; + const expectedKeyNumberVertical = + parameters.behavior(propertyOpenedSubtree).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumberVertical).toBe(keysAndAliases[key]); }, }); @@ -701,8 +674,8 @@ definitions.push({ hasItems: false, hasSubtree: false, }; - const expectedKeyNumberVertical = parameters.behavior(propertyNoSubtree).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumberVertical = + parameters.behavior(propertyNoSubtree).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumberVertical).toBe(keysAndAliases[key]); }, }); @@ -713,9 +686,8 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const propertyClosedSubtree = { open: false, expanded: false, hasSubtree: true }; - const expectedKeyNumberVertical = parameters.behavior(propertyClosedSubtree).keyActions[elementToPerformAction][ - action - ].keyCombinations[0].keyCode; + const expectedKeyNumberVertical = + parameters.behavior(propertyClosedSubtree).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumberVertical).toBe(keysAndAliases[key]); }, }); @@ -726,38 +698,36 @@ definitions.push({ testMethod: (parameters: TestMethod) => { const [action, key, elementToPerformAction] = [...parameters.props]; const propertySubmenuOpened = { menu: { items: [] }, hasMenu: true, menuOpen: true }; - const expectedKeyNumber = parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; + const expectedKeyNumber = + parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; expect(expectedKeyNumber).toBe(keysAndAliases[key]); // when menuOpen == "false" propertySubmenuOpened.menuOpen = false; - const expectedKeyCombinations = parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][ - action - ].keyCombinations; + const expectedKeyCombinations = + parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action].keyCombinations; expect(expectedKeyCombinations).toBe(null); }, }); // Triggers 'doNotNavigateNextParentItem' action with 'ArrowLeft' or 'ArrowRight' on 'wrapper', when toolbar button has submenu and it is opened. definitions.push({ - regexp: /Triggers '(\w+)' action with '(\w+)' or '(\w+)' on '([\w-]+)', when toolbar button has submenu and it is opened\./g, + regexp: + /Triggers '(\w+)' action with '(\w+)' or '(\w+)' on '([\w-]+)', when toolbar button has submenu and it is opened\./g, testMethod: (parameters: TestMethod) => { const [action, firstKey, secondKey, elementToPerformAction] = [...parameters.props]; const propertySubmenuOpened = { menu: { items: [] }, hasMenu: true, menuOpen: true }; - const expectedFirstKeyNumber = parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action] - .keyCombinations[0].keyCode; - const expectedSecondKeyNumber = parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][ - action - ].keyCombinations[1].keyCode; + const expectedFirstKeyNumber = + parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action].keyCombinations[0].keyCode; + const expectedSecondKeyNumber = + parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action].keyCombinations[1].keyCode; expect(expectedFirstKeyNumber).toBe(keysAndAliases[firstKey]); expect(expectedSecondKeyNumber).toBe(keysAndAliases[secondKey]); // when menuOpen == "false" propertySubmenuOpened.menuOpen = false; - const expectedKeyCombinations = parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][ - action - ].keyCombinations; + const expectedKeyCombinations = + parameters.behavior(propertySubmenuOpened).keyActions[elementToPerformAction][action].keyCombinations; expect(expectedKeyCombinations).toBe(null); }, }); diff --git a/packages/fluentui/code-sandbox/src/createCallbackLogFormatter.ts b/packages/fluentui/code-sandbox/src/createCallbackLogFormatter.ts index 85581a2b52eaab..87a7f034c0ce1b 100644 --- a/packages/fluentui/code-sandbox/src/createCallbackLogFormatter.ts +++ b/packages/fluentui/code-sandbox/src/createCallbackLogFormatter.ts @@ -4,18 +4,16 @@ import * as React from 'react'; /** * @param props - A set of props that should be logged under `data` param. */ -export const createCallbackLogFormatter = (props: string[] = []) => ( - name: string, - e: React.SyntheticEvent, - data: Object, -) => { - const pickedProps = props.reduce((acc, propName) => { - acc[propName] = data[propName]; - return acc; - }, {}); +export const createCallbackLogFormatter = + (props: string[] = []) => + (name: string, e: React.SyntheticEvent, data: Object) => { + const pickedProps = props.reduce((acc, propName) => { + acc[propName] = data[propName]; + return acc; + }, {}); - return [ - `/*[${new Date().toLocaleTimeString()}]*/`, - `${name} (e: { "type": "${e ? e.type : 'NA'}" }, data: ${formatCode(JSON.stringify(pickedProps), 'json')})`, - ].join(' '); -}; + return [ + `/*[${new Date().toLocaleTimeString()}]*/`, + `${name} (e: { "type": "${e ? e.type : 'NA'}" }, data: ${formatCode(JSON.stringify(pickedProps), 'json')})`, + ].join(' '); + }; diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index ed3dbf7a29f53f..38fe96083603e9 100644 --- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -317,14 +317,8 @@ class ComponentExample extends React.Component { - const { - canCodeBeFormatted, - currentCode, - currentCodeLanguage, - currentCodePath, - handleCodeFormat, - wasCodeChanged, - } = this.props; + const { canCodeBeFormatted, currentCode, currentCodeLanguage, currentCodePath, handleCodeFormat, wasCodeChanged } = + this.props; // get component name from file path: // elements/Button/Types/ButtonButtonExample @@ -429,15 +423,8 @@ class ComponentExample extends React.Component ( - {([ - 'smallest', - 'smaller', - 'small', - 'medium', - 'medium-large', - 'large', - 'larger', - 'largest', - ] as AvatarSizeValue[]).map(size => ( + {( + ['smallest', 'smaller', 'small', 'medium', 'medium-large', 'large', 'larger', 'largest'] as AvatarSizeValue[] + ).map(size => ( {size}
diff --git a/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx b/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx index 7b56a2c78a5b70..6694103dfb3756 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx +++ b/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx @@ -4,8 +4,7 @@ import * as React from 'react'; import { AcceptIcon } from '@fluentui/react-icons-northstar'; const avatars = { - ade: - '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', + ade: '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', }; const robinAvatar = { diff --git a/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx b/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx index ad2fec31415e43..e0fab186ffda29 100644 --- a/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx +++ b/packages/fluentui/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx @@ -13,8 +13,7 @@ import { } from '@fluentui/react-icons-northstar'; const avatars = { - ade: - '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', + ade: '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', }; const robinAvatar = { diff --git a/packages/fluentui/docs/src/examples/components/List/Performance/ListCommon.perf.tsx b/packages/fluentui/docs/src/examples/components/List/Performance/ListCommon.perf.tsx index 84d0faf98a80b6..185aaa10c592be 100644 --- a/packages/fluentui/docs/src/examples/components/List/Performance/ListCommon.perf.tsx +++ b/packages/fluentui/docs/src/examples/components/List/Performance/ListCommon.perf.tsx @@ -12,12 +12,10 @@ const avatars = { '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', adelia: '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', - joel: - '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', + joel: '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', jenny: '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', - joe: - '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', + joe: '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', justen: '/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHZpZXcAAAAAABOk/gAUXy4AEM8UAAPtzAAEEwsAA1yeAAAAAVhZWiAAAAAAAEwJVgBQAAAAVx/nbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAo8AAAACc2lnIAAAAABDUlQgY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08DWgNmA3IDfgOKA5YDogOuA7oDxwPTA+AD7AP5BAYEEwQgBC0EOwRIBFUEYwRxBH4EjASaBKgEtgTEBNME4QTwBP4FDQUcBSsFOgVJBVgFZwV3BYYFlgWmBbUFxQXVBeUF9gYGBhYGJwY3BkgGWQZqBnsGjAadBq8GwAbRBuMG9QcHBxkHKwc9B08HYQd0B4YHmQesB78H0gflB/gICwgfCDIIRghaCG4IggiWCKoIvgjSCOcI+wkQCSUJOglPCWQJeQmPCaQJugnPCeUJ+woRCicKPQpUCmoKgQqYCq4KxQrcCvMLCwsiCzkLUQtpC4ALmAuwC8gL4Qv5DBIMKgxDDFwMdQyODKcMwAzZDPMNDQ0mDUANWg10DY4NqQ3DDd4N+A4TDi4OSQ5kDn8Omw62DtIO7g8JDyUPQQ9eD3oPlg+zD88P7BAJECYQQxBhEH4QmxC5ENcQ9RETETERTxFtEYwRqhHJEegSBxImEkUSZBKEEqMSwxLjEwMTIxNDE2MTgxOkE8UT5RQGFCcUSRRqFIsUrRTOFPAVEhU0FVYVeBWbFb0V4BYDFiYWSRZsFo8WshbWFvoXHRdBF2UXiReuF9IX9xgbGEAYZRiKGK8Y1Rj6GSAZRRlrGZEZtxndGgQaKhpRGncanhrFGuwbFBs7G2MbihuyG9ocAhwqHFIcexyjHMwc9R0eHUcdcB2ZHcMd7B4WHkAeah6UHr4e6R8THz4faR+UH78f6iAVIEEgbCCYIMQg8CEcIUghdSGhIc4h+yInIlUigiKvIt0jCiM4I2YjlCPCI/AkHyRNJHwkqyTaJQklOCVoJZclxyX3JicmVyaHJrcm6CcYJ0kneierJ9woDSg/KHEooijUKQYpOClrKZ0p0CoCKjUqaCqbKs8rAis2K2krnSvRLAUsOSxuLKIs1y0MLUEtdi2rLeEuFi5MLoIuty7uLyQvWi+RL8cv/jA1MGwwpDDbMRIxSjGCMbox8jIqMmMymzLUMw0zRjN/M7gz8TQrNGU0njTYNRM1TTWHNcI1/TY3NnI2rjbpNyQ3YDecN9c4FDhQOIw4yDkFOUI5fzm8Ofk6Njp0OrI67zstO2s7qjvoPCc8ZTykPOM9Ij1hPaE94D4gPmA+oD7gPyE/YT+iP+JAI0BkQKZA50EpQWpBrEHuQjBCckK1QvdDOkN9Q8BEA0RHRIpEzkUSRVVFmkXeRiJGZ0arRvBHNUd7R8BIBUhLSJFI10kdSWNJqUnwSjdKfUrESwxLU0uaS+JMKkxyTLpNAk1KTZNN3E4lTm5Ot08AT0lPk0/dUCdQcVC7UQZRUFGbUeZSMVJ8UsdTE1NfU6pT9lRCVI9U21UoVXVVwlYPVlxWqVb3V0RXklfgWC9YfVjLWRpZaVm4WgdaVlqmWvVbRVuVW+VcNVyGXNZdJ114XcleGl5sXr1fD19hX7NgBWBXYKpg/GFPYaJh9WJJYpxi8GNDY5dj62RAZJRk6WU9ZZJl52Y9ZpJm6Gc9Z5Nn6Wg/aJZo7GlDaZpp8WpIap9q92tPa6dr/2xXbK9tCG1gbbluEm5rbsRvHm94b9FwK3CGcOBxOnGVcfByS3KmcwFzXXO4dBR0cHTMdSh1hXXhdj52m3b4d1Z3s3gReG54zHkqeYl553pGeqV7BHtje8J8IXyBfOF9QX2hfgF+Yn7CfyN/hH/lgEeAqIEKgWuBzYIwgpKC9INXg7qEHYSAhOOFR4Wrhg6GcobXhzuHn4gEiGmIzokziZmJ/opkisqLMIuWi/yMY4zKjTGNmI3/jmaOzo82j56QBpBukNaRP5GokhGSepLjk02TtpQglIqU9JVflcmWNJaflwqXdZfgmEyYuJkkmZCZ/JpomtWbQpuvnByciZz3nWSd0p5Anq6fHZ+Ln/qgaaDYoUehtqImopajBqN2o+akVqTHpTilqaYapoum/adup+CoUqjEqTepqaocqo+rAqt1q+msXKzQrUStuK4trqGvFq+LsACwdbDqsWCx1rJLssKzOLOutCW0nLUTtYq2AbZ5tvC3aLfguFm40blKucK6O7q1uy67p7whvJu9Fb2Pvgq+hL7/v3q/9cBwwOzBZ8Hjwl/C28NYw9TEUcTOxUvFyMZGxsPHQce/yD3IvMk6ybnKOMq3yzbLtsw1zLXNNc21zjbOts83z7jQOdC60TzRvtI/0sHTRNPG1EnUy9VO1dHWVdbY11zX4Nhk2OjZbNnx2nba+9uA3AXcit0Q3ZbeHN6i3ynfr+A24L3hROHM4lPi2+Nj4+vkc+T85YTmDeaW5x/nqegy6LzpRunQ6lvq5etw6/vshu0R7ZzuKO6070DvzPBY8OXxcvH/8ozzGfOn9DT0wvVQ9d72bfb794r4Gfio+Tj5x/pX+uf7d/wH/Jj9Kf26/kv+3P9t////2wBDAAMCAgICAgMCAgMFAwMDBQUEAwMEBQYFBQUFBQYIBgcHBwcGCAgJCgoKCQgMDAwMDAwODg4ODhAQEBAQEBAQEBD/2wBDAQMEBAYGBgwICAwSDgwOEhQQEBAQFBEQEBAQEBEREBAQEBAQERAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAyADIDAREAAhEBAxEB/8QAHQAAAgICAwEAAAAAAAAAAAAAAAgGCQQHAgMFCv/EADoQAAEEAAUDAQUFBAsAAAAAAAIBAwQFAAYHERIIEyExFCIyM1EJI0FCUhUkYWI0NTY3gYKEkZSh8P/EABsBAQACAwEBAAAAAAAAAAAAAAAEBQIDBgEH/8QALxEAAQQBAgUCBAYDAAAAAAAAAQACAxEEEiEFMUFRYXGRgbHh8AYTQqHB0RQyYv/aAAwDAQACEQMRAD8Ashxmi1TrDr3SaU3BZakrFGcWV8xZsR6ZIFhBSnFtuMw0BKndcfeNfd9eILsi4lQwF/uB/anY+KZRf/QHvz9lXo/11Z+kaqM6gVkE8wNWuT6zKmdsuzgIG7CQ1GP2t8Uiofa/eXTJskHyBKiom/joBgN0abqjY8fYXVDhbBHROmnWPHv4UEgdVeqtHlrTbLkhw3rnSazKyylcSnHG5X7ONlGXKt9skRXGSEeKEq7o37noibbjhRkurk4cv5+/VSTw6IlxB2cOXnv99d1a7p3r1pVqq/U1+Tblt+3uKNnNTdIiET0eudcRg+6aJwRxp7dsg35eOW23nHLSQPZZI2BpcRNiyR2XDYGr8qf40KKjBEYIkQ+0A0OuNS9f9G5ImbdPmvhlORMbRCWHJYknLJR5eENxhw1D+ILi+4dM1rHNPr+30XQYOaMfFlNWW24Dvt9F6uSOpPpPyVqNV9N2lTosT3JCVUWRTwEegFO+EW3rBF7j7hF4N3YwQvzbem0ZbC/TdlfPshuTPcspJPPc/IcgPC6NS+o/o5zbne00D1gmsPzoj510+wsoBNQoswfdMG7QfvGDbLx3PDaF6ltgctgfpuissUZUFSwkj0PzbyK6OhjQSXpF1L6txike3V2XauDCqbNeO8uPeupMjuKoe6pdhjYlTwq+U8Y18Rl1RtHc37LvMriH+Vhxvqi47jy3Y/TwnoxQKiRgiMES49c17c0enOWljwGJlPMu2WLaW73QlQH0BSiPxXWiFWyL7xsl2XkJKH44uuFRsfI4Em69+4KtuHwNm/MYTuWn4+CtY6fZVylX50roWUobTHsUmuKicYro0NYcNiOS2SOk2irsriCjHBflqvPdcXAbICbDQ2tq5qgyXAQOJ7fusa9pMnhmy0kXMHhPfeuEv3QgQ3XZLq8ErABxwd1Bdz9oVzf3UFA9cZFsmoFobp63zW2EgxtrsFN+krUC2c1Gu9H6ykhM0lPXBPsLkVdSYJtcGYkYB37aMB3CEB28J6YruJ47GsD760B08q2ditZiNks25x26efkmuxzirUYIjBFGtSdPKXVnItxp1fmTMS6aFsZbaCrsWQ2aOMSG0LxyacFCT6+U/HG+CZ0Lw8cwpGPO6GQPHRKJTRc11N/NgUjxR7WtJ2NJ7ewG4jDnbNEEt90JRRVH6Yn8f/EWHwjHZkZLXmN7g3UwatJIu3bjb5nZb8ThpznGNumwNVONX6eVg5gK1bsn3swvE7N4ocl1wkI9uPjlt+KIn+2JnA+MY/FcRuVjteI3Ega26Sa6t3Nt897HRY5WCcOT8kltgfpNgX/KZnp+0jqtOqSbmxO6d/nZuFOulf47Rwba+5jMogoqAiFzXkqqpL/hiBn5Jlfp/S2wP7WuSdz2NYeTeXxW1cVijIwRGCLjIdZhRDsJzrcWK35clSHAZZFE+puKI/8AeCJfs/ZQ051IzRKzTkTM0aS8Si3dyKWTHnxxnCP5yZNUbdVvipIi+fXbHR4MmqEseA5vKnCxXYg7FV+RmOheAB070Vh5c0nyVS2sW1zTOKbEjOg/LcsTbjQgEV3U3yVURRRfXkW31xLnlLYjpptDatq9Og+Citz5JJAKqzv1KY2DKjXLftdTJZsWi892G83IHZfTyyRJtjkFdLkqbeF8KnqmPURgiXfrW6sI/Sxp/Ak00Nm0zrmk3o+Vq6VusZkI4ir86SIqhE21zERBFTmZInpyXBFT9qdq7qlrTcOXuq+aZ+ZZLhKYsy3lGGzv54sRG+LDQp+CCGMgF6pJor1MawdPsSZUaaWMVmosH/bJtJYQWZcRyTwRrvIi8TA+AoKqJp4T0xvjlezko02NHJ/svd1U6zuoLV/L0rKGZbmJXUM8O1ZVVLAbhBMb3Qu2+4quOkG6eR5ImMpMh7xRKxixI2GwFpqktLfLEwbDK9lLpZbfkJNZKfhuCv1QmDBcRlLpPh0VfaG5/i54ptJOoG4LMdFfvNVtNmyag/tGsmPKgMDKeFE70dw14KR++Cki8lHdMYkLxWg+yyP0fn7Xqnx/pwRVa/a9/wB7um/zP7OzfX5X9Yr8P836v8uA5oEh+M1kjBEYIjBED8+P8fz4/wAn5vzg+X/P+n+OBXhX0h/8v+hf+/1WNa8X/9k=', laura: diff --git a/packages/fluentui/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx b/packages/fluentui/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx index b02480eca5b266..60756aafbe4857 100644 --- a/packages/fluentui/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx +++ b/packages/fluentui/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx @@ -4,8 +4,7 @@ import * as _ from 'lodash'; import * as React from 'react'; const avatars = { - ade: - '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', + ade: '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', }; const robinAvatar = { image: `data:image/jpeg;base64,${avatars.ade}`, diff --git a/packages/fluentui/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx b/packages/fluentui/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx index fd4e84e81e6b36..47a3ce0e4d4ba1 100644 --- a/packages/fluentui/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx +++ b/packages/fluentui/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx @@ -4,8 +4,7 @@ import * as _ from 'lodash'; import * as React from 'react'; const avatars = { - ade: - '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', + ade: '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', }; const robinAvatar = { image: `data:image/jpeg;base64,${avatars.ade}`, diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx index 5511afa9df7719..eeb2b177a53f23 100644 --- a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx @@ -8,15 +8,15 @@ export default { title: 'Divider', } as ComponentMeta; -const DividerExampleSizeTeams = getThemeStoryVariant((DividerExampleSize as unknown) as ComponentStory, 'teamsV2'); +const DividerExampleSizeTeams = getThemeStoryVariant(DividerExampleSize as unknown as ComponentStory, 'teamsV2'); const DividerExampleSizeTeamsDark = getThemeStoryVariant( - (DividerExampleSize as unknown) as ComponentStory, + DividerExampleSize as unknown as ComponentStory, 'teamsDarkV2', ); const DividerExampleSizeTeamsHighContrast = getThemeStoryVariant( - (DividerExampleSize as unknown) as ComponentStory, + DividerExampleSize as unknown as ComponentStory, 'teamsHighContrast', ); diff --git a/packages/fluentui/e2e/tests/popupInMenu-example.tsx b/packages/fluentui/e2e/tests/popupInMenu-example.tsx index fbe78c0e402d61..357dfd4b7bf5a2 100644 --- a/packages/fluentui/e2e/tests/popupInMenu-example.tsx +++ b/packages/fluentui/e2e/tests/popupInMenu-example.tsx @@ -16,25 +16,27 @@ export const selectors = { popupContentId: index => `popup-content-${index}`, }; -const renderItem = (index: number): ShorthandRenderFunction => (Component, props) => { - if (props.key === 'focus-trap') { +const renderItem = + (index: number): ShorthandRenderFunction => + (Component, props) => { + if (props.key === 'focus-trap') { + return ( + } + trapFocus + content={
, ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; @@ -1803,7 +1803,7 @@ describe('FocusZone', () => {
, ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; diff --git a/packages/fluentui/react-bindings/test/accesibility/shouldHandleOnKeys-test.ts b/packages/fluentui/react-bindings/test/accesibility/shouldHandleOnKeys-test.ts index 2a2ec3769ad291..f05a6d558a79d3 100644 --- a/packages/fluentui/react-bindings/test/accesibility/shouldHandleOnKeys-test.ts +++ b/packages/fluentui/react-bindings/test/accesibility/shouldHandleOnKeys-test.ts @@ -26,18 +26,15 @@ describe('shouldHandleOnKeys', () => { { keyCode: 39, ctrlKey: true }, { keyCode: 42, altKey: true, ctrlKey: true, shiftKey: true, metaKey: true }, ]; - const events = [ - ...keyCombinations, - { keyCode: 27, altKey: true }, - { keyCode: 27, altKey: false }, - ].map(keyCombination => - getEventArg( - keyCombination.keyCode, - keyCombination.altKey, - keyCombination.ctrlKey, - keyCombination.metaKey, - keyCombination.shiftKey, - ), + const events = [...keyCombinations, { keyCode: 27, altKey: true }, { keyCode: 27, altKey: false }].map( + keyCombination => + getEventArg( + keyCombination.keyCode, + keyCombination.altKey, + keyCombination.ctrlKey, + keyCombination.metaKey, + keyCombination.shiftKey, + ), ); events.forEach(event => { diff --git a/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx b/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx index 4e7004917b3935..fcaca51b8e9282 100644 --- a/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx +++ b/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx @@ -133,12 +133,9 @@ describe('useAutoControlled', () => { }); it('should update function passing updated value', () => { - const { result, rerender } = renderHook( - ({ value }) => useAutoControlled({ defaultValue: '', value }), - { - initialProps: { value: 'a' }, - }, - ); + const { result, rerender } = renderHook(({ value }) => useAutoControlled({ defaultValue: '', value }), { + initialProps: { value: 'a' }, + }); rerender({ value: 'b' }); const dispatchSpy = jest.fn(); diff --git a/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx b/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx index 055daeae6c138b..cd20517beb5522 100644 --- a/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx +++ b/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx @@ -24,7 +24,7 @@ describe('useTriggerElement', () => { }); it('"trigger" can be null', () => { - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.children()).toHaveLength(0); }); diff --git a/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx b/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx index 165d101821bf5f..d6565501481a8b 100644 --- a/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx +++ b/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx @@ -92,13 +92,15 @@ export const knobs = { literal: ({ options, value, onChange, id }) => ( ), diff --git a/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx b/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx index 8fe27d5b8c3884..ff880ba4450921 100644 --- a/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx +++ b/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx @@ -102,7 +102,7 @@ export function createEmotionRenderer(options: CreateEmotionRendererOptions = {} } const serializedStyles = serializeStyles( - [{ [selector]: (styles as unknown) as CSSObject }], + [{ [selector]: styles as unknown as CSSObject }], // This looks as a bug in typings as in Emotion code this function can be used with a single param. // https://github.com/emotion-js/emotion/blob/a076e7fa5f78fec6515671b78801cfc9d6cf1316/packages/core/src/global.js#L45 // @ts-ignore diff --git a/packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts b/packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts index 05e1f6e0880925..efe8c3cd00dbf1 100644 --- a/packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts +++ b/packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts @@ -15,7 +15,7 @@ expect.addSnapshotSerializer({ } const insertedCSS = Array.from(value.head.childNodes) - .map((node: HTMLStyleElement) => reduceRules((node?.sheet as unknown) as CSSStyleSheet)) + .map((node: HTMLStyleElement) => reduceRules(node?.sheet as unknown as CSSStyleSheet)) .join(';'); return prettier.format(insertedCSS, { parser: 'css' }).trim(); diff --git a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx index 5c580117283e63..14aaf50279602b 100644 --- a/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx +++ b/packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx @@ -145,7 +145,7 @@ export function createFelaRenderer(options: CreateFelaRendererOptions = {}): Cre theme: { direction: param.direction }, }; - return felaRenderer.renderRule(() => (styles as unknown) as IStyle, felaParam); + return felaRenderer.renderRule(() => styles as unknown as IStyle, felaParam); }, // getOriginalRenderer() is implemented only for tests to be compatible with jest-react-fela expectations. diff --git a/packages/fluentui/react-northstar-fela-renderer/src/felaExpandCssShorthandsPlugin.ts b/packages/fluentui/react-northstar-fela-renderer/src/felaExpandCssShorthandsPlugin.ts index de4b9c2786f1e4..f6ffb23f8a319e 100644 --- a/packages/fluentui/react-northstar-fela-renderer/src/felaExpandCssShorthandsPlugin.ts +++ b/packages/fluentui/react-northstar-fela-renderer/src/felaExpandCssShorthandsPlugin.ts @@ -21,32 +21,35 @@ const handledCssProps: Partial> = { }; export const felaExpandCssShorthandsPlugin = (styles: ICSSInJSStyle): ICSSInJSStyle => { - return Object.keys(styles).reduce(( - // Without casting to any TSC gives "Expression produces a union type that is too complex to represent" error - acc: any, - cssPropertyName: keyof ICSSInJSStyle, - ) => { - const cssPropertyValue = styles[cssPropertyName]; + return Object.keys(styles).reduce( + ( + // Without casting to any TSC gives "Expression produces a union type that is too complex to represent" error + acc: any, + cssPropertyName: keyof ICSSInJSStyle, + ) => { + const cssPropertyValue = styles[cssPropertyName]; - if (cssPropertyValue === null || typeof cssPropertyValue === 'undefined') { - acc[cssPropertyName] = cssPropertyValue; - } else if (handledCssProps[cssPropertyName]) { - const expandedProps = expandProperty(cssPropertyName, cssPropertyValue); + if (cssPropertyValue === null || typeof cssPropertyValue === 'undefined') { + acc[cssPropertyName] = cssPropertyValue; + } else if (handledCssProps[cssPropertyName]) { + const expandedProps = expandProperty(cssPropertyName, cssPropertyValue); - if (expandedProps) { - Object.assign(acc, expandedProps); - return acc; - } + if (expandedProps) { + Object.assign(acc, expandedProps); + return acc; + } - acc[cssPropertyName] = cssPropertyValue; - } else if (Array.isArray(cssPropertyValue)) { - acc[cssPropertyName] = cssPropertyValue; - } else if (typeof cssPropertyValue === 'object') { - acc[cssPropertyName] = felaExpandCssShorthandsPlugin(cssPropertyValue as ICSSInJSStyle); - } else { - acc[cssPropertyName] = cssPropertyValue; - } + acc[cssPropertyName] = cssPropertyValue; + } else if (Array.isArray(cssPropertyValue)) { + acc[cssPropertyName] = cssPropertyValue; + } else if (typeof cssPropertyValue === 'object') { + acc[cssPropertyName] = felaExpandCssShorthandsPlugin(cssPropertyValue as ICSSInJSStyle); + } else { + acc[cssPropertyName] = cssPropertyValue; + } - return acc; - }, {}); + return acc; + }, + {}, + ); }; diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx index 24a08a652b3a0a..3fc78d0bc045d3 100644 --- a/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx +++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx @@ -13,9 +13,10 @@ interface ResponsiveTableProps extends TableProps { const ResponsiveTableContainer: React.FC = props => { const { columns: config, children } = props; - const responsiveTableID = React.useMemo(() => props.id || _.uniqueId(`${tableClassName}__responsive-wrapper`), [ - props.id, - ]); + const responsiveTableID = React.useMemo( + () => props.id || _.uniqueId(`${tableClassName}__responsive-wrapper`), + [props.id], + ); const [breakpoints, setBreakpoints] = React.useState(); diff --git a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx index 485679cafdb69e..7566783775ff25 100644 --- a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx +++ b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx @@ -111,7 +111,7 @@ export const accordionSlotClassNames: AccordionSlotClassNames = { * @accessibility * Implements [ARIA Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) design pattern (keyboard navigation not yet supported). */ -export const Accordion = (React.forwardRef((props, ref) => { +export const Accordion = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Accordion.displayName, context.telemetry); setStart(); @@ -313,7 +313,7 @@ export const Accordion = (React.forwardRef((pr setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'dl', HTMLDListElement, AccordionProps> & +}) as unknown as ForwardRefWithAs<'dl', HTMLDListElement, AccordionProps> & FluentComponentStaticProps & { Title: typeof AccordionTitle; Content: typeof AccordionContent; diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx index 5f27aaf60f0c74..98e9116a27adcc 100644 --- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx @@ -52,7 +52,7 @@ export type AccordionContentStylesProps = Required((props, ref) => { +export const AccordionContent = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AccordionContent.displayName, context.telemetry); @@ -103,7 +103,7 @@ export const AccordionContent = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDListElement, AccordionContentProps> & FluentComponentStaticProps; AccordionContent.displayName = 'AccordionContent'; diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx index 516454fae4b846..1c506150e52b35 100644 --- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx +++ b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx @@ -91,7 +91,7 @@ export type AccordionTitleStylesProps = Required( +export const AccordionTitle = React.forwardRef( (props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AccordionTitle.displayName, context.telemetry); @@ -219,7 +219,7 @@ export const AccordionTitle = (React.forwardRef & +) as unknown as ForwardRefWithAs<'div', HTMLDListElement, AccordionTitleProps> & FluentComponentStaticProps; AccordionTitle.displayName = 'AccordionTitle'; diff --git a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx index 6b2cd443235e0b..4dc6b2de625173 100644 --- a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx +++ b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx @@ -123,7 +123,7 @@ export const alertSlotClassNames: AlertSlotClassNames = { * @accessibility * Implements [ARIA Alert](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) design pattern. */ -export const Alert = (React.forwardRef((props, ref) => { +export const Alert = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Alert.displayName, context.telemetry); setStart(); @@ -282,7 +282,7 @@ export const Alert = (React.forwardRef((props, ref) setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, AlertProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, AlertProps> & FluentComponentStaticProps & { DismissAction: typeof AlertDismissAction; }; diff --git a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx index a9eacefb311d50..2342c07d979808 100644 --- a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx +++ b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx @@ -77,7 +77,7 @@ export const alertDismissActionSlotClassNames: AlertDismissActionSlotClassNames * @accessibility * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. */ -export const AlertDismissAction = (React.forwardRef< +export const AlertDismissAction = React.forwardRef< HTMLButtonElement, AlertDismissActionProps & { as: React.ReactNode } >((props, ref) => { @@ -176,7 +176,7 @@ export const AlertDismissAction = (React.forwardRef< setEnd(); return result; -}) as unknown) as ForwardRefWithAs<'button', HTMLButtonElement, AlertDismissActionProps> & +}) as unknown as ForwardRefWithAs<'button', HTMLButtonElement, AlertDismissActionProps> & FluentComponentStaticProps; AlertDismissAction.defaultProps = { diff --git a/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx b/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx index 3108f409d85379..109c22c5149bee 100644 --- a/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx +++ b/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx @@ -152,16 +152,16 @@ export const Animation = React.forwardRef((props const { appear, children, className, mountOnEnter, timeout, visible, unmountOnExit } = props; - const handleAnimationEvent = ( - event: 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited', - ) => () => { - _.invoke(props, event, null, props); - }; - - const { className: animationClasses, animationDuration, animationDelay } = useAnimationStyles( - Animation.displayName, - props, - ); + const handleAnimationEvent = + (event: 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited') => () => { + _.invoke(props, event, null, props); + }; + + const { + className: animationClasses, + animationDuration, + animationDelay, + } = useAnimationStyles(Animation.displayName, props); const timeoutResult = timeout || calculateAnimationTimeout(animationDuration, animationDelay) || 0; const unhandledProps = useUnhandledProps(Animation.handledProps, props); diff --git a/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx b/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx index cd4b237ddf4c61..32dad40858713e 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx @@ -58,7 +58,7 @@ export const avatarClassName = 'ui-avatar'; /** * An Avatar is a graphical representation of a user. */ -export const Avatar = (React.forwardRef((props, ref) => { +export const Avatar = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Avatar.displayName, context.telemetry); setStart(); @@ -148,7 +148,7 @@ export const Avatar = (React.forwardRef((props, ref setEnd(); return result; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, AvatarProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, AvatarProps> & FluentComponentStaticProps; Avatar.displayName = 'Avatar'; diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx index d451294eeed7db..ca49b98ede4888 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx @@ -38,7 +38,7 @@ export const avatarIconClassName = 'ui-avatar__icon'; /** * A AvatarIcon provides a status icon for the Avatar. */ -export const AvatarIcon = (React.forwardRef((props, ref) => { +export const AvatarIcon = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AvatarIcon.displayName, context.telemetry); setStart(); @@ -76,7 +76,7 @@ export const AvatarIcon = (React.forwardRef((p setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, AvatarIconProps> & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, AvatarIconProps> & FluentComponentStaticProps; AvatarIcon.displayName = 'AvatarIcon'; diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx index 7e1d51ec60f61d..26b831ddd20b96 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx @@ -47,7 +47,7 @@ export const avatarImageClassName = imageClassName; /** * An AvatarImage is a graphic representation used by Avatar. */ -export const AvatarImage = (React.forwardRef((props, ref) => { +export const AvatarImage = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AvatarImage.displayName, context.telemetry); setStart(); @@ -99,7 +99,7 @@ export const AvatarImage = (React.forwardRef setEnd(); return result; -}) as unknown) as ForwardRefWithAs<'img', HTMLImageElement, AvatarImageProps> & +}) as unknown as ForwardRefWithAs<'img', HTMLImageElement, AvatarImageProps> & FluentComponentStaticProps; AvatarImage.displayName = 'AvatarImage'; diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx index 932dcf2bba6cc0..31dfd05b734c85 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx @@ -47,7 +47,7 @@ export const avatarlabelClassName = labelClassName; /** * A AvatarLabel allows user to classify content. */ -export const AvatarLabel = (React.forwardRef((props, ref) => { +export const AvatarLabel = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AvatarLabel.displayName, context.telemetry); setStart(); @@ -89,7 +89,7 @@ export const AvatarLabel = (React.forwardRef( setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, AvatarLabelProps> & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, AvatarLabelProps> & FluentComponentStaticProps; AvatarLabel.displayName = 'AvatarLabel'; diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx index 80e61793cdd583..0ad6cfce04b449 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx @@ -45,7 +45,7 @@ export const avatarStatusClassName = statusClassName; /** * A AvatarStatus provides a status for the Avatar. */ -export const AvatarStatus = (React.forwardRef((props, ref) => { +export const AvatarStatus = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AvatarStatus.displayName, context.telemetry); setStart(); @@ -99,7 +99,7 @@ export const AvatarStatus = (React.forwardRef & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, AvatarStatusProps> & FluentComponentStaticProps; AvatarStatus.displayName = 'AvatarStatus'; AvatarStatus.propTypes = { diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx index d89a7b9ccce493..bb163eb80e713c 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx @@ -32,7 +32,7 @@ export const avatarStatusIconClassName = 'ui-avatar__statusicon'; /** * A AvatarStatusIcon provides a status icon for the Avatar. */ -export const AvatarStatusIcon = (React.forwardRef((props, ref) => { +export const AvatarStatusIcon = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AvatarStatusIcon.displayName, context.telemetry); setStart(); @@ -68,7 +68,7 @@ export const AvatarStatusIcon = (React.forwardRef & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, AvatarStatusIconProps> & FluentComponentStaticProps; AvatarStatusIcon.displayName = 'AvatarStatusIcon'; AvatarStatusIcon.propTypes = { diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx index c7d3354cc6a06b..c23c418e1224b5 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx +++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx @@ -33,7 +33,7 @@ export const avatarStatusImageClassName = 'ui-avatar__statusimage'; /** * A AvatarStatusImage provides a status image for the Avatar. */ -export const AvatarStatusImage = (React.forwardRef((props, ref) => { +export const AvatarStatusImage = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(AvatarStatusImage.displayName, context.telemetry); setStart(); @@ -68,7 +68,7 @@ export const AvatarStatusImage = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'img', HTMLImageElement, AvatarStatusImageProps> & FluentComponentStaticProps; AvatarStatusImage.displayName = 'AvatarStatusImage'; diff --git a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx index c08dc7e464d1c5..81ce3426131fc1 100644 --- a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx @@ -46,7 +46,7 @@ export const buttonGroupClassName = 'ui-buttons'; /** * A ButtonGroup represents multiple related actions as a group. */ -export const ButtonGroup = (React.forwardRef((props, ref) => { +export const ButtonGroup = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(ButtonGroup.displayName, context.telemetry); setStart(); @@ -117,7 +117,7 @@ export const ButtonGroup = (React.forwardRef(( setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, ButtonGroupProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, ButtonGroupProps> & FluentComponentStaticProps; ButtonGroup.displayName = 'ButtonGroup'; diff --git a/packages/fluentui/react-northstar/src/components/Card/Card.tsx b/packages/fluentui/react-northstar/src/components/Card/Card.tsx index 7531a0f81c6bba..2c90f69da015ab 100644 --- a/packages/fluentui/react-northstar/src/components/Card/Card.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/Card.tsx @@ -101,7 +101,7 @@ export const cardClassName = 'ui-card'; * When card contains actionable elements, use [cardChildrenFocusableBehavior](/components/card/accessibility#card-children-focusable). * */ -export const Card = (React.forwardRef((props, ref) => { +export const Card = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Card.displayName, context.telemetry); setStart(); @@ -198,7 +198,7 @@ export const Card = (React.forwardRef((props, ref) => ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CardProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardProps> & FluentComponentStaticProps & { Header: typeof CardHeader; Body: typeof CardBody; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx index 4bdab0b7f5d4d2..ee1d62b8bac449 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx @@ -29,7 +29,7 @@ export const cardBodyClassName = 'ui-card__body'; /** * A CardBody is used to display data in Card body. */ -export const CardBody = (React.forwardRef((props, ref) => { +export const CardBody = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CardBody.displayName, context.telemetry); setStart(); @@ -67,7 +67,7 @@ export const CardBody = (React.forwardRef((props, ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CardBodyProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardBodyProps> & FluentComponentStaticProps; CardBody.displayName = 'CardBody'; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx index 2272809329cbd7..1a2bb928df6717 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx @@ -25,7 +25,7 @@ export const cardColumnClassName = 'ui-card__column'; /** * A CardColumn is used to display content in card as column */ -export const CardColumn = (React.forwardRef((props, ref) => { +export const CardColumn = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CardColumn.displayName, context.telemetry); setStart(); @@ -62,8 +62,7 @@ export const CardColumn = (React.forwardRef((pr ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CardColumnProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardColumnProps> & FluentComponentStaticProps; CardColumn.displayName = 'CardColumn'; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx index 7d4e4974840dc8..bd7bc6842632b7 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx @@ -29,7 +29,7 @@ export const cardFooterClassName = 'ui-card__footer'; /** * A CardFooter is used to display data in Card component footer */ -export const CardFooter = (React.forwardRef((props, ref) => { +export const CardFooter = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CardFooter.displayName, context.telemetry); setStart(); @@ -67,8 +67,7 @@ export const CardFooter = (React.forwardRef((pr ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CardFooterProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardFooterProps> & FluentComponentStaticProps; CardFooter.displayName = 'CardFooter'; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx index 60e21dccaeccd0..883d8c18cb59dc 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx @@ -30,7 +30,7 @@ export const cardHeaderClassName = 'ui-card__header'; /** * A CardHeader is used to display data in Card header. */ -export const CardHeader = (React.forwardRef((props, ref) => { +export const CardHeader = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CardHeader.displayName, context.telemetry); setStart(); @@ -68,8 +68,7 @@ export const CardHeader = (React.forwardRef((pr ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CardHeaderProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardHeaderProps> & FluentComponentStaticProps; CardHeader.displayName = 'CardHeader'; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx index e30b7f86362141..8ef8d698428558 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx @@ -33,7 +33,7 @@ export const cardPreviewClassName = 'ui-card__preview'; /** * A CardPreview is used to display data Card preview. */ -export const CardPreview = (React.forwardRef((props, ref) => { +export const CardPreview = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CardPreview.displayName, context.telemetry); setStart(); @@ -71,7 +71,7 @@ export const CardPreview = (React.forwardRef(( ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CardPreviewProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardPreviewProps> & FluentComponentStaticProps; CardPreview.displayName = 'CardPreview'; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx index 86ac2e40e20190..1d3d3ae887acad 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx @@ -26,7 +26,7 @@ export const cardTopControlsClassName = 'ui-card__topcontrols'; /** * A CardTopControls is used to render control elements in the top of a Card component. */ -export const CardTopControls = (React.forwardRef((props, ref) => { +export const CardTopControls = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CardTopControls.displayName, context.telemetry); setStart(); @@ -63,7 +63,7 @@ export const CardTopControls = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CardTopControlsProps> & FluentComponentStaticProps; CardTopControls.displayName = 'CardTopControls'; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx index 67b981e9597250..9e12a8ef6df32e 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx @@ -177,7 +177,7 @@ function useDirection(activeIndex: number, circular: boolean, itemsLength: numbe * @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 const Carousel = (React.forwardRef((props, ref) => { +export const Carousel = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Carousel.displayName, context.telemetry); setStart(); @@ -524,7 +524,7 @@ export const Carousel = (React.forwardRef((props, ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CarouselProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CarouselProps> & FluentComponentStaticProps & { Item: typeof CarouselItem; Navigation: typeof CarouselNavigation; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx index 7609fe9d8c4641..981e0a7a3dab3e 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx @@ -59,7 +59,7 @@ export const carouselItemSlotClassNames: CarouselItemSlotClassNames = { * @accessibility * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern. */ -export const CarouselItem = (React.forwardRef((props, ref) => { +export const CarouselItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CarouselItem.displayName, context.telemetry); setStart(); @@ -122,7 +122,7 @@ export const CarouselItem = (React.forwardRef setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CarouselItemProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CarouselItemProps> & FluentComponentStaticProps; CarouselItem.displayName = 'CarouselItem'; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx index 0146df04178971..d35d6746941714 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx @@ -73,7 +73,7 @@ export const carouselNavigationClassName = 'ui-carousel__navigation'; /** * A Carousel navigation helps switching between Carousel items. */ -export const CarouselNavigation = (React.forwardRef((props, ref) => { +export const CarouselNavigation = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CarouselNavigation.displayName, context.telemetry); setStart(); @@ -162,7 +162,7 @@ export const CarouselNavigation = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'ul', HTMLUListElement, CarouselNavigationProps> & FluentComponentStaticProps; CarouselNavigation.displayName = 'CarouselNavigation'; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx index 1ec5d98709dd3c..372026ed22f227 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx @@ -91,7 +91,7 @@ export const carouselNavigationItemSlotClassNames: CarouselNavigationItemSlotCla /** * A CarouselItem is an actionable item within a Carousel. */ -export const CarouselNavigationItem = (React.forwardRef((props, ref) => { +export const CarouselNavigationItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CarouselNavigationItem.displayName, context.telemetry); setStart(); @@ -195,7 +195,7 @@ export const CarouselNavigationItem = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'li', HTMLLIElement, CarouselNavigationItemProps> & FluentComponentStaticProps; CarouselNavigationItem.displayName = 'CarouselNavigationItem'; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx index 84525d688da487..151153f7835cfe 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx @@ -75,7 +75,7 @@ export const carouselPaddleSlotClassNames: CarouselPaddleSlotClassNames = { * @accessibility * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. */ -export const CarouselPaddle = (React.forwardRef( +export const CarouselPaddle = React.forwardRef( (props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CarouselPaddle.displayName, context.telemetry); @@ -171,7 +171,7 @@ export const CarouselPaddle = (React.forwardRef & +) as unknown as ForwardRefWithAs<'button', HTMLButtonElement, CarouselPaddleProps> & FluentComponentStaticProps; CarouselPaddle.defaultProps = { diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx index d6c2fac50ea51c..51cb62e1fda568 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx @@ -29,7 +29,7 @@ export const carouselPaddlesContainerClassName = 'ui-carrouselpaddles_container' /** * A CarouselPaddlesContainer is a container for the Carousel Paddles. */ -export const CarouselPaddlesContainer = (React.forwardRef( +export const CarouselPaddlesContainer = React.forwardRef( (props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(CarouselPaddlesContainer.displayName, context.telemetry); @@ -65,7 +65,7 @@ export const CarouselPaddlesContainer = (React.forwardRef & +) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CarouselPaddlesContainerProps> & FluentComponentStaticProps; CarouselPaddlesContainer.displayName = 'CarouselPaddlesContainer'; diff --git a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx index 9b494a2ad08377..2be2a3b043b4fe 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx @@ -54,7 +54,7 @@ export const chatSlotClassNames: ChatSlotClassNames = { /** * A Chat displays messages from a conversation between multiple users. */ -export const Chat = (React.forwardRef((props, ref) => { +export const Chat = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Chat.displayName, context.telemetry); setStart(); @@ -113,7 +113,7 @@ export const Chat = (React.forwardRef((props, ref) setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'ul', HTMLUListElement, ChatProps> & +}) as unknown as ForwardRefWithAs<'ul', HTMLUListElement, ChatProps> & FluentComponentStaticProps & { Item: typeof ChatItem; Message: typeof ChatMessage; diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx index 1ffdc5fea538b5..87bcc43c9f1529 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx @@ -68,7 +68,7 @@ export type ChatItemStylesProps = Pick((inputProps, ref) => { +export const ChatItem = React.forwardRef((inputProps, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(ChatItem.displayName, context.telemetry); setStart(); @@ -161,7 +161,7 @@ export const ChatItem = (React.forwardRef((inputPr setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'li', HTMLLIElement, ChatItemProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'li', HTMLLIElement, ChatItemProps> & FluentComponentStaticProps; ChatItem.displayName = 'ChatItem'; diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx index 3c9a4b369b4403..dbae33af936779 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx @@ -249,7 +249,7 @@ function partitionActionMenuPropsFromShorthand

( /** * A ChatMessage represents a single message in chat. */ -export const ChatMessage = (React.forwardRef((inputProps, ref) => { +export const ChatMessage = React.forwardRef((inputProps, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(ChatMessage.displayName, context.telemetry); setStart(); @@ -303,9 +303,8 @@ export const ChatMessage = (React.forwardRef(( const isRefreshComfyLayout = layout === 'refresh' && density === 'comfy'; const [actionMenuOptions, positioningProps] = partitionPopperPropsFromShorthand(props.actionMenu); - const [actionMenu, inlineActionMenu, controlledShowActionMenu] = partitionActionMenuPropsFromShorthand( - actionMenuOptions, - ); + const [actionMenu, inlineActionMenu, controlledShowActionMenu] = + partitionActionMenuPropsFromShorthand(actionMenuOptions); const [showActionMenu, setShowActionMenu] = useAutoControlled({ defaultValue: false, value: controlledShowActionMenu, @@ -726,7 +725,7 @@ export const ChatMessage = (React.forwardRef(( setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, ChatMessageProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, ChatMessageProps> & FluentComponentStaticProps; ChatMessage.displayName = 'ChatMessage'; diff --git a/packages/fluentui/react-northstar/src/components/Chat/chatContext.ts b/packages/fluentui/react-northstar/src/components/Chat/chatContext.ts index b81770fd3f5595..6c47c309720cfa 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/chatContext.ts +++ b/packages/fluentui/react-northstar/src/components/Chat/chatContext.ts @@ -27,8 +27,8 @@ const ChatContext = createContext({ export const ChatContextProvider = ChatContext.Provider; export const useChatContextSelectors = < - Selectors extends Record> + Selectors extends Record>, >( selectors: Selectors, ): Record => - (useContextSelectors(ChatContext, selectors) as unknown) as ChatContextSubscribedValue; + useContextSelectors(ChatContext, selectors) as unknown as ChatContextSubscribedValue; diff --git a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx index 3a6305438d9998..21c38487519df0 100644 --- a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx +++ b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx @@ -79,7 +79,7 @@ export const checkboxSlotClassNames: CheckboxSlotClassNames = { * @accessibility * Implements [ARIA Checkbox](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox) design pattern. */ -export const Checkbox = (React.forwardRef((props, ref) => { +export const Checkbox = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Checkbox.displayName, context.telemetry); setStart(); @@ -191,7 +191,7 @@ export const Checkbox = (React.forwardRef((props, setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, CheckboxProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, CheckboxProps> & FluentComponentStaticProps; Checkbox.displayName = 'Checkbox'; diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx index d34c3de43cc0b4..9f2fc59d0dcb49 100644 --- a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx +++ b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx @@ -148,7 +148,7 @@ const formatRestrictedInput = (restrictedOptions: IRestrictedDatesOptions, local * @accessibilityIssues * [NVDA - Aria-selected is not narrated for the gridcell](https://github.com/nvaccess/nvda/issues/11986) */ -export const Datepicker = (React.forwardRef((props, ref) => { +export const Datepicker = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Datepicker.displayName, context.telemetry); setStart(); @@ -425,7 +425,7 @@ export const Datepicker = (React.forwardRef((pr ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, DatepickerProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DatepickerProps> & FluentComponentStaticProps & { Calendar: typeof DatepickerCalendar; CalendarHeader: typeof DatepickerCalendarHeader; diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx index 4696b35d4b0d69..29217891bb552d 100644 --- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx +++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx @@ -99,7 +99,7 @@ const normalizeDateInGrid = (date: Date): Date => { /** * A DatepickerCalendar is used to display dates in sematically grouped way. */ -export const DatepickerCalendar = (React.forwardRef((props, ref) => { +export const DatepickerCalendar = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(DatepickerCalendar.displayName, context.telemetry); setStart(); @@ -431,7 +431,7 @@ export const DatepickerCalendar = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DatepickerCalendarProps> & FluentComponentStaticProps; DatepickerCalendar.displayName = 'DatepickerCalendar'; diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx index 18d1877dd53d64..bf0980fea95d3e 100644 --- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx +++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx @@ -65,23 +65,14 @@ export const datepickerCalendarHeaderClassName = 'ui-datepicker__calendarheader' /** * A DatepickerCalendarHeader is used to display header block above calendar grid. */ -export const DatepickerCalendarHeader = (React.forwardRef( +export const DatepickerCalendarHeader = React.forwardRef( (props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(DatepickerCalendarHeader.displayName, context.telemetry); setStart(); - const { - className, - design, - styles, - variables, - label, - nextButton, - previousButton, - onPreviousClick, - onNextClick, - } = props; + const { className, design, styles, variables, label, nextButton, previousButton, onPreviousClick, onNextClick } = + props; const ElementType = getElementType(props); const unhandledProps = useUnhandledProps(DatepickerCalendarHeader.handledProps, props); const getA11yProps = useAccessibility(props.accessibility, { @@ -159,7 +150,7 @@ export const DatepickerCalendarHeader = (React.forwardRef & +) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DatepickerCalendarHeaderProps> & FluentComponentStaticProps; DatepickerCalendarHeader.displayName = 'DatepickerCalendarHeader'; diff --git a/packages/fluentui/react-northstar/src/components/Debug/DebugSelector.tsx b/packages/fluentui/react-northstar/src/components/Debug/DebugSelector.tsx index 9a90793e49b74f..36428da9f4b1c2 100644 --- a/packages/fluentui/react-northstar/src/components/Debug/DebugSelector.tsx +++ b/packages/fluentui/react-northstar/src/components/Debug/DebugSelector.tsx @@ -88,15 +88,8 @@ export class DebugSelector extends React.Component>; * [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 const Dialog = (React.forwardRef((props, ref) => { +export const Dialog = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Dialog.displayName, context.telemetry); setStart(); @@ -414,7 +414,7 @@ export const Dialog = (React.forwardRef((props, ref ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, DialogProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DialogProps> & FluentComponentStaticProps & { Footer: typeof DialogFooter; }; diff --git a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx index 83bb808b4d8326..0ec8e127b962de 100644 --- a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx +++ b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx @@ -34,7 +34,7 @@ export type DialogFooterStylesProps = never; /** * A DialogFooter represents footer content in Dialog, usually shows dialog actions. */ -export const DialogFooter = (React.forwardRef((props, ref) => { +export const DialogFooter = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(DialogFooter.displayName, context.telemetry); setStart(); @@ -62,7 +62,7 @@ export const DialogFooter = (React.forwardRef ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, DialogFooterProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DialogFooterProps> & FluentComponentStaticProps; DialogFooter.displayName = 'DialogFooter'; diff --git a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx index 88e0517617cbbc..7f69b6ed828a23 100644 --- a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx +++ b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx @@ -60,23 +60,12 @@ export const dividerClassName = 'ui-divider'; /** * A Divider visually segments content. */ -export const Divider = (React.forwardRef((props, ref) => { +export const Divider = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Divider.displayName, context.telemetry); setStart(); - const { - children, - color, - fitted, - size, - important, - vertical, - className, - design, - styles, - variables, - accessibility, - } = props; + const { children, color, fitted, size, important, vertical, className, design, styles, variables, accessibility } = + props; const ElementType = getElementType(props); const unhandledProps = useUnhandledProps(Divider.handledProps, props); const getA11yProps = useAccessibility(accessibility, { @@ -118,7 +107,7 @@ export const Divider = (React.forwardRef((props, r ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, DividerProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DividerProps> & FluentComponentStaticProps & { Content: typeof DividerContent; }; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 05d8b4fc35c83d..1d52d1f8749afc 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -387,7 +387,7 @@ const isEmpty = prop => { * [Issue 991203: VoiceOver doesn't narrate properly elements in the input/combobox](https://bugs.chromium.org/p/chromium/issues/detail?id=991203) * [JAWS - ESC (ESCAPE) not closing collapsible listbox (dropdown) on first time #528](https://github.com/FreedomScientific/VFO-standards-support/issues/528) */ -export const Dropdown = (React.forwardRef((props, ref) => { +export const Dropdown = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Dropdown.displayName, context.telemetry); @@ -1103,186 +1103,189 @@ export const Dropdown = (React.forwardRef((props, return index === activeSelectedIndex; }; - const handleItemOverrides = ( - item: ShorthandValue, - index: number, - getItemProps: (options: GetItemPropsOptions>) => any, - selected: boolean, - ) => (predefinedProps: DropdownItemProps) => ({ - accessibilityItemProps: { - ...getItemProps({ - item, - index, - disabled: item['disabled'], - onClick: e => { - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - _.invoke(predefinedProps, 'onClick', e, predefinedProps); - }, - }), - // for single selection the selected item should have aria-selected, instead of the highlighted - ...(!multiple && { - 'aria-selected': selected, - }), - }, - }); + const handleItemOverrides = + ( + item: ShorthandValue, + index: number, + getItemProps: (options: GetItemPropsOptions>) => any, + selected: boolean, + ) => + (predefinedProps: DropdownItemProps) => ({ + accessibilityItemProps: { + ...getItemProps({ + item, + index, + disabled: item['disabled'], + onClick: e => { + e.stopPropagation(); + e.nativeEvent.stopImmediatePropagation(); + _.invoke(predefinedProps, 'onClick', e, predefinedProps); + }, + }), + // for single selection the selected item should have aria-selected, instead of the highlighted + ...(!multiple && { + 'aria-selected': selected, + }), + }, + }); - const handleSelectedItemOverrides = (item: ShorthandValue) => ( - predefinedProps: DropdownSelectedItemProps, - ) => ({ - onRemove: (e: React.SyntheticEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { - handleSelectedItemRemove(e, item, predefinedProps, dropdownSelectedItemProps); - }, - onClick: (e: React.SyntheticEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { - setStateAndInvokeHandler(['onActiveSelectedIndexChange'], null, { - activeSelectedIndex: value.indexOf(item), - }); - e.stopPropagation(); - _.invoke(predefinedProps, 'onClick', e, dropdownSelectedItemProps); - }, - onKeyDown: (e: React.KeyboardEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { - handleSelectedItemKeyDown(e, item, predefinedProps, dropdownSelectedItemProps); - }, - }); + const handleSelectedItemOverrides = + (item: ShorthandValue) => (predefinedProps: DropdownSelectedItemProps) => ({ + onRemove: (e: React.SyntheticEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { + handleSelectedItemRemove(e, item, predefinedProps, dropdownSelectedItemProps); + }, + onClick: (e: React.SyntheticEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { + setStateAndInvokeHandler(['onActiveSelectedIndexChange'], null, { + activeSelectedIndex: value.indexOf(item), + }); + e.stopPropagation(); + _.invoke(predefinedProps, 'onClick', e, dropdownSelectedItemProps); + }, + onKeyDown: (e: React.KeyboardEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { + handleSelectedItemKeyDown(e, item, predefinedProps, dropdownSelectedItemProps); + }, + }); - const handleSearchInputOverrides = ( - highlightedIndex: number, - selectItemAtIndex: (index: number, otherStateToSet?: Partial>, cb?: () => void) => void, - toggleMenu: () => void, - accessibilityComboboxProps: Object, - getInputProps: (options?: GetInputPropsOptions) => any, - ) => (predefinedProps: DropdownSearchInputProps) => { - const handleInputBlur = (e: React.SyntheticEvent, searchInputProps: DropdownSearchInputProps) => { - if (!disabled) { - setFocused(false); - setIsFromKeyboard(detectIsFromKeyboard()); + const handleSearchInputOverrides = + ( + highlightedIndex: number, + selectItemAtIndex: (index: number, otherStateToSet?: Partial>, cb?: () => void) => void, + toggleMenu: () => void, + accessibilityComboboxProps: Object, + getInputProps: (options?: GetInputPropsOptions) => any, + ) => + (predefinedProps: DropdownSearchInputProps) => { + const handleInputBlur = (e: React.SyntheticEvent, searchInputProps: DropdownSearchInputProps) => { + if (!disabled) { + setFocused(false); + setIsFromKeyboard(detectIsFromKeyboard()); - e.nativeEvent['preventDownshiftDefault'] = true; - } + e.nativeEvent['preventDownshiftDefault'] = true; + } - _.invoke(predefinedProps, 'onInputBlur', e, searchInputProps); - }; + _.invoke(predefinedProps, 'onInputBlur', e, searchInputProps); + }; - const handleInputKeyDown = ( - e: React.KeyboardEvent, - searchInputProps: DropdownSearchInputProps, - ) => { - if (!disabled) { - switch (getCode(e)) { - // https://github.com/downshift-js/downshift/issues/1097 - // Downshift skips Home/End if Deopdown is opened - case keyboardKey.Home: - e.nativeEvent['preventDownshiftDefault'] = filteredItems.length === 0; - break; - case keyboardKey.End: - e.nativeEvent['preventDownshiftDefault'] = filteredItems.length === 0; - break; - case keyboardKey.Tab: - e.stopPropagation(); - handleTabSelection(e, highlightedIndex, selectItemAtIndex, toggleMenu); - break; - case keyboardKey.ArrowLeft: - e.stopPropagation(); - if (!context.rtl) { - // https://github.com/testing-library/user-event/issues/709 - // JSDOM does not implement `event.view` so prune this code path in test - if (process.env.NODE_ENV !== 'test') { - setWhatInputSource(e.view.document, 'keyboard'); + const handleInputKeyDown = ( + e: React.KeyboardEvent, + searchInputProps: DropdownSearchInputProps, + ) => { + if (!disabled) { + switch (getCode(e)) { + // https://github.com/downshift-js/downshift/issues/1097 + // Downshift skips Home/End if Deopdown is opened + case keyboardKey.Home: + e.nativeEvent['preventDownshiftDefault'] = filteredItems.length === 0; + break; + case keyboardKey.End: + e.nativeEvent['preventDownshiftDefault'] = filteredItems.length === 0; + break; + case keyboardKey.Tab: + e.stopPropagation(); + handleTabSelection(e, highlightedIndex, selectItemAtIndex, toggleMenu); + break; + case keyboardKey.ArrowLeft: + e.stopPropagation(); + if (!context.rtl) { + // https://github.com/testing-library/user-event/issues/709 + // JSDOM does not implement `event.view` so prune this code path in test + if (process.env.NODE_ENV !== 'test') { + setWhatInputSource(e.view.document, 'keyboard'); + } + trySetLastSelectedItemAsActive(); } - trySetLastSelectedItemAsActive(); - } - break; - case keyboardKey.ArrowRight: - e.stopPropagation(); - if (context.rtl) { - // https://github.com/testing-library/user-event/issues/709 - // JSDOM does not implement `event.view` so prune this code path in test - if (process.env.NODE_ENV !== 'test') { - setWhatInputSource(e.view.document, 'keyboard'); + break; + case keyboardKey.ArrowRight: + e.stopPropagation(); + if (context.rtl) { + // https://github.com/testing-library/user-event/issues/709 + // JSDOM does not implement `event.view` so prune this code path in test + if (process.env.NODE_ENV !== 'test') { + setWhatInputSource(e.view.document, 'keyboard'); + } + trySetLastSelectedItemAsActive(); } - trySetLastSelectedItemAsActive(); - } - break; - case keyboardKey.Backspace: - e.stopPropagation(); - tryRemoveItemFromValue(); - break; - case keyboardKey.Escape: - // If dropdown list is open ESC should close it and not propagate to the parent - // otherwise event should propagate - if (open) { + break; + case keyboardKey.Backspace: e.stopPropagation(); - } - case keyboardKey.ArrowUp: - case keyboardKey.ArrowDown: - if (allowFreeform) { - inListbox.current = true; - } - break; - default: - if (getCode(e) !== keyboardKey.Enter) { - inListbox.current = false; - } - break; + tryRemoveItemFromValue(); + break; + case keyboardKey.Escape: + // If dropdown list is open ESC should close it and not propagate to the parent + // otherwise event should propagate + if (open) { + e.stopPropagation(); + } + case keyboardKey.ArrowUp: + case keyboardKey.ArrowDown: + if (allowFreeform) { + inListbox.current = true; + } + break; + default: + if (getCode(e) !== keyboardKey.Enter) { + inListbox.current = false; + } + break; + } } - } - _.invoke(predefinedProps, 'onInputKeyDown', e, { - ...searchInputProps, - highlightedIndex, - selectItemAtIndex, - }); - }; + _.invoke(predefinedProps, 'onInputKeyDown', e, { + ...searchInputProps, + highlightedIndex, + selectItemAtIndex, + }); + }; - return { - // getInputProps adds Downshift handlers. We also add our own by passing them as params to that function. - // user handlers were also added to our handlers previously, at the beginning of this function. - accessibilityInputProps: { - ...getInputProps({ - disabled, - onBlur: e => { - handleInputBlur(e, predefinedProps); - }, - onKeyDown: e => { - handleInputKeyDown(e, predefinedProps); - }, - onChange: (e: React.ChangeEvent) => { - // we prevent the onChange input event to bubble up to our Dropdown handler, - // since in Dropdown it gets handled as onSearchQueryChange. - e.stopPropagation(); + return { + // getInputProps adds Downshift handlers. We also add our own by passing them as params to that function. + // user handlers were also added to our handlers previously, at the beginning of this function. + accessibilityInputProps: { + ...getInputProps({ + disabled, + onBlur: e => { + handleInputBlur(e, predefinedProps); + }, + onKeyDown: e => { + handleInputKeyDown(e, predefinedProps); + }, + onChange: (e: React.ChangeEvent) => { + // we prevent the onChange input event to bubble up to our Dropdown handler, + // since in Dropdown it gets handled as onSearchQueryChange. + e.stopPropagation(); - // A state modification should be triggered there otherwise it will go to an another frame and will break - // cursor position: - // https://github.com/facebook/react/issues/955#issuecomment-469352730 - setSearchQuery(e.target.value); - }, - 'aria-labelledby': ariaLabelledby, - 'aria-describedby': ariaDescribedby || selectedItemsCountNarrationId, - }), - }, - // same story as above for getRootProps. - accessibilityComboboxProps, + // A state modification should be triggered there otherwise it will go to an another frame and will break + // cursor position: + // https://github.com/facebook/react/issues/955#issuecomment-469352730 + setSearchQuery(e.target.value); + }, + 'aria-labelledby': ariaLabelledby, + 'aria-describedby': ariaDescribedby || selectedItemsCountNarrationId, + }), + }, + // same story as above for getRootProps. + accessibilityComboboxProps, - inputRef: (node: HTMLInputElement) => { - handleRef(predefinedProps.inputRef, node); - inputRef.current = node; - }, - onFocus: (e: React.FocusEvent, searchInputProps: DropdownSearchInputProps) => { - if (!disabled) { - setFocused(true); - setIsFromKeyboard(detectIsFromKeyboard()); - } + inputRef: (node: HTMLInputElement) => { + handleRef(predefinedProps.inputRef, node); + inputRef.current = node; + }, + onFocus: (e: React.FocusEvent, searchInputProps: DropdownSearchInputProps) => { + if (!disabled) { + setFocused(true); + setIsFromKeyboard(detectIsFromKeyboard()); + } - _.invoke(predefinedProps, 'onFocus', e, searchInputProps); - }, - onInputBlur: (e: React.FocusEvent, searchInputProps: DropdownSearchInputProps) => { - handleInputBlur(e, searchInputProps); - }, - onInputKeyDown: (e: React.KeyboardEvent, searchInputProps: DropdownSearchInputProps) => { - handleInputKeyDown(e, searchInputProps); - }, + _.invoke(predefinedProps, 'onFocus', e, searchInputProps); + }, + onInputBlur: (e: React.FocusEvent, searchInputProps: DropdownSearchInputProps) => { + handleInputBlur(e, searchInputProps); + }, + onInputKeyDown: (e: React.KeyboardEvent, searchInputProps: DropdownSearchInputProps) => { + handleInputKeyDown(e, searchInputProps); + }, + }; }; - }; /** * Custom Tab selection logic, at least until Downshift will implement selection on blur. @@ -1804,7 +1807,7 @@ export const Dropdown = (React.forwardRef((props, setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, DropdownProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, DropdownProps> & FluentComponentStaticProps & { Item: typeof DropdownItem; SearchInput: typeof DropdownSearchInput; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx index da524043ceeb35..17c410b54432be 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx @@ -81,7 +81,7 @@ export const dropdownItemSlotClassNames: DropdownItemSlotClassNames = { * A DropdownItem represents an option of Dropdown list. * Displays an item with optional rich media metadata. */ -export const DropdownItem = (React.forwardRef((props, ref) => { +export const DropdownItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(DropdownItem.displayName, context.telemetry); @@ -183,7 +183,7 @@ export const DropdownItem = (React.forwardRef( setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'li', HTMLLIElement, DropdownItemProps> & +}) as unknown as ForwardRefWithAs<'li', HTMLLIElement, DropdownItemProps> & FluentComponentStaticProps; DropdownItem.displayName = 'DropdownItem'; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx index 1a854303e77610..ce6d4747c0abd8 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx @@ -84,7 +84,7 @@ export type DropdownSearchInputStylesProps = Required((props, ref) => { +export const DropdownSearchInput = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(DropdownSearchInput.displayName, context.telemetry); setStart(); @@ -153,7 +153,7 @@ export const DropdownSearchInput = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'input', HTMLInputElement, DropdownSearchInputProps> & FluentComponentStaticProps; DropdownSearchInput.displayName = 'DropdownSearchInput'; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx index 9825b58a82c60e..f9dc355f3a02ba 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx @@ -95,7 +95,7 @@ export type DropdownSelectedItemStylesProps = { hasImage: boolean }; /** * A DropdownSelectedItem represents a selected item of 'multiple-selection' Dropdown. */ -export const DropdownSelectedItem = (React.forwardRef((props, ref) => { +export const DropdownSelectedItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(DropdownSelectedItem.displayName, context.telemetry); setStart(); @@ -213,7 +213,7 @@ export const DropdownSelectedItem = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, DropdownSelectedItemProps> & FluentComponentStaticProps; DropdownSelectedItem.displayName = 'DropdownSelectedItem'; diff --git a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx index 425621805e31e2..504de99858125d 100644 --- a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx +++ b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx @@ -83,7 +83,7 @@ export type EmbedStylesProps = Required> & { iframeLo * A `placeholder` slot represents an [`Image`](/components/image/definition) component, please follow recommendations from its * accessibility section. */ -export const Embed = (React.forwardRef((props, ref) => { +export const Embed = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Embed.displayName, context.telemetry); setStart(); @@ -219,7 +219,7 @@ export const Embed = (React.forwardRef((props, ref) setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, EmbedProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, EmbedProps> & FluentComponentStaticProps; Embed.displayName = 'Embed'; diff --git a/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx b/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx index c81b11ede0b08d..0204e3a7f4a6d0 100644 --- a/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx +++ b/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx @@ -54,7 +54,7 @@ export const flexClassName = 'ui-flex'; /** * A Flex is a layout component that arranges group of items aligned towards common direction (either row or column). */ -export const Flex = (React.forwardRef((props, ref) => { +export const Flex = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Flex.displayName, context.telemetry); setStart(); @@ -120,7 +120,7 @@ export const Flex = (React.forwardRef((props, ref) => setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, FlexProps> & { +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, FlexProps> & { handledProps: (keyof FlexProps)[]; Item: typeof FlexItem; }; diff --git a/packages/fluentui/react-northstar/src/components/Form/Form.tsx b/packages/fluentui/react-northstar/src/components/Form/Form.tsx index dc3ee41afea980..873267d04c86c6 100644 --- a/packages/fluentui/react-northstar/src/components/Form/Form.tsx +++ b/packages/fluentui/react-northstar/src/components/Form/Form.tsx @@ -54,7 +54,7 @@ export type FormStylesProps = never; /** * A Form is used to collect, oprionally validate, and submit the user input, in a structured way. */ -export const Form = (React.forwardRef((props, ref) => { +export const Form = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Form.displayName, context.telemetry); setStart(); @@ -108,7 +108,7 @@ export const Form = (React.forwardRef((props, ref) = ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'form', HTMLFormElement, FormProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'form', HTMLFormElement, FormProps> & FluentComponentStaticProps; Form.displayName = 'Form'; diff --git a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx index ef45fcabc7a585..3dc0052052c266 100644 --- a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx +++ b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx @@ -71,7 +71,7 @@ export type FormFieldStylesProps = Required((props, ref) => { +export const FormField = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(FormField.displayName, context.telemetry); setStart(); @@ -184,7 +184,7 @@ export const FormField = (React.forwardRef((prop ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, FormFieldProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, FormFieldProps> & FluentComponentStaticProps; FormField.displayName = 'FormField'; diff --git a/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx b/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx index 8cac8241a7f074..5cd89c47a2e9e1 100644 --- a/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx +++ b/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx @@ -41,7 +41,7 @@ export type FormFieldCustomStylesProps = Required((props, ref) => { +export const FormFieldCustom = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(FormFieldCustom.displayName, context.telemetry); setStart(); @@ -85,7 +85,7 @@ export const FormFieldCustom = (React.forwardRef & FluentComponentStaticProps; +}) as unknown as React.FC & FluentComponentStaticProps; FormFieldCustom.displayName = 'FormFieldCustom'; diff --git a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx index cc3c214aeb4392..7f5453a63f91a5 100644 --- a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx +++ b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx @@ -43,7 +43,7 @@ export type GridStylesProps = Pick; /** * A Grid is a layout component that harmonizes negative space, by controlling both the row and column alignment. */ -export const Grid = (React.forwardRef((props, ref) => { +export const Grid = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Grid.displayName, context.telemetry); setStart(); @@ -85,7 +85,7 @@ export const Grid = (React.forwardRef((props, ref) => setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, GridProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, GridProps> & FluentComponentStaticProps; Grid.displayName = 'Grid'; diff --git a/packages/fluentui/react-northstar/src/components/Header/Header.tsx b/packages/fluentui/react-northstar/src/components/Header/Header.tsx index 3cd575f42dbd6b..1fcb28e544ef36 100644 --- a/packages/fluentui/react-northstar/src/components/Header/Header.tsx +++ b/packages/fluentui/react-northstar/src/components/Header/Header.tsx @@ -57,7 +57,7 @@ export type HeaderStylesProps = Required> & * 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 const Header = (React.forwardRef((props, ref) => { +export const Header = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Header.displayName, context.telemetry); setStart(); @@ -111,7 +111,7 @@ export const Header = (React.forwardRef((props, setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'h1', HTMLHeadingElement, HeaderProps> & +}) as unknown as ForwardRefWithAs<'h1', HTMLHeadingElement, HeaderProps> & FluentComponentStaticProps & { Description: typeof HeaderDescription; }; diff --git a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx index 383f77133f4914..1ff0c887640952 100644 --- a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx +++ b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx @@ -40,7 +40,7 @@ export type HeaderDescriptionStylesProps = Pick /** * A HeaderDescription provides more detailed information about the Header. */ -export const HeaderDescription = (React.forwardRef((props, ref) => { +export const HeaderDescription = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(HeaderDescription.displayName, context.telemetry); setStart(); @@ -81,7 +81,7 @@ export const HeaderDescription = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'p', HTMLParagraphElement, HeaderDescriptionProps> & FluentComponentStaticProps; HeaderDescription.displayName = 'HeaderDescription'; diff --git a/packages/fluentui/react-northstar/src/components/Image/Image.tsx b/packages/fluentui/react-northstar/src/components/Image/Image.tsx index 89f5ad5fd66c33..49b9bf62ec8b43 100644 --- a/packages/fluentui/react-northstar/src/components/Image/Image.tsx +++ b/packages/fluentui/react-northstar/src/components/Image/Image.tsx @@ -50,7 +50,7 @@ export const imageClassName = 'ui-image'; * - 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 const Image = (React.forwardRef((props, ref) => { +export const Image = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Image.displayName, context.telemetry); setStart(); @@ -100,7 +100,7 @@ export const Image = (React.forwardRef((props, ref setEnd(); return result; -}) as unknown) as ForwardRefWithAs<'img', HTMLImageElement, ImageProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'img', HTMLImageElement, ImageProps> & FluentComponentStaticProps; Image.displayName = 'Image'; Image.defaultProps = { diff --git a/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx b/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx index 2e67b2491c1fb9..6586c32bd67ecc 100644 --- a/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx +++ b/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx @@ -75,77 +75,77 @@ export type ItemLayoutStylesProps = never; /** * (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates. */ -export const ItemLayout: ComponentWithAs<'div', ItemLayoutProps> & - FluentComponentStaticProps = props => { - const context = useFluentContext(); - const { setStart, setEnd } = useTelemetry(ItemLayout.displayName, context.telemetry); - setStart(); - const { - as, - debug, - endMedia, - media, - renderMainArea, - rootCSS, - mediaCSS, - endMediaCSS, - className, - design, - styles, - variables, - } = props; - - const unhandledProps = useUnhandledProps(ItemLayout.handledProps, props); - - const { classes, styles: resolvedStyles } = useStyles(ItemLayout.displayName, { - className: itemLayoutClassName, - mapPropsToInlineStyles: () => ({ +export const ItemLayout: ComponentWithAs<'div', ItemLayoutProps> & FluentComponentStaticProps = + props => { + const context = useFluentContext(); + const { setStart, setEnd } = useTelemetry(ItemLayout.displayName, context.telemetry); + setStart(); + const { + as, + debug, + endMedia, + media, + renderMainArea, + rootCSS, + mediaCSS, + endMediaCSS, className, design, styles, variables, - }), - rtl: context.rtl, - }); - - const startArea = media; - const mainArea = renderMainArea(props, classes); - const endArea = endMedia; - - const mergedMediaClasses = cx(itemLayoutSlotClassNames.media, classes.media); - const mergedEndMediaClasses = cx(itemLayoutSlotClassNames.endMedia, classes.endMedia); - - const element = ( - - {rtlTextContainer.createFor({ element: startArea })} - - ) - } - main={mainArea} - end={ - endArea && ( - - {rtlTextContainer.createFor({ element: endArea })} - - ) - } - {...unhandledProps} - /> - ); - setEnd(); - return element; -}; + } = props; + + const unhandledProps = useUnhandledProps(ItemLayout.handledProps, props); + + const { classes, styles: resolvedStyles } = useStyles(ItemLayout.displayName, { + className: itemLayoutClassName, + mapPropsToInlineStyles: () => ({ + className, + design, + styles, + variables, + }), + rtl: context.rtl, + }); + + const startArea = media; + const mainArea = renderMainArea(props, classes); + const endArea = endMedia; + + const mergedMediaClasses = cx(itemLayoutSlotClassNames.media, classes.media); + const mergedEndMediaClasses = cx(itemLayoutSlotClassNames.endMedia, classes.endMedia); + + const element = ( + + {rtlTextContainer.createFor({ element: startArea })} + + ) + } + main={mainArea} + end={ + endArea && ( + + {rtlTextContainer.createFor({ element: endArea })} + + ) + } + {...unhandledProps} + /> + ); + setEnd(); + return element; + }; ItemLayout.displayName = 'ItemLayout'; diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx index c77d39c0e63162..519a5555a375bc 100644 --- a/packages/fluentui/react-northstar/src/components/Label/Label.tsx +++ b/packages/fluentui/react-northstar/src/components/Label/Label.tsx @@ -68,7 +68,7 @@ export const labelClassName = 'ui-label'; /** * A Label allows user to classify content. */ -export const Label = (React.forwardRef((props, ref) => { +export const Label = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Label.displayName, context.telemetry); setStart(); @@ -168,7 +168,7 @@ export const Label = (React.forwardRef((props, ref) setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, LabelProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, LabelProps> & FluentComponentStaticProps; Label.displayName = 'Label'; diff --git a/packages/fluentui/react-northstar/src/components/List/List.tsx b/packages/fluentui/react-northstar/src/components/List/List.tsx index 4e9c0dac0f3aa7..1698b2784ec43a 100644 --- a/packages/fluentui/react-northstar/src/components/List/List.tsx +++ b/packages/fluentui/react-northstar/src/components/List/List.tsx @@ -89,7 +89,7 @@ export const listClassName = 'ui-list'; * [JAWS - Listbox options are not reachable in Virtual Cursor PC mode #517](https://github.com/FreedomScientific/VFO-standards-support/issues/517) * [JAWS - Aria-selected is not narrated for the single-select listbox, when selection is NOT moved with focus #440](https://github.com/FreedomScientific/VFO-standards-support/issues/440) */ -export const List = (React.forwardRef((props, ref) => { +export const List = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(List.displayName, context.telemetry); setStart(); @@ -182,7 +182,7 @@ export const List = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'ul', HTMLUListElement, ListProps> & FluentComponentStaticProps & { Item: typeof ListItem; ItemContent: typeof ListItemContent; diff --git a/packages/fluentui/react-northstar/src/components/List/ListItem.tsx b/packages/fluentui/react-northstar/src/components/List/ListItem.tsx index fd8f15a0a23178..d7777440847305 100644 --- a/packages/fluentui/react-northstar/src/components/List/ListItem.tsx +++ b/packages/fluentui/react-northstar/src/components/List/ListItem.tsx @@ -82,7 +82,7 @@ export const listItemSlotClassNames: ListItemSlotClassNames = { /** * A ListItem contains a single piece of content within a List. */ -export const ListItem = (React.forwardRef((props, ref) => { +export const ListItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(ListItem.displayName, context.telemetry); @@ -221,7 +221,7 @@ export const ListItem = (React.forwardRef((props, setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'li', HTMLLIElement, ListItemProps & { index: number }> & +}) as unknown as ForwardRefWithAs<'li', HTMLLIElement, ListItemProps & { index: number }> & FluentComponentStaticProps; ListItem.displayName = 'ListItem'; diff --git a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx index 122d7eb8b495ef..0f2d4c0948fd5f 100644 --- a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx +++ b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx @@ -76,23 +76,12 @@ export type LoaderStylesProps = Pick((props, ref) => { +export const Loader = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Loader.displayName, context.telemetry); setStart(); - const { - delay, - secondary, - label, - indicator, - inline, - labelPosition, - className, - design, - styles, - variables, - size, - } = props; + const { delay, secondary, label, indicator, inline, labelPosition, className, design, styles, variables, size } = + props; const ElementType = getElementType(props); const unhandledProps = useUnhandledProps(Loader.handledProps, props); @@ -174,7 +163,7 @@ export const Loader = (React.forwardRef((props, ref ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, LoaderProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, LoaderProps> & FluentComponentStaticProps & { shorthandConfig: ShorthandConfig; }; diff --git a/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx b/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx index 524ee2faceb571..943cb288d62a40 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx @@ -152,7 +152,7 @@ function useSlotProps( * [Enter into a tablist JAWS narrates: To switch pages, press Control+PageDown](https://github.com/FreedomScientific/VFO-standards-support/issues/337) * 51114083 VoiceOver+Web narrate wrong position in menu / total count of menu items, when pseudo element ::after or ::before is used */ -export const Menu = (React.forwardRef((props, ref) => { +export const Menu = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Menu.displayName, context.telemetry); setStart(); @@ -349,7 +349,7 @@ export const Menu = (React.forwardRef((props, ref) setEnd(); return wrappedElement; -}) as unknown) as ForwardRefWithAs<'ul', HTMLUListElement, MenuProps> & +}) as unknown as ForwardRefWithAs<'ul', HTMLUListElement, MenuProps> & FluentComponentStaticProps & { create: ShorthandFactory; shorthandConfig: ShorthandConfig; diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx index 0c972c1fb7f40b..00ad5358cf9104 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx @@ -48,16 +48,16 @@ export const menuDividerClassName = 'ui-menu__divider'; /** * A MenuDivider is non-actionable element that visually segments items of Menu. */ -export const MenuDivider = (React.forwardRef((inputProps, ref) => { +export const MenuDivider = React.forwardRef((inputProps, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuDivider.displayName, context.telemetry); setStart(); - const parentProps = (useContextSelectors(MenuContext, { + const parentProps = useContextSelectors(MenuContext, { variables: v => v.variables, slotProps: v => v.slotProps.divider, accessibility: v => v.behaviors.divider, - }) as unknown) as MenuDividerSubscribedValue; // TODO: we should improve typings for the useContextSelectors + }) as unknown as MenuDividerSubscribedValue; // TODO: we should improve typings for the useContextSelectors const props = { ...parentProps.slotProps, @@ -126,8 +126,7 @@ export const MenuDivider = (React.forwardRef((i setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'li', HTMLLIElement, MenuDividerProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'li', HTMLLIElement, MenuDividerProps> & FluentComponentStaticProps; MenuDivider.defaultProps = { as: 'li', diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx index b4f123bdb20356..084a115961a656 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx @@ -180,19 +180,19 @@ export const menuItemSlotClassNames: MenuItemSlotClassNames = { /** * A MenuItem is an actionable item within a Menu. */ -export const MenuItem = (React.forwardRef((inputProps, ref) => { +export const MenuItem = React.forwardRef((inputProps, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuItem.displayName, context.telemetry); setStart(); - const parentProps = (useContextSelectors(MenuContext, { + const parentProps = useContextSelectors(MenuContext, { active: v => v.activeIndex === inputProps.index, onItemClick: v => v.onItemClick, onItemSelect: v => v.onItemSelect, variables: v => v.variables, slotProps: v => v.slotProps.item, accessibility: v => v.behaviors.item, - }) as unknown) as MenuItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors + }) as unknown as MenuItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors const props = { ...parentProps.slotProps, @@ -323,7 +323,7 @@ export const MenuItem = (React.forwardRef((inp const performClick = (e: React.MouseEvent | React.KeyboardEvent) => { if (menu) { - if (doesNodeContainClick(menuRef.current, (e as unknown) as MouseEvent, context.target)) { + if (doesNodeContainClick(menuRef.current, e as unknown as MouseEvent, context.target)) { // submenu was clicked => close it and propagate trySetMenuOpen(false, e, () => focusAsync(itemRef.current)); } else { @@ -585,7 +585,7 @@ export const MenuItem = (React.forwardRef((inp setEnd(); return menuItemInner; -}) as unknown) as ForwardRefWithAs<'a', HTMLAnchorElement, MenuItemProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'a', HTMLAnchorElement, MenuItemProps> & FluentComponentStaticProps; MenuItem.displayName = 'MenuItem'; diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx index a0869f831e33a3..48747c8002af49 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx @@ -48,14 +48,14 @@ export const menuItemContentClassName = 'ui-menu__itemcontent'; /** * A MenuItemContent allows a user to have a dedicated component that can be targeted from the theme. */ -export const MenuItemContent = (React.forwardRef((props, ref) => { +export const MenuItemContent = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuItemContent.displayName, context.telemetry); setStart(); - const parentProps = (useContextSelectors(MenuContext, { + const parentProps = useContextSelectors(MenuContext, { vertical: v => v.vertical, - }) as unknown) as MenuItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors + }) as unknown as MenuItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors const { className, children, design, styles, variables, content, hasMenu, hasIcon, vertical, inSubmenu } = props; @@ -99,7 +99,7 @@ export const MenuItemContent = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, MenuItemContentProps> & FluentComponentStaticProps; MenuItemContent.displayName = 'MenuItemContent'; diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx index 34212cd3692166..f181d0713b5018 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx @@ -34,7 +34,7 @@ export const menuItemIconClassName = 'ui-menu__itemicon'; /** * A MenuItemIcon allows a user to have a dedicated component that can be targeted from the theme. */ -export const MenuItemIcon = (React.forwardRef((props, ref) => { +export const MenuItemIcon = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuItemIcon.displayName, context.telemetry); setStart(); @@ -72,7 +72,7 @@ export const MenuItemIcon = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, MenuItemIconProps> & FluentComponentStaticProps; MenuItemIcon.displayName = 'MenuItemIcon'; diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx index 4044b0eae10839..6f7228cdd6c876 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx @@ -47,7 +47,7 @@ export const menuItemIndicatorClassName = 'ui-menu__itemindicator'; /** * A MenuItemIndicator allows a user to have a dedicated component that can be targeted from the theme. */ -export const MenuItemIndicator = (React.forwardRef((props, ref) => { +export const MenuItemIndicator = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuItemIndicator.displayName, context.telemetry); setStart(); @@ -102,7 +102,7 @@ export const MenuItemIndicator = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, MenuItemIndicatorProps> & FluentComponentStaticProps; MenuItemIndicator.displayName = 'MenuItemIndicator'; diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx index e3c6c4515e25a6..92f2ba06f1bd55 100644 --- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx +++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx @@ -80,7 +80,7 @@ export const menuItemWrapperClassName = 'ui-menu__itemwrapper'; /** * A MenuItemWrapper allows a user to have a dedicated component that can be targeted from the theme. */ -export const MenuItemWrapper = (React.forwardRef((props, ref) => { +export const MenuItemWrapper = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuItemWrapper.displayName, context.telemetry); setStart(); @@ -145,7 +145,7 @@ export const MenuItemWrapper = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'li', HTMLLIElement, MenuItemWrapperProps> & FluentComponentStaticProps; MenuItemWrapper.displayName = 'MenuItemWrapper'; diff --git a/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx b/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx index a8a941a6327f9f..3cb1f1a26b5915 100644 --- a/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx +++ b/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx @@ -108,7 +108,7 @@ export type MenuButtonStylesProps = never; * A MenuButton displays a menu connected to trigger element. * @accessibility */ -export const MenuButton = (React.forwardRef((props, ref) => { +export const MenuButton = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(MenuButton.displayName, context.telemetry); setStart(); @@ -303,8 +303,7 @@ export const MenuButton = (React.forwardRef((pr ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, MenuButtonProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, MenuButtonProps> & FluentComponentStaticProps; MenuButton.displayName = 'MenuButton'; diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx index 179b0c0f0a7d08..5a4a64ac977bcd 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx @@ -119,7 +119,7 @@ export const pillClassName = 'ui-pill'; /** * Pills should be used when representing an input, as a way to filter content, or to represent an attribute. */ -export const Pill = (React.forwardRef((props, ref) => { +export const Pill = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Pill.displayName, context.telemetry); setStart(); @@ -260,7 +260,7 @@ export const Pill = (React.forwardRef((props, ref) = setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, PillProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, PillProps> & FluentComponentStaticProps; Pill.defaultProps = { as: 'span' as const, diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx index 5f09bf4cd898e7..4c973b69f191cf 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx @@ -39,7 +39,7 @@ export const pillActionClassName = 'ui-pill__action'; /** * A PillAction allows user to execute an action. */ -export const PillAction = (React.forwardRef((props, ref) => { +export const PillAction = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(PillAction.displayName, context.telemetry); setStart(); @@ -77,8 +77,7 @@ export const PillAction = (React.forwardRef((pr setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, PillActionProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, PillActionProps> & FluentComponentStaticProps; PillAction.displayName = 'PillAction'; diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx index ac547c995fcbc6..801c6b1782b16c 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx @@ -45,7 +45,7 @@ export const pillContentClassName = 'ui-pillcontent'; /** * A PillContent allows user to classify content. */ -export const PillContent = (React.forwardRef((props, ref) => { +export const PillContent = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(PillContent.displayName, context.telemetry); setStart(); @@ -83,7 +83,7 @@ export const PillContent = (React.forwardRef( setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, PillContentProps> & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, PillContentProps> & FluentComponentStaticProps; PillContent.displayName = 'PillContent'; diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx index 9889e3283cc565..e73b5d94e8e93c 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx @@ -33,7 +33,7 @@ export const pillGroupClassName = 'ui-pills'; /** * A PillGroup can be used as container for Pill. */ -export const PillGroup = (React.forwardRef((props, ref) => { +export const PillGroup = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(PillGroup.displayName, context.telemetry); setStart(); @@ -78,7 +78,7 @@ export const PillGroup = (React.forwardRef((prop setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, PillGroupProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, PillGroupProps> & FluentComponentStaticProps; PillGroup.displayName = 'PillGroup'; diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx index 46298a7b0f1b48..abdf83882e19c0 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx @@ -53,7 +53,7 @@ export const pillIconClassName = 'ui-pill__icon'; /** * A PillIcon allows user set an icon. */ -export const PillIcon = (React.forwardRef((props, ref) => { +export const PillIcon = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(PillIcon.displayName, context.telemetry); setStart(); @@ -90,7 +90,7 @@ export const PillIcon = (React.forwardRef((props setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, PillIconProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, PillIconProps> & FluentComponentStaticProps; PillIcon.defaultProps = { accessibility: pillIconBehavior, diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx index 67408517af938c..727253a6a59e31 100644 --- a/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx +++ b/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx @@ -33,7 +33,7 @@ export const pillImageClassName = 'ui-pill__image'; /** * An PillImage is a graphic representation used by Pill. */ -export const PillImage = (React.forwardRef((props, ref) => { +export const PillImage = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(PillImage.displayName, context.telemetry); @@ -69,8 +69,7 @@ export const PillImage = (React.forwardRef((pr setEnd(); return result; -}) as unknown) as ForwardRefWithAs<'img', HTMLImageElement, PillImageProps> & - FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'img', HTMLImageElement, PillImageProps> & FluentComponentStaticProps; PillImage.displayName = 'PillImage'; diff --git a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx index 837f3d20a0a5c9..c8806ab67a24da 100644 --- a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx +++ b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx @@ -433,67 +433,69 @@ export const Popup: React.FC & return relatedTarget && !(isInsideContent || isInsideTarget); }; - const renderPopperChildren = classes => ({ placement, scheduleUpdate }: PopperChildrenProps) => { - const content = renderContent ? renderContent(scheduleUpdate) : props.content; - const popupContent = Popup.Content.create(content || {}, { - defaultProps: () => - getA11yProps('popup', { - ...getContentProps(), - placement, - pointing, - pointerRef: pointerTargetRef, - trapFocus, - autoFocus, - autoSize, - className: classes, - }), - overrideProps: getContentProps, - }); - - return ( - - {(getRefs, nestingRef) => ( - <> - { - popupContentRef.current = domElement; - handleRef(contentRef, domElement); - nestingRef.current = domElement; - }} - > - {popupContent} - - - {context.target && ( - <> - - - - - - {(isOpenedByRightClick || closeOnScroll) && ( - <> - - - - )} - - )} - - )} - - ); - }; + const renderPopperChildren = + classes => + ({ placement, scheduleUpdate }: PopperChildrenProps) => { + const content = renderContent ? renderContent(scheduleUpdate) : props.content; + const popupContent = Popup.Content.create(content || {}, { + defaultProps: () => + getA11yProps('popup', { + ...getContentProps(), + placement, + pointing, + pointerRef: pointerTargetRef, + trapFocus, + autoFocus, + autoSize, + className: classes, + }), + overrideProps: getContentProps, + }); + + return ( + + {(getRefs, nestingRef) => ( + <> + { + popupContentRef.current = domElement; + handleRef(contentRef, domElement); + nestingRef.current = domElement; + }} + > + {popupContent} + + + {context.target && ( + <> + + + + + + {(isOpenedByRightClick || closeOnScroll) && ( + <> + + + + )} + + )} + + )} + + ); + }; const dismissOnScroll = (e: TouchEvent | WheelEvent) => { // we only need to dismiss if the scroll happens outside the popup diff --git a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx index 20c436999530a4..ff313c8950477d 100644 --- a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx @@ -90,7 +90,7 @@ export const popupContentSlotClassNames: PopupContentSlotClassNames = { /** * A PopupContent displays the content of a Popup component. */ -export const PopupContent = (React.forwardRef((props, ref) => { +export const PopupContent = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(PopupContent.displayName, context.telemetry); setStart(); @@ -188,7 +188,7 @@ export const PopupContent = (React.forwardRef setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, PopupContentProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, PopupContentProps> & FluentComponentStaticProps; PopupContent.displayName = 'PopupContent'; diff --git a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx index 7b4ff19bb74df5..7add057c000c75 100644 --- a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx +++ b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx @@ -136,11 +136,10 @@ export const Provider: ComponentWithAs<'div', ProviderProps> & { }), [props.disableAnimations, props.performance, props.rtl, props.target, telemetry, props.theme], ); - const outgoingContext = React.useMemo(() => mergeProviderContexts(createRenderer, incomingContext, inputContext), [ - createRenderer, - incomingContext, - inputContext, - ]); + const outgoingContext = React.useMemo( + () => mergeProviderContexts(createRenderer, incomingContext, inputContext), + [createRenderer, incomingContext, inputContext], + ); const rtlProps: { dir?: 'rtl' | 'ltr' } = {}; // only add dir attribute for top level provider or when direction changes from parent to child diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx index 72cc5fcf22b34d..a7406574b83544 100644 --- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx @@ -62,7 +62,7 @@ export type RadioGroupStylesProps = Required>; * @accessibilityIssues * [JAWS narrates instruction message on each radio in radiogroup](https://github.com/FreedomScientific/VFO-standards-support/issues/473) */ -export const RadioGroup = (React.forwardRef((props, ref) => { +export const RadioGroup = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(RadioGroup.displayName, context.telemetry); setStart(); @@ -205,7 +205,7 @@ export const RadioGroup = (React.forwardRef((pr setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, RadioGroupProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, RadioGroupProps> & FluentComponentStaticProps & { Item: typeof RadioGroupItem; }; diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx index 4bcd5418ce2b73..ed668ae1207851 100644 --- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx +++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx @@ -93,22 +93,12 @@ export type RadioGroupItemStylesProps = Required((props, ref) => { +export const RadioGroupItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(RadioGroupItem.displayName, context.telemetry); setStart(); - const { - label, - checkedIndicator, - indicator, - disabled, - vertical, - className, - design, - styles, - variables, - shouldFocus, - } = props; + const { label, checkedIndicator, indicator, disabled, vertical, className, design, styles, variables, shouldFocus } = + props; const elementRef = React.useRef(); const ElementType = getElementType(props); const unhandledProps = useUnhandledProps(RadioGroupItem.handledProps, props); @@ -209,7 +199,7 @@ export const RadioGroupItem = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, RadioGroupItemProps> & FluentComponentStaticProps; RadioGroupItem.displayName = 'RadioGroupItem'; diff --git a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx index 02bd4cd48f2d4f..302cb496860143 100644 --- a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx +++ b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx @@ -57,7 +57,7 @@ export const reactionSlotClassNames: ReactionSlotClassNames = { * A Reaction indicates user's emotion or perception. * Used to display user's reaction for entity in Chat (e.g. message). */ -export const Reaction = (React.forwardRef((props, ref) => { +export const Reaction = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Reaction.displayName, context.telemetry); setStart(); @@ -118,7 +118,7 @@ export const Reaction = (React.forwardRef((props setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, ReactionProps> & +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, ReactionProps> & FluentComponentStaticProps & { Group: typeof ReactionGroup; }; diff --git a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx index b1680d28e2c5e8..726098049fa3f5 100644 --- a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx @@ -41,7 +41,7 @@ export type ReactionGroupStylesProps = never; /** * A ReactionGroup groups multiple Reaction elements. */ -export const ReactionGroup = (React.forwardRef((props, ref) => { +export const ReactionGroup = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(ReactionGroup.displayName, context.telemetry); setStart(); @@ -91,7 +91,7 @@ export const ReactionGroup = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, ReactionGroupProps> & FluentComponentStaticProps; ReactionGroup.displayName = 'ReactionGroup'; diff --git a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx index c4163dd068c679..e1f3b046bd4621 100644 --- a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx +++ b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx @@ -48,7 +48,7 @@ export const segmentClassName = 'ui-segment'; /** * A Segment visually groups related content. */ -export const Segment = (React.forwardRef((props, ref) => { +export const Segment = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Segment.displayName, context.telemetry); setStart(); @@ -92,7 +92,7 @@ export const Segment = (React.forwardRef((props, r setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, SegmentProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, SegmentProps> & FluentComponentStaticProps; Segment.displayName = 'Segment'; diff --git a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx index 72a06793000eea..c18ea79319ada3 100644 --- a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx +++ b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx @@ -126,7 +126,7 @@ export const sliderSlotClassNames: SliderSlotClassNames = { * [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 const Slider = (React.forwardRef((props, ref) => { +export const Slider = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Slider.displayName, context.telemetry); setStart(); @@ -159,7 +159,12 @@ export const Slider = (React.forwardRef((props, r value: value as string, }), }); - const { min: numericMin, max: numericMax, value: numericValue, valueAsPercentage } = processInputValues({ + const { + min: numericMin, + max: numericMax, + value: numericValue, + valueAsPercentage, + } = processInputValues({ min, max, value: state.value || '', @@ -259,7 +264,7 @@ export const Slider = (React.forwardRef((props, r setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'input', HTMLInputElement, SliderProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'input', HTMLInputElement, SliderProps> & FluentComponentStaticProps; Slider.displayName = 'Slider'; diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx index ec8ba5a9c1c385..729d9f7857bb62 100644 --- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx +++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx @@ -110,7 +110,7 @@ export type SplitButtonStylesProps = Required> & /** * A SplitButton enables users to take one of several related actions, one being dominant and rest being displayed in a menu. */ -export const SplitButton = (React.forwardRef((props, ref) => { +export const SplitButton = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(SplitButton.displayName, context.telemetry); setStart(); @@ -281,7 +281,7 @@ export const SplitButton = (React.forwardRef(( setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, SplitButtonProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, SplitButtonProps> & FluentComponentStaticProps & { Toggle: typeof SplitButtonToggle; }; diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx index 5946c50e8ae9e0..c7f6381114436b 100644 --- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx +++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx @@ -42,7 +42,7 @@ export const SplitButtonDividerClassName = 'ui-splitButtonDivider'; /** * A SplitButtonDivider visually segments content. */ -export const SplitButtonDivider = (React.forwardRef((props, ref) => { +export const SplitButtonDivider = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(SplitButtonDivider.displayName, context.telemetry); setStart(); @@ -79,7 +79,7 @@ export const SplitButtonDivider = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, SplitButtonDividerProps> & FluentComponentStaticProps; SplitButtonDivider.displayName = 'SplitButtonDivider'; diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx index de9058c77131a7..05e72e34ac7051 100644 --- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx +++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx @@ -63,7 +63,7 @@ export const splitButtonToggleClassName = 'ui-splitbutton__toggle'; * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. */ -export const SplitButtonToggle = (React.forwardRef( +export const SplitButtonToggle = React.forwardRef( (props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(SplitButtonToggle.displayName, context.telemetry); @@ -148,7 +148,7 @@ export const SplitButtonToggle = (React.forwardRef & +) as unknown as ForwardRefWithAs<'button', HTMLButtonElement, SplitButtonToggleProps> & FluentComponentStaticProps; SplitButtonToggle.defaultProps = { diff --git a/packages/fluentui/react-northstar/src/components/Status/Status.tsx b/packages/fluentui/react-northstar/src/components/Status/Status.tsx index f5f3e5cfa8c099..34d28ae7ae4fd7 100644 --- a/packages/fluentui/react-northstar/src/components/Status/Status.tsx +++ b/packages/fluentui/react-northstar/src/components/Status/Status.tsx @@ -42,7 +42,7 @@ export const statusClassName = 'ui-status'; * @accessibility * Implements [ARIA img](https://www.w3.org/TR/wai-aria-1.1/#img) role. */ -export const Status = (React.forwardRef((props, ref) => { +export const Status = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Status.displayName, context.telemetry); setStart(); @@ -86,7 +86,7 @@ export const Status = (React.forwardRef((props, re setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, StatusProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, StatusProps> & FluentComponentStaticProps; Status.displayName = 'Status'; Status.propTypes = { diff --git a/packages/fluentui/react-northstar/src/components/Table/Table.tsx b/packages/fluentui/react-northstar/src/components/Table/Table.tsx index 96f7971aea5fa9..18b901030c153c 100644 --- a/packages/fluentui/react-northstar/src/components/Table/Table.tsx +++ b/packages/fluentui/react-northstar/src/components/Table/Table.tsx @@ -75,7 +75,7 @@ export type TableStylesProps = never; * [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 const Table = (React.forwardRef((props, ref) => { +export const Table = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Table.displayName, context.telemetry); setStart(); @@ -150,7 +150,7 @@ export const Table = (React.forwardRef((props, ref) ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, TableProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, TableProps> & FluentComponentStaticProps & { Cell: typeof TableCell; Row: typeof TableRow; diff --git a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx index b58bd12204c232..fb48141863298b 100644 --- a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx +++ b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx @@ -55,7 +55,7 @@ export const tableCellSlotClassNames: TableCellSlotClassNames = { /** * Component represents a table cell. */ -export const TableCell = (React.forwardRef((props, ref) => { +export const TableCell = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(TableCell.displayName, context.telemetry); setStart(); @@ -117,7 +117,7 @@ export const TableCell = (React.forwardRef((prop ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, TableCellProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, TableCellProps> & FluentComponentStaticProps; TableCell.displayName = 'TableCell'; diff --git a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx index a1105ea103f852..061f18ab8f5637 100644 --- a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx +++ b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx @@ -53,7 +53,7 @@ export type TableRowStylesProps = Pick; /** * Component represents a single row in a tabular structure */ -export const TableRow = (React.forwardRef((props, ref) => { +export const TableRow = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(TableRow.displayName, context.telemetry); setStart(); @@ -128,7 +128,7 @@ export const TableRow = (React.forwardRef((props, ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, TableRowProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, TableRowProps> & FluentComponentStaticProps; TableRow.displayName = 'TableRow'; diff --git a/packages/fluentui/react-northstar/src/components/Text/Text.tsx b/packages/fluentui/react-northstar/src/components/Text/Text.tsx index 139ee16cf2af1b..abfa1b2fb1677e 100644 --- a/packages/fluentui/react-northstar/src/components/Text/Text.tsx +++ b/packages/fluentui/react-northstar/src/components/Text/Text.tsx @@ -92,7 +92,7 @@ export const textClassName = 'ui-text'; /** * A Text consistently styles and formats occurrences of text. */ -export const Text = (React.forwardRef((props, ref) => { +export const Text = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Text.displayName, context.telemetry); setStart(); @@ -167,7 +167,7 @@ export const Text = (React.forwardRef((props, ref) = setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, TextProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, TextProps> & FluentComponentStaticProps; Text.displayName = 'Text'; diff --git a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx index 995802ecb11047..7cc9681081399c 100644 --- a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx +++ b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx @@ -66,7 +66,7 @@ export const textAreaClassName = 'ui-textarea'; * [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 const TextArea = (React.forwardRef((props, ref) => { +export const TextArea = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(TextArea.displayName, context.telemetry); @@ -131,7 +131,7 @@ export const TextArea = (React.forwardRef((p ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'textarea', HTMLTextAreaElement, TextAreaProps> & +}) as unknown as ForwardRefWithAs<'textarea', HTMLTextAreaElement, TextAreaProps> & FluentComponentStaticProps; TextArea.displayName = 'TextArea'; diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx index 15f099ad6aad49..3195928e80a557 100644 --- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx @@ -143,9 +143,9 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles const parentVariables = React.useContext(ToolbarVariablesContext); const mergedVariables = mergeVariablesOverrides(parentVariables, variables); - const { menuSlot } = (useContextSelectors(ToolbarMenuContext, { + const { menuSlot } = useContextSelectors(ToolbarMenuContext, { menuSlot: v => v.slots.menu, - }) as unknown) as ToolbarItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors + }) as unknown as ToolbarItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors const getA11yProps = useAccessibility(accessibility, { debugName: composeOptions.displayName, diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx index 3a78c14b67dbdb..0e99f2d731be30 100644 --- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx @@ -171,9 +171,9 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe const itemRef = React.useRef(); const menuRef = React.useRef(); - const { menuSlot } = (useContextSelectors(ToolbarMenuContext, { + const { menuSlot } = useContextSelectors(ToolbarMenuContext, { menuSlot: v => v.slots.menu, - }) as unknown) as ToolbarItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors + }) as unknown as ToolbarItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors const parentVariables = React.useContext(ToolbarVariablesContext); const mergedVariables = mergeVariablesOverrides(parentVariables, variables); diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx index 3e555d2d0aa764..607ea7dbe4ceb0 100644 --- a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx @@ -57,7 +57,7 @@ export const tooltipContentClassName = 'ui-tooltip__content'; /** * A TooltipContent contains the content of a Tooltip component. */ -export const TooltipContent = (React.forwardRef((props, ref) => { +export const TooltipContent = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(TooltipContent.displayName, context.telemetry); setStart(); @@ -120,7 +120,7 @@ export const TooltipContent = (React.forwardRef & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, TooltipContentProps> & FluentComponentStaticProps; TooltipContent.displayName = 'TooltipContent'; diff --git a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx index e23baa14ce6a3b..736767de3c8f58 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx +++ b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx @@ -109,7 +109,7 @@ export type TreeStylesProps = never; * [Tree as table in Mac > VoiceOver narrates " 0 items enclosed " when user navigates to expaded treeitem](https://bugs.chromium.org/p/chromium/issues/detail?id=1273540) * [Tree as table in Mac > VoiceOver doesn't narrate aria-labelledby element on treeitem](https://bugs.chromium.org/p/chromium/issues/detail?id=1273544) */ -export const Tree = (React.forwardRef((props, ref) => { +export const Tree = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Tree.displayName, context.telemetry); setStart(); @@ -211,7 +211,7 @@ export const Tree = (React.forwardRef((props, ref) => ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, TreeProps> & +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, TreeProps> & FluentComponentStaticProps & { Item: typeof TreeItem; Title: typeof TreeTitle; diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx index b41ce04d928e83..0c981474e22435 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx @@ -124,7 +124,7 @@ export const treeItemClassName = 'ui-tree__item'; * @accessibility * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. */ -export const TreeItem = (React.forwardRef((props, ref) => { +export const TreeItem = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(TreeItem.displayName, context.telemetry); setStart(); @@ -334,7 +334,7 @@ export const TreeItem = (React.forwardRef((props, setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, TreeItemProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'div', HTMLDivElement, TreeItemProps> & FluentComponentStaticProps; TreeItem.displayName = 'TreeItem'; diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx index b10ae5cd710c07..9896666dda0522 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx +++ b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx @@ -99,7 +99,7 @@ export const treeTitleSlotClassNames = { /** * A TreeTitle renders a title of TreeItem. */ -export const TreeTitle = (React.forwardRef((props, ref) => { +export const TreeTitle = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(TreeTitle.displayName, context.telemetry); setStart(); @@ -226,7 +226,7 @@ export const TreeTitle = (React.forwardRef((p setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'a', HTMLAnchorElement, TreeTitleProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'a', HTMLAnchorElement, TreeTitleProps> & FluentComponentStaticProps; TreeTitle.displayName = 'TreeTitle'; diff --git a/packages/fluentui/react-northstar/src/components/Tree/hooks/useTree.ts b/packages/fluentui/react-northstar/src/components/Tree/hooks/useTree.ts index 5ffb77aa7f48fd..e2b552c74fb66b 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/hooks/useTree.ts +++ b/packages/fluentui/react-northstar/src/components/Tree/hooks/useTree.ts @@ -116,11 +116,10 @@ export function useTree(options: UseTreeOptions): UseTreeResult { }); // We want to set `visibleItemIds` to simplify rendering later - const { flatTree, visibleItemIds } = React.useMemo(() => flattenTree(options.items, activeItemIds, selectedItemIds), [ - activeItemIds, - options.items, - selectedItemIds, - ]); + const { flatTree, visibleItemIds } = React.useMemo( + () => flattenTree(options.items, activeItemIds, selectedItemIds), + [activeItemIds, options.items, selectedItemIds], + ); const getItemById = useGetItemById(flatTree); diff --git a/packages/fluentui/react-northstar/src/components/Video/Video.tsx b/packages/fluentui/react-northstar/src/components/Video/Video.tsx index 4d03a236145e3c..c36e0d265a017d 100644 --- a/packages/fluentui/react-northstar/src/components/Video/Video.tsx +++ b/packages/fluentui/react-northstar/src/components/Video/Video.tsx @@ -47,7 +47,7 @@ export type VideoStylesProps = Required>; /** * A Video provides ability to embed video content. */ -export const Video = (React.forwardRef((props, ref) => { +export const Video = React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Video.displayName, context.telemetry); setStart(); @@ -105,7 +105,7 @@ export const Video = (React.forwardRef((props, ref ); setEnd(); return element; -}) as unknown) as ForwardRefWithAs<'video', HTMLVideoElement, VideoProps> & FluentComponentStaticProps; +}) as unknown as ForwardRefWithAs<'video', HTMLVideoElement, VideoProps> & FluentComponentStaticProps; Video.create = createShorthandFactory({ Component: Video, mappedProp: 'src' }); diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesComfyRefresh.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesComfyRefresh.ts index 75825264f73bde..3f1a0fcd19bff8 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesComfyRefresh.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesComfyRefresh.ts @@ -13,176 +13,174 @@ const displayActionMenu = (overlayZIndex: ICSSInJSStyle['zIndex']): ICSSInJSStyl width: 'auto', }); -export const chatMessageStylesComfyRefresh: ComponentSlotStylesPrepared< - ChatMessageStylesProps, - ChatMessageVariables -> = { - root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { - const borderFocusStyles = getBorderFocusStyles({ - borderRadius: 'inherit', - variables: theme.siteVariables, - // Fixes the bubble focus border rendering on top of the user avatar - zIndex: 'initial', - }); - - return { - display: 'flex', - flexDirection: 'column', - alignItems: p.mine ? 'flex-end' : 'flex-start', - outline: 'none', - - [`&:focus-visible .${chatMessageSlotClassNames.timestamp}`]: { - opacity: 1, - }, +export const chatMessageStylesComfyRefresh: ComponentSlotStylesPrepared = + { + root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { + const borderFocusStyles = getBorderFocusStyles({ + borderRadius: 'inherit', + variables: theme.siteVariables, + // Fixes the bubble focus border rendering on top of the user avatar + zIndex: 'initial', + }); + + return { + display: 'flex', + flexDirection: 'column', + alignItems: p.mine ? 'flex-end' : 'flex-start', + outline: 'none', + + [`&:focus-visible .${chatMessageSlotClassNames.timestamp}`]: { + opacity: 1, + }, - [`&:focus-visible .${chatMessageSlotClassNames.bubble}`]: borderFocusStyles[':focus-visible'], - }; - }, - - header: ({ props: p, theme }): ICSSInJSStyle => ({ - display: 'flex', - width: '100%', - justifyContent: p.mine ? 'flex-end' : 'start', - gap: pxToRem(8), - '& > div': { - paddingTop: pxToRem(8), + [`&:focus-visible .${chatMessageSlotClassNames.bubble}`]: borderFocusStyles[':focus-visible'], + }; }, - color: theme.siteVariables.colorScheme.default.foreground2, - }), - - author: ({ props: p }): ICSSInJSStyle => ({ - ...((p.mine || p.attached === 'bottom' || p.attached === true) && (screenReaderContainerStyles as ICSSInJSStyle)), - fontWeight: 400, - marginBottom: pxToRem(2), - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - }), - - timestamp: ({ variables: v }): ICSSInJSStyle => ({ - display: 'inline-block', - alignSelf: 'self-start', - whiteSpace: 'nowrap', - opacity: 0, - ...(v.hasReducedHorizontalSpace && { - fontSize: '1rem', - margin: `${pxToRem(3)} ${pxToRem(2.5)} 0`, + + header: ({ props: p, theme }): ICSSInJSStyle => ({ + display: 'flex', + width: '100%', + justifyContent: p.mine ? 'flex-end' : 'start', + gap: pxToRem(8), + '& > div': { + paddingTop: pxToRem(8), + }, + color: theme.siteVariables.colorScheme.default.foreground2, }), - }), - body: ({ props: p, variables: v }): ICSSInJSStyle => ({ - display: 'flex', - flexDirection: p.mine ? 'row-reverse' : 'row', - position: 'relative', - maxWidth: '100%', + author: ({ props: p }): ICSSInJSStyle => ({ + ...((p.mine || p.attached === 'bottom' || p.attached === true) && (screenReaderContainerStyles as ICSSInJSStyle)), + fontWeight: 400, + marginBottom: pxToRem(2), + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }), - ...(!p.mine && - v.hasReducedHorizontalSpace && { - marginRight: pxToRem(16), + timestamp: ({ variables: v }): ICSSInJSStyle => ({ + display: 'inline-block', + alignSelf: 'self-start', + whiteSpace: 'nowrap', + opacity: 0, + ...(v.hasReducedHorizontalSpace && { + fontSize: '1rem', + margin: `${pxToRem(3)} ${pxToRem(2.5)} 0`, }), - }), + }), - bubble: ({ props: p, variables: v, theme }): ICSSInJSStyle => { - return { + body: ({ props: p, variables: v }): ICSSInJSStyle => ({ + display: 'flex', + flexDirection: p.mine ? 'row-reverse' : 'row', position: 'relative', - border: v.border, - borderRadius: pxToRem(6), - paddingLeft: pxToRem(16), - paddingRight: pxToRem(16), - paddingTop: pxToRem(8), - paddingBottom: p.hasReactions ? pxToRem(10) : pxToRem(8), - backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor, - backgroundAttachment: 'fixed', - - ...(p.failed && { - backgroundImage: 'none', - backgroundColor: theme.siteVariables.colorScheme.red.background1, - border: `1px solid ${theme.siteVariables.colorScheme.red.border}`, - }), + maxWidth: '100%', - ...((v.hasMention || v.isImportant) && { - [`& .${chatMessageSlotClassNames.bar}`]: { - backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor, - position: 'absolute', - - borderBottomLeftRadius: 'inherit', - borderTopLeftRadius: 'inherit', - height: '100%', - left: '0', - top: '0', - width: pxToRem(3), - }, - }), + ...(!p.mine && + v.hasReducedHorizontalSpace && { + marginRight: pxToRem(16), + }), + }), - ...(isNil(v.showActionMenu) && - p.hasActionMenu && { - ':hover': { - [`& > .${chatMessageSlotClassNames.actionMenu}`]: displayActionMenu(v.overlayZIndex), + bubble: ({ props: p, variables: v, theme }): ICSSInJSStyle => { + return { + position: 'relative', + border: v.border, + borderRadius: pxToRem(6), + paddingLeft: pxToRem(16), + paddingRight: pxToRem(16), + paddingTop: pxToRem(8), + paddingBottom: p.hasReactions ? pxToRem(10) : pxToRem(8), + backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor, + backgroundAttachment: 'fixed', + + ...(p.failed && { + backgroundImage: 'none', + backgroundColor: theme.siteVariables.colorScheme.red.background1, + border: `1px solid ${theme.siteVariables.colorScheme.red.border}`, + }), + + ...((v.hasMention || v.isImportant) && { + [`& .${chatMessageSlotClassNames.bar}`]: { + backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor, + position: 'absolute', + + borderBottomLeftRadius: 'inherit', + borderTopLeftRadius: 'inherit', + height: '100%', + left: '0', + top: '0', + width: pxToRem(3), }, - ...(p.showActionMenu && { - [`& .${chatMessageSlotClassNames.actionMenu}`]: displayActionMenu(v.overlayZIndex), - }), }), - [`&:hover + .${chatMessageSlotClassNames.bubbleInset} .${chatMessageSlotClassNames.timestamp}`]: { + ...(isNil(v.showActionMenu) && + p.hasActionMenu && { + ':hover': { + [`& > .${chatMessageSlotClassNames.actionMenu}`]: displayActionMenu(v.overlayZIndex), + }, + ...(p.showActionMenu && { + [`& .${chatMessageSlotClassNames.actionMenu}`]: displayActionMenu(v.overlayZIndex), + }), + }), + + [`&:hover + .${chatMessageSlotClassNames.bubbleInset} .${chatMessageSlotClassNames.timestamp}`]: { + opacity: 1, + }, + + ...(p.attached === true && + !v.isImportant && { + [p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0, + [p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0, + }), + ...(p.attached === 'top' && + !v.isImportant && { + [p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0, + }), + ...(p.attached === 'bottom' && + !v.isImportant && { + [p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0, + }), + }; + }, + + bubbleInset: ({ props: p, variables: v }): ICSSInJSStyle => ({ + display: 'flex', + paddingTop: pxToRem(10), + paddingBottom: 0, + // use padding instead of margin so that the bubble container's :hover + // styles still apply when mousing over the gap between the container + // and bubble-inset. + paddingLeft: v.hasReducedHorizontalSpace ? pxToRem(2.5) : pxToRem(5), + paddingRight: v.hasReducedHorizontalSpace ? pxToRem(2.5) : pxToRem(5), + ...(p.mine ? { right: '100%', flexDirection: 'row-reverse' } : { left: '100%' }), + + [`&:hover .${chatMessageSlotClassNames.timestamp}`]: { opacity: 1, }, + }), - ...(p.attached === true && - !v.isImportant && { - [p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0, - [p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0, - }), - ...(p.attached === 'top' && - !v.isImportant && { - [p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 0, - }), - ...(p.attached === 'bottom' && - !v.isImportant && { - [p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius']: 0, - }), - }; - }, - - bubbleInset: ({ props: p, variables: v }): ICSSInJSStyle => ({ - display: 'flex', - paddingTop: pxToRem(10), - paddingBottom: 0, - // use padding instead of margin so that the bubble container's :hover - // styles still apply when mousing over the gap between the container - // and bubble-inset. - paddingLeft: v.hasReducedHorizontalSpace ? pxToRem(2.5) : pxToRem(5), - paddingRight: v.hasReducedHorizontalSpace ? pxToRem(2.5) : pxToRem(5), - ...(p.mine ? { right: '100%', flexDirection: 'row-reverse' } : { left: '100%' }), - - [`&:hover .${chatMessageSlotClassNames.timestamp}`]: { - opacity: 1, - }, - }), - - badge: ({ props: p, variables: v }): ICSSInJSStyle => ({ - position: 'relative', - top: pxToRem(-5), - width: pxToRem(25), - height: pxToRem(25), - backgroundColor: 'none', - color: v.isImportantColor, - zIndex: v.zIndex, - '& > :first-child': { - display: 'inline-flex', - margin: '0 auto', - }, - ...(p.mine ? { marginRight: pxToRem(-5) } : { marginLeft: pxToRem(-5) }), - }), - - reactionGroup: ({ props: p }): ICSSInJSStyle => ({ - position: 'relative', - display: 'flex', - float: 'left', - zIndex: 1, - ...(p.mine && { - float: 'right', - marginRight: pxToRem(-4), + badge: ({ props: p, variables: v }): ICSSInJSStyle => ({ + position: 'relative', + top: pxToRem(-5), + width: pxToRem(25), + height: pxToRem(25), + backgroundColor: 'none', + color: v.isImportantColor, + zIndex: v.zIndex, + '& > :first-child': { + display: 'inline-flex', + margin: '0 auto', + }, + ...(p.mine ? { marginRight: pxToRem(-5) } : { marginLeft: pxToRem(-5) }), + }), + + reactionGroup: ({ props: p }): ICSSInJSStyle => ({ + position: 'relative', + display: 'flex', + float: 'left', + zIndex: 1, + ...(p.mine && { + float: 'right', + marginRight: pxToRem(-4), + }), }), - }), -}; + }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Datepicker/datepickerCalendarStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Datepicker/datepickerCalendarStyles.ts index 220a8e0ac4e267..b7d1f4c9e16f13 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Datepicker/datepickerCalendarStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Datepicker/datepickerCalendarStyles.ts @@ -2,11 +2,9 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; import { DatepickerVariables } from './datepickerVariables'; import { DatepickerCalendarStylesProps } from '../../../../components/Datepicker/DatepickerCalendar'; -export const datepickerCalendarStyles: ComponentSlotStylesPrepared< - DatepickerCalendarStylesProps, - DatepickerVariables -> = { - root: ({ variables: v }): ICSSInJSStyle => ({ - minHeight: v.calendarMinHeight, - }), -}; +export const datepickerCalendarStyles: ComponentSlotStylesPrepared = + { + root: ({ variables: v }): ICSSInJSStyle => ({ + minHeight: v.calendarMinHeight, + }), + }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts index 59e8235dca116f..7996eb0b9c172b 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts @@ -2,22 +2,20 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; import { DropdownSearchInputStylesProps } from '../../../../components/Dropdown/DropdownSearchInput'; import { DropdownVariables } from './dropdownVariables'; -export const dropdownSearchInputStyles: ComponentSlotStylesPrepared< - DropdownSearchInputStylesProps, - DropdownVariables -> = { - root: ({ variables: v }): ICSSInJSStyle => ({ - flexBasis: v.comboboxFlexBasis, - flexGrow: 1, - }), +export const dropdownSearchInputStyles: ComponentSlotStylesPrepared = + { + root: ({ variables: v }): ICSSInJSStyle => ({ + flexBasis: v.comboboxFlexBasis, + flexGrow: 1, + }), - input: ({ props: p }): ICSSInJSStyle => ({ - width: '100%', - backgroundColor: 'transparent', - borderWidth: 0, - ...(p.inline && { - padding: 0, - lineHeight: 'initial', + input: ({ props: p }): ICSSInJSStyle => ({ + width: '100%', + backgroundColor: 'transparent', + borderWidth: 0, + ...(p.inline && { + padding: 0, + lineHeight: 'initial', + }), }), - }), -}; + }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts index 2009ed933f7e95..2fce2cf0aa8383 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts @@ -6,19 +6,8 @@ const countTrue = items => items.filter(Boolean).length; export const layoutStyles: ComponentSlotStylesPrepared = { root: ({ props }): ICSSInJSStyle => { - const { - alignItems, - debug, - gap, - justifyItems, - hasMain, - mainSize, - hasEnd, - endSize, - hasStart, - startSize, - vertical, - } = props; + const { alignItems, debug, gap, justifyItems, hasMain, mainSize, hasEnd, endSize, hasStart, startSize, vertical } = + props; return { ...(debug && debugRoot()), diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/List/listItemHeaderMediaStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/List/listItemHeaderMediaStyles.ts index 9aa5d4ec6db876..8f694e70f92ed2 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/List/listItemHeaderMediaStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/List/listItemHeaderMediaStyles.ts @@ -3,15 +3,13 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; import { ListItemHeaderMediaStylesProps } from '../../../../components/List/ListItemHeaderMedia'; import { ListItemVariables } from './listItemVariables'; -export const listItemHeaderMediaStyles: ComponentSlotStylesPrepared< - ListItemHeaderMediaStylesProps, - ListItemVariables -> = { - root: ({ variables: v }): ICSSInJSStyle => ({ - alignSelf: 'flex-end', - flexShrink: 0, +export const listItemHeaderMediaStyles: ComponentSlotStylesPrepared = + { + root: ({ variables: v }): ICSSInJSStyle => ({ + alignSelf: 'flex-end', + flexShrink: 0, - fontSize: v.headerMediaFontSize, - lineHeight: v.headerMediaLineHeight, - }), -}; + fontSize: v.headerMediaFontSize, + lineHeight: v.headerMediaLineHeight, + }), + }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/SplitButton/splitButtonToggleStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/SplitButton/splitButtonToggleStyles.ts index f853bf2ecd389a..e0e38b75c19e93 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/SplitButton/splitButtonToggleStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/SplitButton/splitButtonToggleStyles.ts @@ -15,140 +15,138 @@ const getIndicatorStyles = (color: string, outline: boolean, size: string): ICSS }; }; -export const splitButtonToggleStyles: ComponentSlotStylesPrepared< - SplitButtonToggleStylesProps, - SplitButtonVariables -> = { - root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { - const { siteVariables } = theme; - const { borderWidth } = siteVariables; - - const borderFocusStyles = getBorderFocusStyles({ - variables: { - borderRadius: v.focusBorderRadius, - borderWidth: v.focusBorderWidth, - focusInnerBorderColor: v.focusInnerBorderColor, - focusOuterBorderColor: v.focusOuterBorderColor, - zIndexes: { foreground: v.focusBorderZIndex }, - }, - borderPadding: borderWidth, - }); - - const toggleButtonColorHover = () => (p.primary ? v.toggleButtonPrimaryHoverColor : v.toggleButtonColorHover); - - return { - height: v.toggleButtonHeight, - minWidth: v.toggleButtonHeight, - color: v.toggleButtonColor, - backgroundColor: v.toggleButtonBackgroundColor, - borderRadius: v.toggleButtonBorderRadius, - display: 'inline-flex', - justifyContent: 'center', - alignItems: 'center', - position: 'relative', - verticalAlign: 'middle', - cursor: 'pointer', - - outline: 0, - padding: 0, - borderWidth, - borderStyle: 'solid', - borderColor: v.toggleButtonBorderColor, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - borderLeftColor: 'transparent', - - boxShadow: p.primary ? v.toggleButtonPrimaryBoxShadow : v.toggleButtonBoxShadow, - ...((p.flat || p.size === 'small' || p.disabled) && { - boxShadow: 'none', - }), - - ...getIconFillOrOutlineStyles({ outline: true }), - - ':before': { - ...getIndicatorStyles( - p.disabled ? v.toggleButtonColorDisabled : p.primary ? v.toggleButtonPrimaryColor : v.toggleButtonColor, - true, - v.toggleButtonIndicatorSize, - ), - }, - - ':hover': { +export const splitButtonToggleStyles: ComponentSlotStylesPrepared = + { + root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { + const { siteVariables } = theme; + const { borderWidth } = siteVariables; + + const borderFocusStyles = getBorderFocusStyles({ + variables: { + borderRadius: v.focusBorderRadius, + borderWidth: v.focusBorderWidth, + focusInnerBorderColor: v.focusInnerBorderColor, + focusOuterBorderColor: v.focusOuterBorderColor, + zIndexes: { foreground: v.focusBorderZIndex }, + }, + borderPadding: borderWidth, + }); + + const toggleButtonColorHover = () => (p.primary ? v.toggleButtonPrimaryHoverColor : v.toggleButtonColorHover); + + return { + height: v.toggleButtonHeight, + minWidth: v.toggleButtonHeight, + color: v.toggleButtonColor, + backgroundColor: v.toggleButtonBackgroundColor, + borderRadius: v.toggleButtonBorderRadius, + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + verticalAlign: 'middle', + cursor: 'pointer', + + outline: 0, + padding: 0, + borderWidth, + borderStyle: 'solid', + borderColor: v.toggleButtonBorderColor, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderLeftColor: 'transparent', + + boxShadow: p.primary ? v.toggleButtonPrimaryBoxShadow : v.toggleButtonBoxShadow, + ...((p.flat || p.size === 'small' || p.disabled) && { + boxShadow: 'none', + }), + ...getIconFillOrOutlineStyles({ outline: true }), - color: toggleButtonColorHover(), - backgroundColor: v.toggleButtonBackgroundColorHover, - borderTopColor: v.toggleButtonBorderColorHover, - borderRightColor: v.toggleButtonBorderColorHover, - borderBottomColor: v.toggleButtonBorderColorHover, - // ':before' styles apply to the content (chevron) part of Toggle button + ':before': { - ...getIndicatorStyles(toggleButtonColorHover(), true, v.toggleButtonIndicatorSize), + ...getIndicatorStyles( + p.disabled ? v.toggleButtonColorDisabled : p.primary ? v.toggleButtonPrimaryColor : v.toggleButtonColor, + true, + v.toggleButtonIndicatorSize, + ), }, - }, - - ':active': { - color: v.toggleButtonColorActive, - backgroundColor: v.toggleButtonBackgroundColorActive, - borderColor: v.toggleButtonBorderColorActive, - boxShadow: 'none', - }, - - ':focus': borderFocusStyles[':focus'], - ':focus-visible': { - backgroundColor: v.toggleButtonBackgroundColorFocus, - borderColor: v.toggleButtonBorderColorFocus, - color: v.toggleButtonColorFocus, - borderWidth, ':hover': { - borderColor: v.toggleButtonBorderColorHover, + ...getIconFillOrOutlineStyles({ outline: true }), + color: toggleButtonColorHover(), + backgroundColor: v.toggleButtonBackgroundColorHover, + borderTopColor: v.toggleButtonBorderColorHover, + borderRightColor: v.toggleButtonBorderColorHover, + borderBottomColor: v.toggleButtonBorderColorHover, + // ':before' styles apply to the content (chevron) part of Toggle button + ':before': { + ...getIndicatorStyles(toggleButtonColorHover(), true, v.toggleButtonIndicatorSize), + }, }, - }, - - // Overrides for "primary" split button - ...(p.primary && { - color: v.toggleButtonPrimaryColor, - backgroundColor: v.toggleButtonPrimaryBackgroundColor, - borderWidth: `0 0 0 ${siteVariables.borderWidth}`, - borderColor: v.toggleButtonPrimaryBorderColor, ':active': { - backgroundColor: v.toggleButtonPrimaryBackgroundColorActive, + color: v.toggleButtonColorActive, + backgroundColor: v.toggleButtonBackgroundColorActive, + borderColor: v.toggleButtonBorderColorActive, boxShadow: 'none', }, ':focus': borderFocusStyles[':focus'], ':focus-visible': { - backgroundColor: v.toggleButtonPrimaryBackgroundColorFocus, + backgroundColor: v.toggleButtonBackgroundColorFocus, + borderColor: v.toggleButtonBorderColorFocus, + color: v.toggleButtonColorFocus, + borderWidth, + + ':hover': { + borderColor: v.toggleButtonBorderColorHover, + }, }, - ':hover': { - color: v.toggleButtonPrimaryHoverColor, - backgroundColor: v.toggleButtonPrimaryHoverBackgroundColor, - }, - }), - - // Overrides for "disabled" split button - ...(p.disabled && { - cursor: 'default', - color: v.toggleButtonColorDisabled, - boxShadow: 'none', - pointerEvents: 'none', - ':hover': { + // Overrides for "primary" split button + ...(p.primary && { + color: v.toggleButtonPrimaryColor, + backgroundColor: v.toggleButtonPrimaryBackgroundColor, + borderWidth: `0 0 0 ${siteVariables.borderWidth}`, + borderColor: v.toggleButtonPrimaryBorderColor, + + ':active': { + backgroundColor: v.toggleButtonPrimaryBackgroundColorActive, + boxShadow: 'none', + }, + + ':focus': borderFocusStyles[':focus'], + ':focus-visible': { + backgroundColor: v.toggleButtonPrimaryBackgroundColorFocus, + }, + + ':hover': { + color: v.toggleButtonPrimaryHoverColor, + backgroundColor: v.toggleButtonPrimaryHoverBackgroundColor, + }, + }), + + // Overrides for "disabled" split button + ...(p.disabled && { + cursor: 'default', color: v.toggleButtonColorDisabled, - }, - - backgroundColor: v.toggleButtonBackgroundColorDisabled, - - borderWidth: `0 0 0 ${siteVariables.borderWidth}`, - borderColor: v.borderColorDisabled, - }), - - ...(p.size === 'small' && { - height: v.smallDimension, - width: v.smallDimension, - minWidth: v.smallMinWidth, - }), - }; - }, -}; + boxShadow: 'none', + pointerEvents: 'none', + ':hover': { + color: v.toggleButtonColorDisabled, + }, + + backgroundColor: v.toggleButtonBackgroundColorDisabled, + + borderWidth: `0 0 0 ${siteVariables.borderWidth}`, + borderColor: v.borderColorDisabled, + }), + + ...(p.size === 'small' && { + height: v.smallDimension, + width: v.smallDimension, + minWidth: v.smallMinWidth, + }), + }; + }, + }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Toolbar/toolbarMenuItemIconStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Toolbar/toolbarMenuItemIconStyles.ts index 5f771d32d8e3e4..94a54476d474e9 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Toolbar/toolbarMenuItemIconStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Toolbar/toolbarMenuItemIconStyles.ts @@ -4,16 +4,14 @@ import { pxToRem } from '../../../../utils'; import { ToolbarMenuItemIconStylesProps } from '../../../../components/Toolbar/ToolbarMenuItemIcon'; import { ToolbarVariables } from './toolbarVariables'; -export const toolbarMenuItemIconStyles: ComponentSlotStylesPrepared< - ToolbarMenuItemIconStylesProps, - ToolbarVariables -> = { - root: ({ props: p }) => ({ - ...(p.hasContent && { - marginRight: pxToRem(10), - marginTop: pxToRem(3), - display: 'flex', - alignSelf: 'start', +export const toolbarMenuItemIconStyles: ComponentSlotStylesPrepared = + { + root: ({ props: p }) => ({ + ...(p.hasContent && { + marginRight: pxToRem(10), + marginTop: pxToRem(3), + display: 'flex', + alignSelf: 'start', + }), }), - }), -}; + }; diff --git a/packages/fluentui/react-northstar/src/themes/types.ts b/packages/fluentui/react-northstar/src/themes/types.ts index 42fd89a37b3bf0..8a947852e2ec9c 100644 --- a/packages/fluentui/react-northstar/src/themes/types.ts +++ b/packages/fluentui/react-northstar/src/themes/types.ts @@ -142,7 +142,7 @@ export type ColorScheme export type ColorSchemeMapping< Scheme = ColorScheme, - Colors extends string | number | symbol = ColorNames + Colors extends string | number | symbol = ColorNames, > = ColorValues, Colors> & { default?: Extendable; }; @@ -151,14 +151,14 @@ export type StrictColorScheme = ColorValues & { default?: Scheme; }; export type ColorSchemeMappingOverrides< Scheme = ColorScheme, - Colors extends string | number | symbol = ColorNames + Colors extends string | number | symbol = ColorNames, > = ColorValues>, Colors> & { default?: Partial>; }; diff --git a/packages/fluentui/react-northstar/src/utils/factories.ts b/packages/fluentui/react-northstar/src/utils/factories.ts index 8c9928942be841..f09aacd1d977d8 100644 --- a/packages/fluentui/react-northstar/src/utils/factories.ts +++ b/packages/fluentui/react-northstar/src/utils/factories.ts @@ -272,8 +272,11 @@ export function createShorthand( options?: CreateShorthandOptions>, ): React.ReactElement; export function createShorthand

(Component, value?, options?) { - const { mappedProp = 'children', allowsJSX = true, mappedArrayProp } = - Component.shorthandConfig || Component.fluentComposeConfig?.shorthandConfig || {}; + const { + mappedProp = 'children', + allowsJSX = true, + mappedArrayProp, + } = Component.shorthandConfig || Component.fluentComposeConfig?.shorthandConfig || {}; return createShorthandInternal

({ Component, diff --git a/packages/fluentui/react-northstar/src/utils/positioner/getScrollParent.ts b/packages/fluentui/react-northstar/src/utils/positioner/getScrollParent.ts index d29c383be6c782..bba8517a667cc7 100644 --- a/packages/fluentui/react-northstar/src/utils/positioner/getScrollParent.ts +++ b/packages/fluentui/react-northstar/src/utils/positioner/getScrollParent.ts @@ -36,7 +36,7 @@ export const getScrollParent = (node: Document | HTMLElement): HTMLElement => { case 'BODY': return parentNode.ownerDocument.body; case '#document': - return ((parentNode as unknown) as Document).body; + return (parentNode as unknown as Document).body; } // If any of the overflow props is defined for the node then we return it as the parent diff --git a/packages/fluentui/react-northstar/src/utils/positioner/usePopper.ts b/packages/fluentui/react-northstar/src/utils/positioner/usePopper.ts index f0cefa89bf267d..e1919d26f241d0 100644 --- a/packages/fluentui/react-northstar/src/utils/positioner/usePopper.ts +++ b/packages/fluentui/react-northstar/src/utils/positioner/usePopper.ts @@ -270,9 +270,7 @@ function usePopperOptions(options: PopperOptions, popperOriginalPositionRef: Rea * * @param {PopperOptions} options */ -export function usePopper( - options: PopperOptions = {}, -): { +export function usePopper(options: PopperOptions = {}): { // React refs are supposed to be contravariant (allows a more general type to be passed rather than a more specific one) // However, Typescript currently can't infer that fact for refs // See https://github.com/microsoft/TypeScript/issues/30748 for more information diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx index bd06b471b6e722..01f829bea9ae2d 100644 --- a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx +++ b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx @@ -450,11 +450,12 @@ export function isConformant( // for example, "Menu" for "ToolbarMenu" since it is accessed as "Toolbar.Menu" in the API const subcomponentName = isParent ? null : constructorName.replace(parentDisplayName!, ''); - const componentClassName = (!isParent - ? _.includes(subcomponentName, 'Group') - ? `ui-${parentDisplayName}s` - : `ui-${parentDisplayName}__${subcomponentName}` - : `ui-${constructorName.toLowerCase()}` + const componentClassName = ( + !isParent + ? _.includes(subcomponentName, 'Group') + ? `ui-${parentDisplayName}s` + : `ui-${parentDisplayName}__${subcomponentName}` + : `ui-${constructorName.toLowerCase()}` ).toLowerCase(); const constClassName = _.camelCase(`${Component.displayName}ClassName`); @@ -544,7 +545,7 @@ export function isConformant( it('allows to define additional styles props', () => { const renderer: Partial = { renderRule: styles => { - const props = (styles as unknown) as ComposedComponentStylesProps; + const props = styles as unknown as ComposedComponentStylesProps; return props.stylesTest ? 'has-test' : 'has-not-test'; }, diff --git a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx index 55e2e3aeb66482..acc8fd69161100 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx @@ -1021,17 +1021,13 @@ describe('Dropdown', () => { it('is set correctly in multiple selection by using Tab on highlighted item', () => { const itemSelectedIndex = 3; - const { - triggerButtonNode, - keyDownOnItemsList, - getSelectedItemNodeAtIndex, - getSelectedItemNodes, - } = renderDropdown({ - defaultOpen: true, - defaultHighlightedIndex: itemSelectedIndex, - defaultValue: items[4], - multiple: true, - }); + const { triggerButtonNode, keyDownOnItemsList, getSelectedItemNodeAtIndex, getSelectedItemNodes } = + renderDropdown({ + defaultOpen: true, + defaultHighlightedIndex: itemSelectedIndex, + defaultValue: items[4], + multiple: true, + }); keyDownOnItemsList('Tab'); @@ -1043,17 +1039,13 @@ describe('Dropdown', () => { it('is set correctly in multiple selection by using Shift+Tab on highlighted item', () => { const itemSelectedIndex = 2; - const { - triggerButtonNode, - keyDownOnItemsList, - getSelectedItemNodeAtIndex, - getSelectedItemNodes, - } = renderDropdown({ - defaultOpen: true, - defaultHighlightedIndex: itemSelectedIndex, - defaultValue: items[4], - multiple: true, - }); + const { triggerButtonNode, keyDownOnItemsList, getSelectedItemNodeAtIndex, getSelectedItemNodes } = + renderDropdown({ + defaultOpen: true, + defaultHighlightedIndex: itemSelectedIndex, + defaultValue: items[4], + multiple: true, + }); keyDownOnItemsList('Tab', { shiftKey: true }); @@ -1143,17 +1135,13 @@ describe('Dropdown', () => { }); it('removes last item on backspace when selection range is 0, 0', () => { - const { - getSelectedItemNodes, - getSelectedItemNodeAtIndex, - keyDownOnSearchInput, - searchInputNode, - } = renderDropdown({ - multiple: true, - search: true, - defaultSearchQuery: 'bla', - defaultValue: [items[0], items[1]], - }); + const { getSelectedItemNodes, getSelectedItemNodeAtIndex, keyDownOnSearchInput, searchInputNode } = + renderDropdown({ + multiple: true, + search: true, + defaultSearchQuery: 'bla', + defaultValue: [items[0], items[1]], + }); searchInputNode.setSelectionRange(0, 0); keyDownOnSearchInput('Backspace'); @@ -1971,18 +1959,13 @@ describe('Dropdown', () => { describe('disabled', () => { it('allows no action on the trigger button', () => { const { testContainer, removeTestContainer } = createTestContainer(); - const { - clickOnTriggerButton, - focusTriggerButton, - getItemNodes, - triggerButtonNode, - keyDownOnTriggerButton, - } = renderDropdown( - { - disabled: true, - }, - testContainer, - ); + const { clickOnTriggerButton, focusTriggerButton, getItemNodes, triggerButtonNode, keyDownOnTriggerButton } = + renderDropdown( + { + disabled: true, + }, + testContainer, + ); expect(triggerButtonNode).toHaveAttribute('disabled'); @@ -2002,19 +1985,14 @@ describe('Dropdown', () => { it('allows no action on the search input', () => { const { testContainer, removeTestContainer } = createTestContainer(); - const { - keyDownOnSearchInput, - clickOnSearchInput, - focusSearchInput, - getItemNodes, - searchInputNode, - } = renderDropdown( - { - disabled: true, - search: true, - }, - testContainer, - ); + const { keyDownOnSearchInput, clickOnSearchInput, focusSearchInput, getItemNodes, searchInputNode } = + renderDropdown( + { + disabled: true, + search: true, + }, + testContainer, + ); expect(searchInputNode).toHaveAttribute('disabled'); diff --git a/packages/fluentui/react-proptypes/src/index.ts b/packages/fluentui/react-proptypes/src/index.ts index c5e68657b069b5..73cd87553c27ee 100644 --- a/packages/fluentui/react-proptypes/src/index.ts +++ b/packages/fluentui/react-proptypes/src/index.ts @@ -114,169 +114,157 @@ export const never = (props: ObjectOf, propName: string, componentName: str * Disallow other props from being defined with this prop. * @param disallowedProps - An array of props that cannot be used with this prop. */ -export const disallow = (disallowedProps: string[]) => ( - props: ObjectOf, - propName: string, - componentName: string, -) => { - if (!Array.isArray(disallowedProps)) { - throw new Error( - [ - 'Invalid argument supplied to disallow, expected an instance of array.', - ` See \`${propName}\` prop in \`${componentName}\`.`, - ].join(''), - ); - } +export const disallow = + (disallowedProps: string[]) => (props: ObjectOf, propName: string, componentName: string) => { + if (!Array.isArray(disallowedProps)) { + throw new Error( + [ + 'Invalid argument supplied to disallow, expected an instance of array.', + ` See \`${propName}\` prop in \`${componentName}\`.`, + ].join(''), + ); + } - // skip if prop is undefined - if (_.isNil(props[propName]) || props[propName] === false) return undefined; + // skip if prop is undefined + if (_.isNil(props[propName]) || props[propName] === false) return undefined; - // find disallowed props with values - const disallowed = disallowedProps.reduce((acc, disallowedProp) => { - if (!_.isNil(props[disallowedProp]) && props[disallowedProp] !== false) { - return [...acc, disallowedProp]; - } - return acc; - }, []); + // find disallowed props with values + const disallowed = disallowedProps.reduce((acc, disallowedProp) => { + if (!_.isNil(props[disallowedProp]) && props[disallowedProp] !== false) { + return [...acc, disallowedProp]; + } + return acc; + }, []); - if (disallowed.length > 0) { - return new Error( - [ - `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`, - 'They cannot be defined together, choose one or the other.', - ].join(' '), - ); - } + if (disallowed.length > 0) { + return new Error( + [ + `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`, + 'They cannot be defined together, choose one or the other.', + ].join(' '), + ); + } - return undefined; -}; + return undefined; + }; /** * Ensure a prop adherers to multiple prop type validators. * @param validators - An array of propType functions. */ -export const every = (validators: Function[]) => ( - props: ObjectOf, - propName: string, - componentName: string, - ...args: any[] -) => { - if (!Array.isArray(validators)) { - throw new Error( - [ - 'Invalid argument supplied to every, expected an instance of array.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' '), - ); - } +export const every = + (validators: Function[]) => + (props: ObjectOf, propName: string, componentName: string, ...args: any[]) => { + if (!Array.isArray(validators)) { + throw new Error( + [ + 'Invalid argument supplied to every, expected an instance of array.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ); + } - return _.first( - _.compact( - _.map(validators, validator => { - if (typeof validator !== 'function') { - throw new Error(`every() argument "validators" should contain functions, found: ${typeOf(validator)}.`); - } - return validator(props, propName, componentName, ...args); - }), - ), - ); // we can only return one error at a time -}; + return _.first( + _.compact( + _.map(validators, validator => { + if (typeof validator !== 'function') { + throw new Error(`every() argument "validators" should contain functions, found: ${typeOf(validator)}.`); + } + return validator(props, propName, componentName, ...args); + }), + ), + ); // we can only return one error at a time + }; /** * Ensure a prop adherers to at least one of the given prop type validators. * @param validators - An array of propType functions. */ -export const some = (validators: Function[]) => ( - props: ObjectOf, - propName: string, - componentName: string, - ...args: any[] -) => { - if (!Array.isArray(validators)) { - throw new Error( - [ - 'Invalid argument supplied to some, expected an instance of array.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' '), +export const some = + (validators: Function[]) => + (props: ObjectOf, propName: string, componentName: string, ...args: any[]) => { + if (!Array.isArray(validators)) { + throw new Error( + [ + 'Invalid argument supplied to some, expected an instance of array.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ); + } + + const errors = _.compact( + _.map(validators, validator => { + if (!_.isFunction(validator)) { + throw new Error(`some() argument "validators" should contain functions, found: ${typeOf(validator)}.`); + } + return validator(props, propName, componentName, ...args); + }), ); - } - const errors = _.compact( - _.map(validators, validator => { - if (!_.isFunction(validator)) { - throw new Error(`some() argument "validators" should contain functions, found: ${typeOf(validator)}.`); - } - return validator(props, propName, componentName, ...args); - }), - ); - - // fail only if all validators failed - if (errors.length === validators.length) { - const error = new Error('One of these validators must pass:'); - error.message += `\n${_.map(errors, err => `- ${err.message}`).join('\n')}`; - return error; - } + // fail only if all validators failed + if (errors.length === validators.length) { + const error = new Error('One of these validators must pass:'); + error.message += `\n${_.map(errors, err => `- ${err.message}`).join('\n')}`; + return error; + } - return undefined; -}; + return undefined; + }; /** * Ensure a validator passes only when a component has a given propsShape. * @param propsShape - An object describing the prop shape. * @param validator - A propType function. */ -export const givenProps = (propsShape: Record, validator: Function) => ( - props: ObjectOf, - propName: string, - componentName: string, - ...args: any -) => { - if (!_.isPlainObject(propsShape)) { - throw new Error( - [ - 'Invalid argument supplied to givenProps, expected an object.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' '), - ); - } +export const givenProps = + (propsShape: Record, validator: Function) => + (props: ObjectOf, propName: string, componentName: string, ...args: any) => { + if (!_.isPlainObject(propsShape)) { + throw new Error( + [ + 'Invalid argument supplied to givenProps, expected an object.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ); + } - if (typeof validator !== 'function') { - throw new Error( - [ - 'Invalid argument supplied to givenProps, expected a function.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' '), - ); - } + if (typeof validator !== 'function') { + throw new Error( + [ + 'Invalid argument supplied to givenProps, expected a function.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ); + } - const shouldValidate = _.keys(propsShape).every((key: string) => { - const val = propsShape[key]; - // require propShape validators to pass or prop values to match - return typeof val === 'function' ? !val(props, key, componentName, ...args) : val === props[propName]; - }); + const shouldValidate = _.keys(propsShape).every((key: string) => { + const val = propsShape[key]; + // require propShape validators to pass or prop values to match + return typeof val === 'function' ? !val(props, key, componentName, ...args) : val === props[propName]; + }); - if (!shouldValidate) return undefined; + if (!shouldValidate) return undefined; - const error = validator(props, propName, componentName, ...args); + const error = validator(props, propName, componentName, ...args); - if (error) { - // poor mans shallow pretty print, prevents JSON circular reference errors - const prettyProps = `{ ${_.keys(_.pick(props, _.keys(propsShape))) - .map(key => { - const val = props[key]; - let renderedValue = val; - if (typeof val === 'string') renderedValue = `"${val}"`; - else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]`; - else if (_.isObject(val)) renderedValue = '{...}'; + if (error) { + // poor mans shallow pretty print, prevents JSON circular reference errors + const prettyProps = `{ ${_.keys(_.pick(props, _.keys(propsShape))) + .map(key => { + const val = props[key]; + let renderedValue = val; + if (typeof val === 'string') renderedValue = `"${val}"`; + else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]`; + else if (_.isObject(val)) renderedValue = '{...}'; - return `${key}: ${renderedValue}`; - }) - .join(', ')} }`; + return `${key}: ${renderedValue}`; + }) + .join(', ')} }`; - error.message = `Given props ${prettyProps}: ${error.message}`; - return error; - } -}; + error.message = `Given props ${prettyProps}: ${error.message}`; + return error; + } + }; /** * Define prop dependencies by requiring other props. @@ -309,39 +297,36 @@ export const demand = (requiredProps: string[]) => (props: ObjectOf, propNa * Ensure an multiple prop contains a string with only possible values. * @param possible - An array of possible values to prop. */ -export const multipleProp = (possible: string[]) => ( - props: ObjectOf, - propName: string, - componentName: string, -) => { - if (!Array.isArray(possible)) { - throw new Error( - [ - 'Invalid argument supplied to some, expected an instance of array.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' '), - ); - } +export const multipleProp = + (possible: string[]) => (props: ObjectOf, propName: string, componentName: string) => { + if (!Array.isArray(possible)) { + throw new Error( + [ + 'Invalid argument supplied to some, expected an instance of array.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ); + } - const propValue = props[propName]; + const propValue = props[propName]; - // skip if prop is undefined - if (_.isNil(propValue) || propValue === false) return undefined; - - const values = propValue - .replace('large screen', 'large-screen') - .replace(/ vertically/g, '-vertically') - .split(' ') - .map(val => _.trim(val).replace('-', ' ')); - const invalid = _.difference(values, possible); - - // fail only if there are invalid values - if (invalid.length > 0) { - return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`); - } + // skip if prop is undefined + if (_.isNil(propValue) || propValue === false) return undefined; - return undefined; -}; + const values = propValue + .replace('large screen', 'large-screen') + .replace(/ vertically/g, '-vertically') + .split(' ') + .map(val => _.trim(val).replace('-', ' ')); + const invalid = _.difference(values, possible); + + // fail only if there are invalid values + if (invalid.length > 0) { + return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`); + } + + return undefined; + }; /** * Ensure a component can render as a node passed as a prop value in place of children. @@ -407,47 +392,44 @@ export const collectionShorthandWithKindProp = (kindPropValues: string[]) => { * @param help - A help message to display with the deprecation warning. * @param validator - A propType function. */ -export const deprecate = (help: string, validator?: Function) => ( - props: ObjectOf, - propName: string, - componentName: string, - ...args: any[] -) => { - if (typeof help !== 'string') { - throw new Error( - [ - 'Invalid `help` argument supplied to deprecate, expected a string.', - `See \`${propName}\` prop in \`${componentName}\`.`, - ].join(' '), - ); - } - - // skip if prop is undefined - if (props[propName] === undefined) return undefined; - - // deprecation error and help - const error = new Error(`The \`${propName}\` prop in \`${componentName}\` is deprecated.`); - if (help) error.message += ` ${help}`; - - // add optional validation error message - if (validator) { - if (typeof validator === 'function') { - const validationError = validator(props, propName, componentName, ...args); - if (validationError) { - error.message = `${error.message} ${validationError.message}`; - } - } else { +export const deprecate = + (help: string, validator?: Function) => + (props: ObjectOf, propName: string, componentName: string, ...args: any[]) => { + if (typeof help !== 'string') { throw new Error( [ - 'Invalid argument supplied to deprecate, expected a function.', + 'Invalid `help` argument supplied to deprecate, expected a string.', `See \`${propName}\` prop in \`${componentName}\`.`, ].join(' '), ); } - } - return error; -}; + // skip if prop is undefined + if (props[propName] === undefined) return undefined; + + // deprecation error and help + const error = new Error(`The \`${propName}\` prop in \`${componentName}\` is deprecated.`); + if (help) error.message += ` ${help}`; + + // add optional validation error message + if (validator) { + if (typeof validator === 'function') { + const validationError = validator(props, propName, componentName, ...args); + if (validationError) { + error.message = `${error.message} ${validationError.message}`; + } + } else { + throw new Error( + [ + 'Invalid argument supplied to deprecate, expected a function.', + `See \`${propName}\` prop in \`${componentName}\`.`, + ].join(' '), + ); + } + } + + return error; + }; export const accessibility = PropTypes.func; diff --git a/packages/fluentui/state/src/types.ts b/packages/fluentui/state/src/types.ts index 357dd7c223b473..4316e25f7433a6 100644 --- a/packages/fluentui/state/src/types.ts +++ b/packages/fluentui/state/src/types.ts @@ -8,7 +8,7 @@ export type SideEffect = (prevState: State, nextState: State) => void; export type EnhancedAction< State, Actions extends AnyActions, - Action extends AnyAction = AnyActions[keyof AnyActions] + Action extends AnyAction = AnyActions[keyof AnyActions], > = (...args: Parameters) => (state: State, actions: Actions) => Partial | void; export type EnhancedActions = { diff --git a/packages/fluentui/styles/src/callable.ts b/packages/fluentui/styles/src/callable.ts index 177f5994e402e4..ffafd6ac8ebfcd 100644 --- a/packages/fluentui/styles/src/callable.ts +++ b/packages/fluentui/styles/src/callable.ts @@ -1,3 +1,5 @@ -export const callable = (possibleFunction: any) => (...args: any[]) => { - return typeof possibleFunction === 'function' ? possibleFunction(...args) : possibleFunction; -}; +export const callable = + (possibleFunction: any) => + (...args: any[]) => { + return typeof possibleFunction === 'function' ? possibleFunction(...args) : possibleFunction; + }; diff --git a/packages/fluentui/styles/src/mergeThemes.ts b/packages/fluentui/styles/src/mergeThemes.ts index 162b0dbb704105..ce2fa4e93f8b52 100644 --- a/packages/fluentui/styles/src/mergeThemes.ts +++ b/packages/fluentui/styles/src/mergeThemes.ts @@ -204,8 +204,11 @@ export const mergeComponentVariables__DEV: typeof mergeComponentVariables__PROD return [variablesA, variablesB].reduce((acc, next) => { return siteVariables => { const { _debug = [], ...accumulatedVariables } = acc(siteVariables); - const { _debug: computedDebug = undefined, _debugId = undefined, ...computedComponentVariables } = - callable(next)(siteVariables) || {}; + const { + _debug: computedDebug = undefined, + _debugId = undefined, + ...computedComponentVariables + } = callable(next)(siteVariables) || {}; const merged = deepmerge(accumulatedVariables, computedComponentVariables); @@ -267,8 +270,12 @@ export const mergeSiteVariables__DEV: typeof mergeSiteVariables__PROD = ( return [siteVariablesA, siteVariablesB].reduce((acc, next) => { const { _debug = [], ...accumulatedSiteVariables } = acc; - const { _debug: computedDebug = undefined, _invertedKeys = undefined, _debugId = undefined, ...nextSiteVariables } = - next || {}; + const { + _debug: computedDebug = undefined, + _invertedKeys = undefined, + _debugId = undefined, + ...nextSiteVariables + } = next || {}; const merged = deepmerge({ ...accumulatedSiteVariables, _invertedKeys: undefined }, nextSiteVariables); merged._debug = _debug.concat(computedDebug || { resolved: nextSiteVariables, debugId: _debugId }); diff --git a/packages/fluentui/styles/src/types.ts b/packages/fluentui/styles/src/types.ts index 9b853b4248de33..d56cfb847835e3 100644 --- a/packages/fluentui/styles/src/types.ts +++ b/packages/fluentui/styles/src/types.ts @@ -139,7 +139,7 @@ export interface ComponentSlotStylesResolved extends Record { props: TProps; variables: TVars; diff --git a/packages/fluentui/styles/src/withDebugId.ts b/packages/fluentui/styles/src/withDebugId.ts index ebe250770e6ebd..64dc89c98f25aa 100644 --- a/packages/fluentui/styles/src/withDebugId.ts +++ b/packages/fluentui/styles/src/withDebugId.ts @@ -21,10 +21,10 @@ export const withDebugId = } if (typeof data === 'function') { - return (((...args) => { + return ((...args) => { const result = data(...args); return withDebugId(result, debugId); - }) as unknown) as T; + }) as unknown as T; } return data; diff --git a/packages/font-icons-mdl2/src/index.ts b/packages/font-icons-mdl2/src/index.ts index f84a20ff4cab89..4143f562835efd 100644 --- a/packages/font-icons-mdl2/src/index.ts +++ b/packages/font-icons-mdl2/src/index.ts @@ -62,27 +62,9 @@ export function initializeIcons( baseUrl: string = win?.FabricConfig?.iconBaseUrl || win?.FabricConfig?.fontBaseUrl || DEFAULT_BASE_URL, options?: IIconOptions, ): void { - [ - i, - i0, - i1, - i2, - i3, - i4, - i5, - i6, - i7, - i8, - i9, - i10, - i11, - i12, - i13, - i14, - i15, - i16, - i17, - ].forEach((initialize: (url: string, options?: IIconOptions) => void) => initialize(baseUrl, options)); + [i, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9, i10, i11, i12, i13, i14, i15, i16, i17].forEach( + (initialize: (url: string, options?: IIconOptions) => void) => initialize(baseUrl, options), + ); registerIconAliases(); } diff --git a/packages/foundation-legacy/src/IComponent.ts b/packages/foundation-legacy/src/IComponent.ts index 4838362eb92ca7..9a7f86f58f57ea 100644 --- a/packages/foundation-legacy/src/IComponent.ts +++ b/packages/foundation-legacy/src/IComponent.ts @@ -104,7 +104,7 @@ export interface IComponentOptions< TTokens, TStyleSet extends IStyleSet, TViewProps = TComponentProps, - TStatics = {} + TStatics = {}, > { /** * Display name to identify component in React hierarchy. This parameter is required for targeted component styling @@ -145,7 +145,7 @@ export type IComponent< TTokens, TStyleSet extends IStyleSet, TViewProps = TComponentProps, - TStatics = {} + TStatics = {}, > = Required> & { /** * Component that generates view output. diff --git a/packages/foundation-legacy/src/ISlots.ts b/packages/foundation-legacy/src/ISlots.ts index ab32da8b729130..0014b27b676747 100644 --- a/packages/foundation-legacy/src/ISlots.ts +++ b/packages/foundation-legacy/src/ISlots.ts @@ -14,7 +14,7 @@ export interface ISlotCreator = React.ComponentType & ISlotCreator; /** @@ -22,7 +22,7 @@ export type ISlottableComponentType< */ export type ISlottableReactType< TProps extends ValidProps, - TShorthandProp extends ValidShorthand + TShorthandProp extends ValidShorthand, > = React.ElementType & ISlotCreator; /** diff --git a/packages/foundation-legacy/src/createComponent.tsx b/packages/foundation-legacy/src/createComponent.tsx index 6eefad0a1a4190..7a24fee2bf8005 100644 --- a/packages/foundation-legacy/src/createComponent.tsx +++ b/packages/foundation-legacy/src/createComponent.tsx @@ -39,7 +39,7 @@ export function createComponent< TTokens, TStyleSet extends IStyleSet, TViewProps extends TComponentProps = TComponentProps, - TStatics = {} + TStatics = {}, >( view: IViewComponent, options: IComponentOptions = {}, @@ -78,13 +78,13 @@ export function createComponent< componentProps.styles, ); - const viewProps = ({ + const viewProps = { ...componentProps, styles, tokens, _defaultStyles: styles, theme, - } as unknown) as TViewProps & IDefaultSlotProps; + } as unknown as TViewProps & IDefaultSlotProps; return view(viewProps); }; diff --git a/packages/foundation-legacy/src/hooks/controlled.ts b/packages/foundation-legacy/src/hooks/controlled.ts index beb9586fefbfe9..f8f4d7646d245c 100644 --- a/packages/foundation-legacy/src/hooks/controlled.ts +++ b/packages/foundation-legacy/src/hooks/controlled.ts @@ -23,7 +23,7 @@ export function useControlledState, TViewProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, > extends IOldComponentOptions { /** * Slot definition object defining the slot component for each slot. @@ -60,7 +60,7 @@ export interface IRecompositionComponentOptions< TStyleSet extends IStyleSet, TViewProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, > extends IOldComponentOptions { /** * Slot definition object defining the slot component for each slot. @@ -81,5 +81,5 @@ export type IComponent< TStyleSet extends IStyleSet, TViewProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, > = Required>; diff --git a/packages/foundation-legacy/src/next/ISlots.ts b/packages/foundation-legacy/src/next/ISlots.ts index ce7d3f290ba404..e631c5a9a1e44f 100644 --- a/packages/foundation-legacy/src/next/ISlots.ts +++ b/packages/foundation-legacy/src/next/ISlots.ts @@ -12,7 +12,7 @@ export interface IFoundationComponent< TStyleSet extends IStyleSet, TViewProps extends TComponentProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, > extends React.FunctionComponent { __options?: IComponentOptions; } diff --git a/packages/foundation-legacy/src/next/composed.tsx b/packages/foundation-legacy/src/next/composed.tsx index 8137426c4b614b..5bac6fdf10e7ba 100644 --- a/packages/foundation-legacy/src/next/composed.tsx +++ b/packages/foundation-legacy/src/next/composed.tsx @@ -51,7 +51,7 @@ export function composed< TStyleSet extends IStyleSet, TViewProps extends TComponentProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, >( options: IComponentOptions, ): IFoundationComponent & TStatics; @@ -82,7 +82,7 @@ export function composed< TStyleSet extends IStyleSet, TViewProps extends TComponentProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, >( baseComponent: React.FunctionComponent, options: IRecompositionComponentOptions, @@ -117,7 +117,7 @@ export function composed< TStyleSet extends IStyleSet, TViewProps extends TComponentProps = TComponentProps, TComponentSlots = {}, - TStatics = {} + TStatics = {}, >( baseComponentOrOptions: | IFoundationComponent diff --git a/packages/foundation-legacy/src/slots.tsx b/packages/foundation-legacy/src/slots.tsx index 1bcda099b7625a..e6e2d3033c0b43 100644 --- a/packages/foundation-legacy/src/slots.tsx +++ b/packages/foundation-legacy/src/slots.tsx @@ -222,7 +222,7 @@ function _constructFinalProps( function _renderSlot< TSlotComponent extends ISlottableReactType, TSlotProps extends ValidProps, - TSlotShorthand extends ValidShorthand + TSlotShorthand extends ValidShorthand, >( ComponentType: TSlotComponent, componentProps: TSlotProps, @@ -235,7 +235,7 @@ function _renderSlot< return ComponentType.create(componentProps, userProps, slotOptions, defaultStyles); } else { // TODO: need to resolve typing / generic issues passing through memoizeFunction. for now, cast to 'unknown' - return ((defaultFactory(ComponentType) as unknown) as ISlotFactory)( + return (defaultFactory(ComponentType) as unknown as ISlotFactory)( componentProps, userProps, slotOptions, diff --git a/packages/merge-styles/src/extractStyleParts.ts b/packages/merge-styles/src/extractStyleParts.ts index 7d51414a2b0b70..78e559b46e510b 100644 --- a/packages/merge-styles/src/extractStyleParts.ts +++ b/packages/merge-styles/src/extractStyleParts.ts @@ -5,9 +5,10 @@ import { Stylesheet } from './Stylesheet'; * Separates the classes and style objects. Any classes that are pre-registered * args are auto expanded into objects. */ -export function extractStyleParts( - ...args: (IStyle | IStyle[] | false | null | undefined)[] -): { classes: string[]; objects: IStyleBaseArray } { +export function extractStyleParts(...args: (IStyle | IStyle[] | false | null | undefined)[]): { + classes: string[]; + objects: IStyleBaseArray; +} { const classes: string[] = []; const objects: {}[] = []; const stylesheet = Stylesheet.getInstance(); diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 514a61c217b730..f23df1ac61e467 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -69,9 +69,7 @@ export interface IAreaChartState extends IBasestate { export class AreaChartBase extends React.Component { // eslint-disable-next-line @typescript-eslint/no-explicit-any private _calloutPoints: any; - private _createSet: ( - data: IChartProps, - ) => { + private _createSet: (data: IChartProps) => { colors: string[]; opacity: number[]; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index 04e6d95443251f..fe22f6ebbd4485 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -149,13 +149,8 @@ export class HeatMapChartBase extends React.Component { diff --git a/packages/react-charting/src/components/Legends/shape.tsx b/packages/react-charting/src/components/Legends/shape.tsx index 435bfd74af81c5..91cd3135771417 100644 --- a/packages/react-charting/src/components/Legends/shape.tsx +++ b/packages/react-charting/src/components/Legends/shape.tsx @@ -21,9 +21,8 @@ const pointPath: PointPathType = { [`${Points[Points.diamond]}`]: 'M2 2 L10 2 L10 10 L2 10 L2 2 Z', [`${Points[Points.hexagon]}`]: 'M9 0H3L0 5L3 10H9L12 5L9 0Z', [`${Points[Points.pentagon]}`]: 'M6.06061 0L0 4.21277L2.30303 11H9.69697L12 4.21277L6.06061 0Z', - [`${ - Points[Points.octagon] - }`]: 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z', + [`${Points[Points.octagon]}`]: + 'M7.08333 0H2.91667L0 2.91667V7.08333L2.91667 10H7.08333L10 7.08333V2.91667L7.08333 0Z', [`${CustomPoints[CustomPoints.dottedLine]}`]: 'M0 6 H3 M5 6 H8 M10 6 H13', }; diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx index a58b5f4b73209d..b6187a318a68a0 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx @@ -511,7 +511,7 @@ export class SankeyChartBase extends React.Component point.y)!; const yMin = d3Min(points, (point: IVerticalBarChartDataPoint) => point.y)!; diff --git a/packages/react-components/babel-preset-global-context/src/transformPlugin.ts b/packages/react-components/babel-preset-global-context/src/transformPlugin.ts index d19ef5dbfb1d1d..fad50e40f63c60 100644 --- a/packages/react-components/babel-preset-global-context/src/transformPlugin.ts +++ b/packages/react-components/babel-preset-global-context/src/transformPlugin.ts @@ -105,158 +105,156 @@ function hasContextSelectorImport(path: NodePath): bool return path.node.source.value === CONTEXT_SELECTOR_PACKAGE; } -export const transformPlugin = declare( - (api): PluginObj => { - api.assertVersion(7); +export const transformPlugin = declare((api): PluginObj => { + api.assertVersion(7); - return { - name: 'global-context', + return { + name: 'global-context', - pre() { - this.importDeclarationPaths = []; - this.nativeExpressionPaths = []; - this.contextSelectorExpressionPaths = []; - }, + pre() { + this.importDeclarationPaths = []; + this.nativeExpressionPaths = []; + this.contextSelectorExpressionPaths = []; + }, - visitor: { - Program: { - exit(path, state) { - if ( - state.filename === undefined || - !state.importDeclarationPaths?.length || - !state.nativeExpressionPaths || - !state.contextSelectorExpressionPaths - ) { - return; - } + visitor: { + Program: { + exit(path, state) { + if ( + state.filename === undefined || + !state.importDeclarationPaths?.length || + !state.nativeExpressionPaths || + !state.contextSelectorExpressionPaths + ) { + return; + } - const packageJsonPath = findUp.sync('package.json', { cwd: dirname(state.filename) }); - if (packageJsonPath === undefined) { - return; - } + const packageJsonPath = findUp.sync('package.json', { cwd: dirname(state.filename) }); + if (packageJsonPath === undefined) { + return; + } - if (state.importDeclarationPaths.some(hasReactImport)) { - // Adds import for global context - path.unshiftContainer('body', createGlobalContextImportDeclaration(GLOBAL_CONTEXT_PACKAGE, false)); - } + if (state.importDeclarationPaths.some(hasReactImport)) { + // Adds import for global context + path.unshiftContainer('body', createGlobalContextImportDeclaration(GLOBAL_CONTEXT_PACKAGE, false)); + } - if (state.importDeclarationPaths.some(hasContextSelectorImport)) { - // Adds import for global context selector - path.unshiftContainer('body', createGlobalContextImportDeclaration(GLOBAL_CONTEXT_PACKAGE, true)); - } + if (state.importDeclarationPaths.some(hasContextSelectorImport)) { + // Adds import for global context selector + path.unshiftContainer('body', createGlobalContextImportDeclaration(GLOBAL_CONTEXT_PACKAGE, true)); + } - const packageJson: PackageJSON = JSON.parse(readFileSync(packageJsonPath).toString()); - // substitutes expressions of react createContext to global context - for (const expressionPath of state.contextSelectorExpressionPaths) { - expressionPath.replaceWith( - createGlobalContextCallExpression({ - expressionPath, - packageJson, - packageJsonPath, - filePath: state.filename, - functionName: GLOBAL_CONTEXT_SELECTOR_ALIAS, - }), - ); - } + const packageJson: PackageJSON = JSON.parse(readFileSync(packageJsonPath).toString()); + // substitutes expressions of react createContext to global context + for (const expressionPath of state.contextSelectorExpressionPaths) { + expressionPath.replaceWith( + createGlobalContextCallExpression({ + expressionPath, + packageJson, + packageJsonPath, + filePath: state.filename, + functionName: GLOBAL_CONTEXT_SELECTOR_ALIAS, + }), + ); + } - for (const expressionPath of state.nativeExpressionPaths) { - expressionPath.replaceWith( - createGlobalContextCallExpression({ - expressionPath, - packageJson, - packageJsonPath, - filePath: state.filename, - functionName: GLOBAL_CONTEXT_ALIAS, - }), - ); - } - }, + for (const expressionPath of state.nativeExpressionPaths) { + expressionPath.replaceWith( + createGlobalContextCallExpression({ + expressionPath, + packageJson, + packageJsonPath, + filePath: state.filename, + functionName: GLOBAL_CONTEXT_ALIAS, + }), + ); + } }, + }, - /** - * Finds imports of `react` or `@fluentui/react-context-selector`. - * If `createContext` is explicitly imported, stores its imported name in state - * - * @example import { createContext as createMyContext } from 'react'; - */ - // eslint-disable-next-line @typescript-eslint/naming-convention - ImportDeclaration(path, state) { - if (!hasReactImport(path) && !hasContextSelectorImport(path)) { - return; - } + /** + * Finds imports of `react` or `@fluentui/react-context-selector`. + * If `createContext` is explicitly imported, stores its imported name in state + * + * @example import { createContext as createMyContext } from 'react'; + */ + // eslint-disable-next-line @typescript-eslint/naming-convention + ImportDeclaration(path, state) { + if (!hasReactImport(path) && !hasContextSelectorImport(path)) { + return; + } - const native = hasReactImport(path); - state.importDeclarationPaths?.push(path); + const native = hasReactImport(path); + state.importDeclarationPaths?.push(path); - for (const importSpecifier of path.node.specifiers) { - if ( - types.isImportSpecifier(importSpecifier) && - types.isIdentifier(importSpecifier.imported) && - types.isIdentifier(importSpecifier.local) && - importSpecifier.imported.name === CREATE_CONTEXT_CALL - ) { - const localName = importSpecifier.local.name; - if (native) { - state.nativeLocalName = localName; - } else { - state.contextSelectorLocalName = localName; - } + for (const importSpecifier of path.node.specifiers) { + if ( + types.isImportSpecifier(importSpecifier) && + types.isIdentifier(importSpecifier.imported) && + types.isIdentifier(importSpecifier.local) && + importSpecifier.imported.name === CREATE_CONTEXT_CALL + ) { + const localName = importSpecifier.local.name; + if (native) { + state.nativeLocalName = localName; + } else { + state.contextSelectorLocalName = localName; } } - }, - /** - * Handles case when `createContext()` is `CallExpression`. - * - * @example createContext({}) - */ - // eslint-disable-next-line @typescript-eslint/naming-convention - CallExpression(path, state) { - if (state.importDeclarationPaths?.length === 0) { - return; - } + } + }, + /** + * Handles case when `createContext()` is `CallExpression`. + * + * @example createContext({}) + */ + // eslint-disable-next-line @typescript-eslint/naming-convention + CallExpression(path, state) { + if (state.importDeclarationPaths?.length === 0) { + return; + } - const calleePath = path.get('callee'); + const calleePath = path.get('callee'); - if (!isCreateContextCallee(calleePath)) { - return; - } + if (!isCreateContextCallee(calleePath)) { + return; + } - if (types.isCallExpression(path.node) && types.isIdentifier(path.node.callee)) { - if (path.node.callee.name === state.nativeLocalName) { - state.nativeExpressionPaths?.push(path); - } - if (path.node.callee.name === state.contextSelectorLocalName) { - state.contextSelectorExpressionPaths?.push(path); - } + if (types.isCallExpression(path.node) && types.isIdentifier(path.node.callee)) { + if (path.node.callee.name === state.nativeLocalName) { + state.nativeExpressionPaths?.push(path); } - }, + if (path.node.callee.name === state.contextSelectorLocalName) { + state.contextSelectorExpressionPaths?.push(path); + } + } + }, - /** - * Handles case when `createContext()` is inside `MemberExpression`. - * Assumes that context selector is not used this way - * - * @example module.createContext({}) - */ - // eslint-disable-next-line @typescript-eslint/naming-convention - MemberExpression(expressionPath, state) { - const objectPath = expressionPath.get('object'); - const propertyPath = expressionPath.get('property'); + /** + * Handles case when `createContext()` is inside `MemberExpression`. + * Assumes that context selector is not used this way + * + * @example module.createContext({}) + */ + // eslint-disable-next-line @typescript-eslint/naming-convention + MemberExpression(expressionPath, state) { + const objectPath = expressionPath.get('object'); + const propertyPath = expressionPath.get('property'); - const isCreateContextCall = - objectPath.isIdentifier({ name: 'React' }) && propertyPath.isIdentifier({ name: 'createContext' }); + const isCreateContextCall = + objectPath.isIdentifier({ name: 'React' }) && propertyPath.isIdentifier({ name: 'createContext' }); - if (!isCreateContextCall) { - return; - } + if (!isCreateContextCall) { + return; + } - const parentPath = expressionPath.parentPath; + const parentPath = expressionPath.parentPath; - if (!parentPath.isCallExpression()) { - return; - } - state.nativeExpressionPaths?.push(parentPath); - }, + if (!parentPath.isCallExpression()) { + return; + } + state.nativeExpressionPaths?.push(parentPath); }, - }; - }, -); + }, + }; +}); diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts index 2189f287f71603..bf1141e0df65bf 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts +++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts @@ -17,10 +17,10 @@ export const useAccordionItem_unstable = ( const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle); const open = useAccordionContext_unstable(ctx => ctx.openItems.includes(value)); - const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [ - requestToggle, - value, - ]); + const onAccordionHeaderClick = React.useCallback( + (ev: AccordionToggleEvent) => requestToggle(ev, { value }), + [requestToggle, value], + ); return { open, diff --git a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts index bfbf351c1b644e..723efaaba58664 100644 --- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts +++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItemContextValues.ts @@ -3,11 +3,10 @@ import type { AccordionItemContextValue, AccordionItemContextValues, AccordionIt export function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues { const { disabled, onHeaderClick, open } = state; - const accordionItem = React.useMemo(() => ({ disabled, onHeaderClick, open }), [ - disabled, - onHeaderClick, - open, - ]); + const accordionItem = React.useMemo( + () => ({ disabled, onHeaderClick, open }), + [disabled, onHeaderClick, open], + ); return { accordionItem }; } diff --git a/packages/react-components/react-aria/src/button/useARIAButtonProps.ts b/packages/react-components/react-aria/src/button/useARIAButtonProps.ts index e4c95e6af26405..06edb19e4f63ff 100644 --- a/packages/react-components/react-aria/src/button/useARIAButtonProps.ts +++ b/packages/react-components/react-aria/src/button/useARIAButtonProps.ts @@ -34,8 +34,15 @@ export function useARIAButtonProps { - const { disabled, disabledFocusable = false, ['aria-disabled']: ariaDisabled, onClick, onKeyDown, onKeyUp, ...rest } = - props ?? {}; + const { + disabled, + disabledFocusable = false, + ['aria-disabled']: ariaDisabled, + onClick, + onKeyDown, + onKeyUp, + ...rest + } = props ?? {}; const normalizedARIADisabled = typeof ariaDisabled === 'string' ? ariaDisabled === 'true' : ariaDisabled; diff --git a/packages/react-components/react-avatar/src/utils/getInitials.ts b/packages/react-components/react-avatar/src/utils/getInitials.ts index b8caf7d4de528a..e0208dedd1a4bb 100644 --- a/packages/react-components/react-avatar/src/utils/getInitials.ts +++ b/packages/react-components/react-avatar/src/utils/getInitials.ts @@ -32,7 +32,8 @@ const MULTIPLE_WHITESPACES_REGEX: RegExp = /\s+/g; * CJK Unified Ideographs Extension B */ // eslint-disable-next-line @fluentui/max-len -const UNSUPPORTED_TEXT_REGEX: RegExp = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; +const UNSUPPORTED_TEXT_REGEX: RegExp = + /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; function getInitialsLatin(displayName: string, isRtl: boolean, firstInitialOnly?: boolean): string { let initials = ''; diff --git a/packages/react-components/react-button/src/utils/useToggleState.test.ts b/packages/react-components/react-button/src/utils/useToggleState.test.ts index 73e3844af37ceb..3bfb0b18fbbf79 100644 --- a/packages/react-components/react-button/src/utils/useToggleState.test.ts +++ b/packages/react-components/react-button/src/utils/useToggleState.test.ts @@ -76,7 +76,7 @@ describe('useToggleState', () => { act(() => { result.current.root.onClick?.( - (new MouseEvent('click') as unknown) as React.MouseEvent, + new MouseEvent('click') as unknown as React.MouseEvent, ); }); @@ -85,7 +85,7 @@ describe('useToggleState', () => { act(() => { result.current.root.onClick?.( - (new MouseEvent('click') as unknown) as React.MouseEvent, + new MouseEvent('click') as unknown as React.MouseEvent, ); }); @@ -101,7 +101,7 @@ describe('useToggleState', () => { act(() => { result.current.root.onClick?.( - (new MouseEvent('click') as unknown) as React.MouseEvent, + new MouseEvent('click') as unknown as React.MouseEvent, ); }); @@ -117,7 +117,7 @@ describe('useToggleState', () => { act(() => { result.current.root.onClick?.( - (new MouseEvent('click') as unknown) as React.MouseEvent, + new MouseEvent('click') as unknown as React.MouseEvent, ); }); @@ -135,7 +135,7 @@ describe('useToggleState', () => { act(() => { result.current.root.onClick?.( - (new MouseEvent('click') as unknown) as React.MouseEvent, + new MouseEvent('click') as unknown as React.MouseEvent, ); }); @@ -149,7 +149,7 @@ describe('useToggleState', () => { expect(result.current.checked).toBe(true); expect(result.current.root['aria-pressed']).toBe(true); act(() => { - const ev = (new MouseEvent('click', { cancelable: true }) as unknown) as React.MouseEvent< + const ev = new MouseEvent('click', { cancelable: true }) as unknown as React.MouseEvent< HTMLButtonElement & HTMLAnchorElement >; ev.preventDefault(); diff --git a/packages/react-components/react-button/src/utils/useToggleState.ts b/packages/react-components/react-button/src/utils/useToggleState.ts index 32fcfcf9607937..2b8f8d938fa453 100644 --- a/packages/react-components/react-button/src/utils/useToggleState.ts +++ b/packages/react-components/react-button/src/utils/useToggleState.ts @@ -6,7 +6,7 @@ import type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton'; export function useToggleState< TToggleButtonProps extends Pick, TButtonState extends Pick, - TToggleButtonState extends Pick + TToggleButtonState extends Pick, >(props: TToggleButtonProps, state: TButtonState): TToggleButtonState { const { checked, defaultChecked, disabled, disabledFocusable } = props; const { onClick, role } = state.root; diff --git a/packages/react-components/react-card/src/components/Card/useCard.ts b/packages/react-components/react-card/src/components/Card/useCard.ts index 8d33413c286d15..156b30200697d6 100644 --- a/packages/react-components/react-card/src/components/Card/useCard.ts +++ b/packages/react-components/react-card/src/components/Card/useCard.ts @@ -22,18 +22,20 @@ const focusMap = { * @param props - props from this instance of Card */ const useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => { - const interactive = ([ - 'onClick', - 'onDoubleClick', - 'onMouseUp', - 'onMouseDown', - 'onPointerUp', - 'onPointerDown', - 'onTouchStart', - 'onTouchEnd', - 'onDragStart', - 'onDragEnd', - ] as (keyof React.HTMLAttributes)[]).some(prop => props[prop]); + const interactive = ( + [ + 'onClick', + 'onDoubleClick', + 'onMouseUp', + 'onMouseDown', + 'onPointerUp', + 'onPointerDown', + 'onTouchStart', + 'onTouchEnd', + 'onDragStart', + 'onDragEnd', + ] as (keyof React.HTMLAttributes)[] + ).some(prop => props[prop]); const groupperAttrs = useFocusableGroup({ tabBehavior: focusMap[interactive ? 'no-tab' : focusMode], @@ -66,14 +68,8 @@ export const useCard_unstable = (props: CardProps, ref: React.Ref(); - const { - selectable, - selected, - selectableCardProps, - selectFocused, - checkboxSlot, - floatingActionSlot, - } = useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef); + const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = + useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef); const cardRef = useMergedRefs(cardBaseRef, ref); diff --git a/packages/react-components/react-card/src/components/Card/useCardSelectable.ts b/packages/react-components/react-card/src/components/Card/useCardSelectable.ts index 944b9e2cb9be21..a527d2832cb497 100644 --- a/packages/react-components/react-card/src/components/Card/useCardSelectable.ts +++ b/packages/react-components/react-card/src/components/Card/useCardSelectable.ts @@ -125,11 +125,10 @@ export const useCardSelectable = ( }; }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]); - React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [ - defaultSelected, - selected, - setIsCardSelected, - ]); + React.useEffect( + () => setIsCardSelected(Boolean(defaultSelected ?? selected)), + [defaultSelected, selected, setIsCardSelected], + ); return { selected: isCardSelected, diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx index ef1b750b9da4a0..b524fae7d921e8 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx @@ -22,15 +22,8 @@ import { useMergedRefs } from '@fluentui/react-utilities'; */ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref): DropdownState => { const baseState = useComboboxBaseState(props); - const { - activeOption, - getIndexOfId, - getOptionsMatchingText, - open, - setActiveOption, - setFocusVisible, - setOpen, - } = baseState; + const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } = + baseState; const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({ props, diff --git a/packages/react-components/react-combobox/src/components/Option/useOption.tsx b/packages/react-components/react-combobox/src/components/Option/useOption.tsx index 18f920d1c3420a..acc1282bffa4e8 100644 --- a/packages/react-components/react-combobox/src/components/Option/useOption.tsx +++ b/packages/react-components/react-combobox/src/components/Option/useOption.tsx @@ -50,12 +50,10 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref(() => ({ id, disabled, text: optionText, value: optionValue }), [ - id, - disabled, - optionText, - optionValue, - ]); + const optionData = React.useMemo( + () => ({ id, disabled, text: optionText, value: optionValue }), + [id, disabled, optionText, optionValue], + ); // context values const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible); diff --git a/packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts b/packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts index a9339ad2c577de..29c27f1cb071de 100644 --- a/packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts +++ b/packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts @@ -4,15 +4,8 @@ import { ComboboxContext } from './ComboboxContext'; export function useListboxContextValues(state: ListboxState): ListboxContextValues { const hasComboboxContext = useHasParentContext(ComboboxContext); - const { - activeOption, - focusVisible, - multiselect, - registerOption, - selectedOptions, - selectOption, - setActiveOption, - } = state; + const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } = + state; // get register/unregister functions from parent combobox context const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption); diff --git a/packages/react-components/react-components/stories/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/react-components/stories/AccessibilityScenarios/Input.stories.tsx index 41ab79a42ff1b8..5ab8f169e02592 100644 --- a/packages/react-components/react-components/stories/AccessibilityScenarios/Input.stories.tsx +++ b/packages/react-components/react-components/stories/AccessibilityScenarios/Input.stories.tsx @@ -10,7 +10,8 @@ import { usePubSub, PubSubProvider, Handler } from '@cactuslab/usepubsub'; const regexes = { onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/, // eslint-disable-next-line @fluentui/max-len - startsAndEndsWithLetter: /^(([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])|[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/, + startsAndEndsWithLetter: + /^(([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])|[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/, noWhitespace: /^\S*$/, hasNumber: /^\S*[0-9]\S*$/, hasLowercaseLetter: /^\S*[a-z]\S*$/, @@ -18,7 +19,8 @@ const regexes = { hasSpecialChar: /^\S*[^0-9a-zA-ZÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ\s]\S*$/, validDate: /^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$/, // eslint-disable-next-line @fluentui/max-len - validEmail: /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i, + validEmail: + /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i, }; const generateTicketNumber = (): string => { diff --git a/packages/react-components/react-components/stories/Migrations/utils.stories.tsx b/packages/react-components/react-components/stories/Migrations/utils.stories.tsx index 6db496bc48ce98..7077cc876b3aee 100644 --- a/packages/react-components/react-components/stories/Migrations/utils.stories.tsx +++ b/packages/react-components/react-components/stories/Migrations/utils.stories.tsx @@ -42,9 +42,9 @@ export const CodeExample = (props: { title?: string; children: React.ReactElemen const value: string = markdownCodeBlockValue.trim(); const codeBlockTag = '```'; // JSX source blocks are passed without the backticks - const language = (value.includes(codeBlockTag) - ? value.substring(3, value.indexOf('\n')) - : 'jsx') as keyof typeof codeLanguages; + const language = ( + value.includes(codeBlockTag) ? value.substring(3, value.indexOf('\n')) : 'jsx' + ) as keyof typeof codeLanguages; const code = value .replace(codeBlockTag + language, '') .replace(codeBlockTag, '') diff --git a/packages/react-components/react-context-selector/src/createContext.ts b/packages/react-components/react-context-selector/src/createContext.ts index 573f7dc6c71430..4a0cbddf915cb2 100644 --- a/packages/react-components/react-context-selector/src/createContext.ts +++ b/packages/react-components/react-context-selector/src/createContext.ts @@ -41,7 +41,7 @@ const createProvider = (Original: React.Provider>) => Provider.displayName = 'ContextSelector.Provider'; } - return (Provider as unknown) as React.Provider>; + return Provider as unknown as React.Provider>; }; /** @@ -58,7 +58,7 @@ export const createContext = (defaultValue: Value): Context => { context.Provider = createProvider(context.Provider); // We don't support Consumer API - delete ((context as unknown) as Context).Consumer; + delete (context as unknown as Context).Consumer; - return (context as unknown) as Context; + return context as unknown as Context; }; diff --git a/packages/react-components/react-context-selector/src/useContextSelector.ts b/packages/react-components/react-context-selector/src/useContextSelector.ts index 32b81e54268c59..112f6976acf00e 100644 --- a/packages/react-components/react-context-selector/src/useContextSelector.ts +++ b/packages/react-components/react-context-selector/src/useContextSelector.ts @@ -22,7 +22,7 @@ export const useContextSelector = ( context: Context, selector: ContextSelector, ): SelectedValue => { - const contextValue = React.useContext((context as unknown) as Context>); + const contextValue = React.useContext(context as unknown as Context>); const { value: { current: value }, diff --git a/packages/react-components/react-context-selector/src/useHasParentContext.ts b/packages/react-components/react-context-selector/src/useHasParentContext.ts index 542ab81697848d..2ebdf51a868c12 100644 --- a/packages/react-components/react-context-selector/src/useHasParentContext.ts +++ b/packages/react-components/react-context-selector/src/useHasParentContext.ts @@ -10,7 +10,7 @@ import { Context, ContextValue } from './types'; * @returns whether the hook is wrapped by a parent context */ export function useHasParentContext(context: Context) { - const contextValue = React.useContext((context as unknown) as Context>); + const contextValue = React.useContext(context as unknown as Context>); if (contextValue.version) { return contextValue.version.current !== -1; diff --git a/packages/react-components/react-datepicker/src/components/CalendarDay/CalendarDay.tsx b/packages/react-components/react-datepicker/src/components/CalendarDay/CalendarDay.tsx index 49be1c44ae3097..ee88de2d7758de 100644 --- a/packages/react-components/react-datepicker/src/components/CalendarDay/CalendarDay.tsx +++ b/packages/react-components/react-datepicker/src/components/CalendarDay/CalendarDay.tsx @@ -171,14 +171,12 @@ const CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): }; CalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons'; -const onButtonKeyDown = ( - callback?: () => void, -): ((ev: React.KeyboardEvent) => void) => ( - ev: React.KeyboardEvent, -) => { - switch (ev.key) { - case Enter: - callback?.(); - break; - } -}; +const onButtonKeyDown = + (callback?: () => void): ((ev: React.KeyboardEvent) => void) => + (ev: React.KeyboardEvent) => { + switch (ev.key) { + case Enter: + callback?.(); + break; + } + }; diff --git a/packages/react-components/react-datepicker/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts index bfa6b4a0545fd2..17861497dd8cc4 100644 --- a/packages/react-components/react-datepicker/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts +++ b/packages/react-components/react-datepicker/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts @@ -322,13 +322,8 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro const lastTransitionWeekStyles = useLastTransitionWeekStyles(); const dayMarkerStyles = useDayMarkerStyles(); - const { - animateBackwards, - animationDirection, - dateRangeType, - lightenDaysOutsideNavigatedMonth, - showWeekNumbers, - } = props; + const { animateBackwards, animationDirection, dateRangeType, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = + props; return { wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base), diff --git a/packages/react-components/react-datepicker/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker/src/components/DatePicker/useDatePicker.tsx index fd0a218c10fa83..776c5a20773aba 100644 --- a/packages/react-components/react-datepicker/src/components/DatePicker/useDatePicker.tsx +++ b/packages/react-components/react-datepicker/src/components/DatePicker/useDatePicker.tsx @@ -510,7 +510,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref} />, + contentAfter: } />, disabled, id: textFieldId, placeholder, diff --git a/packages/react-components/react-input/docs/Spec-variants.md b/packages/react-components/react-input/docs/Spec-variants.md index d2bacd58c28ce0..9ad706e70e6251 100644 --- a/packages/react-components/react-input/docs/Spec-variants.md +++ b/packages/react-components/react-input/docs/Spec-variants.md @@ -36,7 +36,7 @@ type TextInputSlots< TInput extends HTMLInputElement | HTMLTextAreaElement, TInputAttributes = TInput extends HTMLInputElement ? React.InputHTMLAttributes - : React.TextAreaHTMLAttributes + : React.TextAreaHTMLAttributes, > = { root: ComponentSlotProps, HTMLElement>; input: ComponentSlotProps; diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuList.test.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuList.test.ts index a75532ec00fddc..0122bb5c6cd791 100644 --- a/packages/react-components/react-menu/src/components/MenuList/useMenuList.test.ts +++ b/packages/react-components/react-menu/src/components/MenuList/useMenuList.test.ts @@ -39,7 +39,7 @@ describe('useMenuList_unstable', () => { // Act const { result } = renderHook(() => useMenuList_unstable({ defaultCheckedValues }, null)); - act(() => result.current.selectRadio(({} as unknown) as React.MouseEvent, 'foo', '2', false)); + act(() => result.current.selectRadio({} as unknown as React.MouseEvent, 'foo', '2', false)); // Assert expect(result.current.checkedValues).toEqual(expectedCheckedValues); @@ -106,7 +106,7 @@ describe('useMenuList_unstable', () => { const { result } = renderHook(() => useMenuList_unstable({ onCheckedValueChange: jest.fn(), checkedValues: undefined }, null), ); - act(() => result.current.toggleCheckbox(({} as unknown) as React.MouseEvent, name, value, false)); + act(() => result.current.toggleCheckbox({} as unknown as React.MouseEvent, name, value, false)); // Assert expect(result.current.checkedValues).toEqual({ [name]: [value] }); @@ -132,7 +132,7 @@ describe('useMenuList_unstable', () => { ), ); const state = result.current; - act(() => state.toggleCheckbox(({} as unknown) as React.MouseEvent, name, value, checked)); + act(() => state.toggleCheckbox({} as unknown as React.MouseEvent, name, value, checked)); // Assert expect(handleCheckedValueChange).toHaveBeenCalledTimes(1); @@ -179,7 +179,7 @@ describe('useMenuList_unstable', () => { ), ); const state = result.current; - act(() => state.selectRadio(({} as unknown) as React.MouseEvent, name, value, true)); + act(() => state.selectRadio({} as unknown as React.MouseEvent, name, value, true)); // Assert expect(handleCheckedValueChange).toHaveBeenCalledTimes(1); diff --git a/packages/react-components/react-menu/src/contexts/menuContext.ts b/packages/react-components/react-menu/src/contexts/menuContext.ts index 263084872be8be..4044839112e2b7 100644 --- a/packages/react-components/react-menu/src/contexts/menuContext.ts +++ b/packages/react-components/react-menu/src/contexts/menuContext.ts @@ -13,8 +13,8 @@ const menuContextDefaultValue: MenuContextValue = { checkedValues: {}, onCheckedValueChange: () => null, isSubmenu: false, - triggerRef: ({ current: null } as unknown) as React.MutableRefObject, - menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject, + triggerRef: { current: null } as unknown as React.MutableRefObject, + menuPopoverRef: { current: null } as unknown as React.MutableRefObject, triggerId: '', openOnContext: false, openOnHover: false, diff --git a/packages/react-components/react-menu/src/testing/mockUseMenuContext.ts b/packages/react-components/react-menu/src/testing/mockUseMenuContext.ts index c686779dbd06c2..b83459061c727c 100644 --- a/packages/react-components/react-menu/src/testing/mockUseMenuContext.ts +++ b/packages/react-components/react-menu/src/testing/mockUseMenuContext.ts @@ -11,8 +11,8 @@ export const mockUseMenuContext = (options: Partial = {}) => { const mockContext: MenuContextValue = { open: false, setOpen: () => null, - triggerRef: ({ current: null } as unknown) as React.MutableRefObject, - menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject, + triggerRef: { current: null } as unknown as React.MutableRefObject, + menuPopoverRef: { current: null } as unknown as React.MutableRefObject, openOnContext: false, openOnHover: false, isSubmenu: false, diff --git a/packages/react-components/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx b/packages/react-components/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx index d4bd62a530e4b5..c2c8d3e73589f7 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx +++ b/packages/react-components/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx @@ -9,15 +9,14 @@ import { shimButtonProps } from './shimButtonProps'; /** * Shims a v8 ActionButton to render a v9 Button */ -export const ActionButtonShim: React.ForwardRefExoticComponent< - IButtonProps & React.RefAttributes -> = React.forwardRef((props, _ref) => { - const variantProps = { - ...props, - variantClassName: 'ms-Button--action ms-Button--command', - }; +export const ActionButtonShim: React.ForwardRefExoticComponent> = + React.forwardRef((props, _ref) => { + const variantProps = { + ...props, + variantClassName: 'ms-Button--action ms-Button--command', + }; - const shimProps = shimButtonProps(variantProps); + const shimProps = shimButtonProps(variantProps); - return , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!!.firstChild as Element; const buttonA = focusZone.querySelector('#a') as HTMLElement; const buttonB = focusZone.querySelector('#b') as HTMLElement; @@ -514,7 +514,7 @@ describe('FocusZone', () => {

, ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; @@ -558,7 +558,7 @@ describe('FocusZone', () => {
, ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -657,7 +657,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -772,7 +772,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -886,7 +886,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -957,7 +957,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -1063,7 +1063,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -1181,7 +1181,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -1266,7 +1266,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -1375,7 +1375,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -1475,7 +1475,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; const buttonC = focusZone.querySelector('.c') as HTMLElement; @@ -1542,7 +1542,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const divB = focusZone.querySelector('.b') as HTMLElement; @@ -1624,7 +1624,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const divB = focusZone.querySelector('.b') as HTMLElement; @@ -1723,7 +1723,7 @@ describe('FocusZone', () => { , ); - const rootNode = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance) as Element; + const rootNode = ReactDOM.findDOMNode(component as unknown as React.ReactInstance) as Element; const textArea = rootNode.children[0]; setupElement(buttonA, { @@ -1772,7 +1772,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const inputA = focusZone.querySelector('.a') as HTMLElement; const inputB = focusZone.querySelector('.b') as HTMLElement; @@ -1847,7 +1847,7 @@ describe('FocusZone', () => { , ); - const focusZoneElement = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZoneElement = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonAElement = focusZoneElement.querySelector('.a') as HTMLElement; // HACK declare that elements are not null at this point. @@ -1909,7 +1909,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; @@ -1989,7 +1989,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; @@ -2025,7 +2025,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const inputA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; @@ -2092,7 +2092,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const inputA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; @@ -2136,7 +2136,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance) as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance) as Element; const innerFocusZone = focusZone.querySelector('.innerFocusZone') as HTMLElement; ReactTestUtils.Simulate.keyDown(innerFocusZone, { which: KeyCodes.del }); @@ -2155,7 +2155,7 @@ describe('FocusZone', () => { , ); - const parent = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)! as Element; + const parent = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)! as Element; const externalElement = document.querySelector('#externalElement') as HTMLElement; const buttonA = parent.querySelector('#a') as HTMLElement; @@ -2197,7 +2197,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; @@ -2274,7 +2274,7 @@ describe('FocusZone', () => { , ); - const focusZone = ReactDOM.findDOMNode((component as unknown) as React.ReactInstance)!.firstChild as Element; + const focusZone = ReactDOM.findDOMNode(component as unknown as React.ReactInstance)!.firstChild as Element; const buttonA = focusZone.querySelector('.a') as HTMLElement; const buttonB = focusZone.querySelector('.b') as HTMLElement; diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx index f3f910d0054357..fe22bb57a16930 100644 --- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx +++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx @@ -927,9 +927,9 @@ export class FocusZone extends React.Component implements IFocu const activeRect = isBidirectional ? element.getBoundingClientRect() : null; do { - element = (isForward - ? getNextElement(this._root.current, element) - : getPreviousElement(this._root.current, element)) as HTMLElement; + element = ( + isForward ? getNextElement(this._root.current, element) : getPreviousElement(this._root.current, element) + ) as HTMLElement; if (isBidirectional) { if (element) { diff --git a/packages/react-hooks/README.md b/packages/react-hooks/README.md index 9b94762bd3c6f0..8a3b7c9807760b 100644 --- a/packages/react-hooks/README.md +++ b/packages/react-hooks/README.md @@ -102,7 +102,7 @@ function useControllableValue( function useControllableValue< TValue, TElement extends HTMLElement, - TCallback extends ChangeCallback | undefined + TCallback extends ChangeCallback | undefined, >( controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, diff --git a/packages/react-hooks/src/useControllableValue.ts b/packages/react-hooks/src/useControllableValue.ts index 1a1d429310fa34..7d786bc4f8ecf6 100644 --- a/packages/react-hooks/src/useControllableValue.ts +++ b/packages/react-hooks/src/useControllableValue.ts @@ -4,7 +4,7 @@ import { useConst } from './useConst'; export type ChangeCallback< TElement extends HTMLElement, TValue, - TEvent extends React.SyntheticEvent | undefined + TEvent extends React.SyntheticEvent | undefined, > = (ev: TEvent, newValue: TValue | undefined) => void; /** @@ -25,7 +25,7 @@ export function useControllableValue( export function useControllableValue< TValue, TElement extends HTMLElement, - TEvent extends React.SyntheticEvent | undefined + TEvent extends React.SyntheticEvent | undefined, >( controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, @@ -36,7 +36,7 @@ export function useControllableValue< export function useControllableValue< TValue, TElement extends HTMLElement, - TEvent extends React.SyntheticEvent | undefined + TEvent extends React.SyntheticEvent | undefined, >( controlledValue: TValue | undefined, defaultUncontrolledValue: TValue | undefined, diff --git a/packages/react-hooks/src/useMergedRefs.ts b/packages/react-hooks/src/useMergedRefs.ts index 11464490c17df2..b2ae3599b3faf7 100644 --- a/packages/react-hooks/src/useMergedRefs.ts +++ b/packages/react-hooks/src/useMergedRefs.ts @@ -13,23 +13,23 @@ export type RefObjectFunction = React.RefObject & ((value: T) => void); * @returns A function with an attached "current" prop, so that it can be treated like a RefObject. */ export function useMergedRefs(...refs: (React.Ref | undefined)[]): RefObjectFunction { - const mergedCallback: RefObjectFunction = (React.useCallback( + const mergedCallback: RefObjectFunction = React.useCallback( (value: T) => { // Update the "current" prop hanging on the function. - ((mergedCallback as unknown) as React.MutableRefObject).current = value; + (mergedCallback as unknown as React.MutableRefObject).current = value; for (const ref of refs) { if (typeof ref === 'function') { ref(value); } else if (ref) { // work around the immutability of the React.Ref type - ((ref as unknown) as React.MutableRefObject).current = value; + (ref as unknown as React.MutableRefObject).current = value; } } }, // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive [...refs], - ) as unknown) as RefObjectFunction; + ) as unknown as RefObjectFunction; return mergedCallback; } diff --git a/packages/react-hooks/src/useSetInterval.ts b/packages/react-hooks/src/useSetInterval.ts index ccaac36b749d6b..272aeec5edec26 100644 --- a/packages/react-hooks/src/useSetInterval.ts +++ b/packages/react-hooks/src/useSetInterval.ts @@ -25,7 +25,7 @@ export const useSetInterval = (): UseSetIntervalReturnType => { return useConst({ setInterval: (func: () => void, duration: number): number => { - const id = (setInterval(func, duration) as unknown) as number; + const id = setInterval(func, duration) as unknown as number; intervalIds[id] = 1; diff --git a/packages/react-hooks/src/useSetTimeout.ts b/packages/react-hooks/src/useSetTimeout.ts index 7ae090aef177c0..df05047cd950f8 100644 --- a/packages/react-hooks/src/useSetTimeout.ts +++ b/packages/react-hooks/src/useSetTimeout.ts @@ -27,7 +27,7 @@ export const useSetTimeout = (): UseSetTimeoutReturnType => { // Return wrapper which will auto cleanup. return useConst({ setTimeout: (func: () => void, duration: number): number => { - const id = (setTimeout(func, duration) as unknown) as number; + const id = setTimeout(func, duration) as unknown as number; timeoutIds[id] = 1; diff --git a/packages/react-monaco-editor/src/components/EditorWrapper.tsx b/packages/react-monaco-editor/src/components/EditorWrapper.tsx index 319e1bbf02b680..d0f3e4bc1f2409 100644 --- a/packages/react-monaco-editor/src/components/EditorWrapper.tsx +++ b/packages/react-monaco-editor/src/components/EditorWrapper.tsx @@ -39,11 +39,10 @@ export const EditorWrapper: React.FunctionComponent = props const { component: ExampleComponent } = transformResult; // Check if editing should be enabled - const canEdit = React.useMemo(() => isEditorSupported(code, supportedPackages, useEditor), [ - useEditor, - code, - supportedPackages, - ]); + const canEdit = React.useMemo( + () => isEditorSupported(code, supportedPackages, useEditor), + [useEditor, code, supportedPackages], + ); const onTransformFinished = React.useCallback( (result: ITransformedExample) => { diff --git a/packages/react-monaco-editor/src/transpiler/transpile.ts b/packages/react-monaco-editor/src/transpiler/transpile.ts index 22cc25ebec277d..7aea60120eec3f 100644 --- a/packages/react-monaco-editor/src/transpiler/transpile.ts +++ b/packages/react-monaco-editor/src/transpiler/transpile.ts @@ -72,36 +72,32 @@ export function transpileAndEval( ): Promise { const exampleTs = model.getValue(); return transpile(model) - .then( - (transpileOutput: ITransformedCode): ITransformedExample => { - if (transpileOutput.error) { - return transpileOutput; - } + .then((transpileOutput: ITransformedCode): ITransformedExample => { + if (transpileOutput.error) { + return transpileOutput; + } - /* eslint-disable no-eval */ - const transformedExample = transformExample({ - tsCode: exampleTs, - jsCode: transpileOutput.output, - returnFunction: true, - supportedPackages, - }); - if (transformedExample.output) { - return { - ...transformedExample, - // Pass in the right React in case there's a different global one on the page... - component: eval(transformedExample.output)(React), - }; - } else { - return { error: transformedExample.error || 'Unknown error transforming example' }; - } - }, - ) - .catch( - (err: string | Error): ITransformedExample => { - // Log the error to the console so people can see the full stack/etc if they want - // eslint-disable-next-line no-console - console.error(err); - return { error: typeof err === 'string' ? err : err.message }; - }, - ); + /* eslint-disable no-eval */ + const transformedExample = transformExample({ + tsCode: exampleTs, + jsCode: transpileOutput.output, + returnFunction: true, + supportedPackages, + }); + if (transformedExample.output) { + return { + ...transformedExample, + // Pass in the right React in case there's a different global one on the page... + component: eval(transformedExample.output)(React), + }; + } else { + return { error: transformedExample.error || 'Unknown error transforming example' }; + } + }) + .catch((err: string | Error): ITransformedExample => { + // Log the error to the console so people can see the full stack/etc if they want + // eslint-disable-next-line no-console + console.error(err); + return { error: typeof err === 'string' ? err : err.message }; + }); } diff --git a/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts b/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts index 027d0795df8438..5f698e74d88fcd 100644 --- a/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts +++ b/packages/react-monaco-editor/src/transpiler/transpileHelpers.test.ts @@ -14,52 +14,10 @@ const diagnostics: IDiagnostic[] = [ { start: 225, length: 32, messageText: "JSX element implicitly has type 'any'.", code: 7026, category: 1 }, ]; const lineStarts = [ - 0, - 32, - 93, - 94, - 166, - 199, - 212, - 251, - 271, - 298, - 336, - 354, - 374, - 393, - 452, - 511, - 570, - 581, - 594, - 601, - 605, - 607, + 0, 32, 93, 94, 166, 199, 212, 251, 271, 298, 336, 354, 374, 393, 452, 511, 570, 581, 594, 601, 605, 607, ]; const lineStartsCRLF = [ - 0, - 33, - 95, - 97, - 170, - 204, - 218, - 258, - 279, - 307, - 346, - 365, - 386, - 406, - 466, - 526, - 586, - 598, - 612, - 620, - 625, - 628, + 0, 33, 95, 97, 170, 204, 218, 258, 279, 307, 346, 365, 386, 406, 466, 526, 586, 598, 612, 620, 625, 628, ]; describe('_getLineStarts', () => { diff --git a/packages/react-window-provider/src/WindowProvider.test.tsx b/packages/react-window-provider/src/WindowProvider.test.tsx index 0e49133e4d2d6a..a924e4cfcf07b2 100644 --- a/packages/react-window-provider/src/WindowProvider.test.tsx +++ b/packages/react-window-provider/src/WindowProvider.test.tsx @@ -21,8 +21,8 @@ describe('WindowProvider', () => { }); it('can override defaults', () => { - const mockDocument = ({} as unknown) as Document; - const mockWindow = ({ document: mockDocument } as unknown) as Window; + const mockDocument = {} as unknown as Document; + const mockWindow = { document: mockDocument } as unknown as Window; render( diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx index ffe8d5e0c15d2e..8ef951a6acd6cb 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -167,20 +167,18 @@ export class BreadcrumbBase extends React.Component { } = data.props; const { renderedOverflowItems, renderedItems } = data; - const contextualItems = renderedOverflowItems.map( - (item): IContextualMenuItem => { - const isActionable = !!(item.onClick || item.href); - return { - text: item.text, - name: item.text, - key: item.key, - onClick: item.onClick ? this._onBreadcrumbClicked.bind(this, item) : null, - href: item.href, - disabled: !isActionable, - itemProps: isActionable ? undefined : nonActionableItemProps, - }; - }, - ); + const contextualItems = renderedOverflowItems.map((item): IContextualMenuItem => { + const isActionable = !!(item.onClick || item.href); + return { + text: item.text, + name: item.text, + key: item.key, + onClick: item.onClick ? this._onBreadcrumbClicked.bind(this, item) : null, + href: item.href, + disabled: !isActionable, + itemProps: isActionable ? undefined : nonActionableItemProps, + }; + }); // Find index of last rendered item so the divider icon // knows not to render on that item diff --git a/packages/react/src/components/Button/ActionButton/ActionButton.styles.ts b/packages/react/src/components/Button/ActionButton/ActionButton.styles.ts index 84d9cad91e2338..3da2e1f64d4c12 100644 --- a/packages/react/src/components/Button/ActionButton/ActionButton.styles.ts +++ b/packages/react/src/components/Button/ActionButton/ActionButton.styles.ts @@ -7,88 +7,86 @@ import type { ITheme } from '../../../Styling'; const DEFAULT_BUTTON_HEIGHT = '40px'; const DEFAULT_PADDING = '0 4px'; -export const getStyles = memoizeFunction( - (theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { - const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - const actionButtonStyles: IButtonStyles = { - root: { - padding: DEFAULT_PADDING, - height: DEFAULT_BUTTON_HEIGHT, - color: theme.palette.neutralPrimary, - backgroundColor: 'transparent', - border: '1px solid transparent', - selectors: { - [HighContrastSelector]: { - borderColor: 'Window', - }, +export const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const actionButtonStyles: IButtonStyles = { + root: { + padding: DEFAULT_PADDING, + height: DEFAULT_BUTTON_HEIGHT, + color: theme.palette.neutralPrimary, + backgroundColor: 'transparent', + border: '1px solid transparent', + selectors: { + [HighContrastSelector]: { + borderColor: 'Window', }, }, + }, - rootHovered: { - color: theme.palette.themePrimary, - selectors: { - [HighContrastSelector]: { - color: 'Highlight', - }, + rootHovered: { + color: theme.palette.themePrimary, + selectors: { + [HighContrastSelector]: { + color: 'Highlight', }, }, - - iconHovered: { - color: theme.palette.themePrimary, - }, - - rootPressed: { - color: theme.palette.black, - }, - - rootExpanded: { - color: theme.palette.themePrimary, - }, - - iconPressed: { - color: theme.palette.themeDarker, - }, - - rootDisabled: { - color: theme.palette.neutralTertiary, - backgroundColor: 'transparent', - borderColor: 'transparent', - selectors: { - [HighContrastSelector]: { - color: 'GrayText', - }, + }, + + iconHovered: { + color: theme.palette.themePrimary, + }, + + rootPressed: { + color: theme.palette.black, + }, + + rootExpanded: { + color: theme.palette.themePrimary, + }, + + iconPressed: { + color: theme.palette.themeDarker, + }, + + rootDisabled: { + color: theme.palette.neutralTertiary, + backgroundColor: 'transparent', + borderColor: 'transparent', + selectors: { + [HighContrastSelector]: { + color: 'GrayText', }, }, + }, - rootChecked: { - color: theme.palette.black, - }, + rootChecked: { + color: theme.palette.black, + }, - iconChecked: { - color: theme.palette.themeDarker, - }, + iconChecked: { + color: theme.palette.themeDarker, + }, - flexContainer: { - justifyContent: 'flex-start', - }, + flexContainer: { + justifyContent: 'flex-start', + }, - icon: { - color: theme.palette.themeDarkAlt, - }, + icon: { + color: theme.palette.themeDarkAlt, + }, - iconDisabled: { - color: 'inherit', - }, + iconDisabled: { + color: 'inherit', + }, - menuIcon: { - color: theme.palette.neutralSecondary, - }, + menuIcon: { + color: theme.palette.neutralSecondary, + }, - textContainer: { - flexGrow: 0, - }, - }; + textContainer: { + flexGrow: 0, + }, + }; - return concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles)!; - }, -); + return concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles)!; +}); diff --git a/packages/react/src/components/Button/BaseButton.styles.ts b/packages/react/src/components/Button/BaseButton.styles.ts index a11ded5b9ec6e4..1d67e490ea690a 100644 --- a/packages/react/src/components/Button/BaseButton.styles.ts +++ b/packages/react/src/components/Button/BaseButton.styles.ts @@ -23,106 +23,104 @@ const iconStyle = (fontSize?: string | number): IRawStyle => { * helper, it should have values for all class names in the interface. This let `mergeRules` optimize * mixing class names together. */ -export const getStyles = memoizeFunction( - (theme: ITheme): IButtonStyles => { - const { semanticColors, effects, fonts } = theme; +export const getStyles = memoizeFunction((theme: ITheme): IButtonStyles => { + const { semanticColors, effects, fonts } = theme; - const border = semanticColors.buttonBorder; - const disabledBackground = semanticColors.disabledBackground; - const disabledText = semanticColors.disabledText; - const buttonHighContrastFocus = { - left: -2, - top: -2, - bottom: -2, - right: -2, - outlineColor: 'ButtonText', - }; - - return { - root: [ - getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }), - theme.fonts.medium, - { - border: '1px solid ' + border, - borderRadius: effects.roundedCorner2, - boxSizing: 'border-box', - cursor: 'pointer', - display: 'inline-block', - padding: '0 16px', - textDecoration: 'none', - textAlign: 'center', - userSelect: 'none', - - selectors: { - // IE11 workaround for preventing shift of child elements of a button when active. - ':active > span': { - position: 'relative', - left: 0, - top: 0, - }, - }, - }, - ], + const border = semanticColors.buttonBorder; + const disabledBackground = semanticColors.disabledBackground; + const disabledText = semanticColors.disabledText; + const buttonHighContrastFocus = { + left: -2, + top: -2, + bottom: -2, + right: -2, + outlineColor: 'ButtonText', + }; - rootDisabled: [ - getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }), - { - backgroundColor: disabledBackground, - borderColor: disabledBackground, - color: disabledText, - cursor: 'default', - selectors: { - ':hover': noOutline, - ':focus': noOutline, - }, - }, - ], + return { + root: [ + getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }), + theme.fonts.medium, + { + border: '1px solid ' + border, + borderRadius: effects.roundedCorner2, + boxSizing: 'border-box', + cursor: 'pointer', + display: 'inline-block', + padding: '0 16px', + textDecoration: 'none', + textAlign: 'center', + userSelect: 'none', - iconDisabled: { - color: disabledText, selectors: { - [HighContrastSelector]: { - color: 'GrayText', + // IE11 workaround for preventing shift of child elements of a button when active. + ':active > span': { + position: 'relative', + left: 0, + top: 0, }, }, }, + ], - menuIconDisabled: { + rootDisabled: [ + getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }), + { + backgroundColor: disabledBackground, + borderColor: disabledBackground, color: disabledText, + cursor: 'default', selectors: { - [HighContrastSelector]: { - color: 'GrayText', - }, + ':hover': noOutline, + ':focus': noOutline, }, }, + ], - flexContainer: { - display: 'flex', - height: '100%', - flexWrap: 'nowrap', - justifyContent: 'center', - alignItems: 'center', - }, - description: { - display: 'block', + iconDisabled: { + color: disabledText, + selectors: { + [HighContrastSelector]: { + color: 'GrayText', + }, }, + }, - textContainer: { - flexGrow: 1, - display: 'block', + menuIconDisabled: { + color: disabledText, + selectors: { + [HighContrastSelector]: { + color: 'GrayText', + }, }, + }, - icon: iconStyle(fonts.mediumPlus.fontSize), + flexContainer: { + display: 'flex', + height: '100%', + flexWrap: 'nowrap', + justifyContent: 'center', + alignItems: 'center', + }, + description: { + display: 'block', + }, - menuIcon: iconStyle(fonts.small.fontSize), + textContainer: { + flexGrow: 1, + display: 'block', + }, - label: { - margin: '0 4px', - lineHeight: '100%', - display: 'block', - }, + icon: iconStyle(fonts.mediumPlus.fontSize), + + menuIcon: iconStyle(fonts.small.fontSize), - screenReaderText: hiddenContentStyle, - }; - }, -); + label: { + margin: '0 4px', + lineHeight: '100%', + display: 'block', + }, + + screenReaderText: hiddenContentStyle, + }; +}); diff --git a/packages/react/src/components/Button/BaseButton.tsx b/packages/react/src/components/Button/BaseButton.tsx index 14e43a712a0dcd..f066368adfd030 100644 --- a/packages/react/src/components/Button/BaseButton.tsx +++ b/packages/react/src/components/Button/BaseButton.tsx @@ -699,14 +699,8 @@ export class BaseButton extends React.Component { - const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); - const { palette, semanticColors } = theme; - const iconButtonStyles: IButtonStyles = { - root: { - padding: '0 4px', - width: '32px', - height: '32px', - backgroundColor: 'transparent', - border: 'none', - color: semanticColors.link, - }, - - rootHovered: { - color: palette.themeDarkAlt, - backgroundColor: palette.neutralLighter, - selectors: { - [HighContrastSelector]: { - borderColor: 'Highlight', - color: 'Highlight', - }, +export const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const { palette, semanticColors } = theme; + const iconButtonStyles: IButtonStyles = { + root: { + padding: '0 4px', + width: '32px', + height: '32px', + backgroundColor: 'transparent', + border: 'none', + color: semanticColors.link, + }, + + rootHovered: { + color: palette.themeDarkAlt, + backgroundColor: palette.neutralLighter, + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight', + color: 'Highlight', }, }, + }, - rootHasMenu: { - width: 'auto', - }, + rootHasMenu: { + width: 'auto', + }, - rootPressed: { - color: palette.themeDark, - backgroundColor: palette.neutralLight, - }, + rootPressed: { + color: palette.themeDark, + backgroundColor: palette.neutralLight, + }, - rootExpanded: { - color: palette.themeDark, - backgroundColor: palette.neutralLight, - }, + rootExpanded: { + color: palette.themeDark, + backgroundColor: palette.neutralLight, + }, - rootChecked: { - color: palette.themeDark, - backgroundColor: palette.neutralLight, - }, + rootChecked: { + color: palette.themeDark, + backgroundColor: palette.neutralLight, + }, - rootCheckedHovered: { - color: palette.themeDark, - backgroundColor: palette.neutralQuaternaryAlt, - }, + rootCheckedHovered: { + color: palette.themeDark, + backgroundColor: palette.neutralQuaternaryAlt, + }, - rootDisabled: { - color: palette.neutralTertiaryAlt, - }, - }; + rootDisabled: { + color: palette.neutralTertiaryAlt, + }, + }; - return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles)!; - }, -); + return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles)!; +}); diff --git a/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts index 96a8d29ca691eb..03c4708f9878a7 100644 --- a/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts +++ b/packages/react/src/components/Button/SplitButton/SplitButton.styles.ts @@ -3,223 +3,221 @@ import { memoizeFunction } from '../../../Utilities'; import type { IButtonStyles } from '../Button.types'; import type { ITheme, IStyle } from '../../../Styling'; -export const getStyles = memoizeFunction( - (theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { - const { effects, palette, semanticColors } = theme; +export const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => { + const { effects, palette, semanticColors } = theme; - const buttonHighContrastFocus = { - left: -2, - top: -2, - bottom: -2, - right: -2, - border: 'none', - }; + const buttonHighContrastFocus = { + left: -2, + top: -2, + bottom: -2, + right: -2, + border: 'none', + }; - const splitButtonDividerBaseStyles: IStyle = { - position: 'absolute', - width: 1, - right: 31, - top: 8, - bottom: 8, - }; + const splitButtonDividerBaseStyles: IStyle = { + position: 'absolute', + width: 1, + right: 31, + top: 8, + bottom: 8, + }; - const splitButtonStyles: IButtonStyles = { - splitButtonContainer: [ - getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2, pointerEvents: 'none' }), - { - display: 'inline-flex', - selectors: { - '.ms-Button--default': { - borderTopRightRadius: '0', - borderBottomRightRadius: '0', - borderRight: 'none', - flexGrow: '1', - }, - '.ms-Button--primary': { - borderTopRightRadius: '0', - borderBottomRightRadius: '0', - border: 'none', - flexGrow: '1', - - selectors: { - [HighContrastSelector]: { - color: 'WindowText', - backgroundColor: 'Window', - border: '1px solid WindowText', - borderRightWidth: '0', - ...getHighContrastNoAdjustStyle(), - }, - ':hover': { - border: 'none', - }, - ':active': { - border: 'none', - }, - }, - }, - '.ms-Button--primary + .ms-Button': { - border: 'none', - selectors: { - [HighContrastSelector]: { - border: '1px solid WindowText', - borderLeftWidth: '0', - }, - }, - }, - }, - }, - ], - splitButtonContainerHovered: { + const splitButtonStyles: IButtonStyles = { + splitButtonContainer: [ + getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2, pointerEvents: 'none' }), + { + display: 'inline-flex', selectors: { + '.ms-Button--default': { + borderTopRightRadius: '0', + borderBottomRightRadius: '0', + borderRight: 'none', + flexGrow: '1', + }, '.ms-Button--primary': { + borderTopRightRadius: '0', + borderBottomRightRadius: '0', + border: 'none', + flexGrow: '1', + selectors: { [HighContrastSelector]: { - color: 'Window', - backgroundColor: 'Highlight', + color: 'WindowText', + backgroundColor: 'Window', + border: '1px solid WindowText', + borderRightWidth: '0', + ...getHighContrastNoAdjustStyle(), + }, + ':hover': { + border: 'none', + }, + ':active': { + border: 'none', }, }, }, - '.ms-Button.is-disabled': { - color: semanticColors.buttonTextDisabled, + '.ms-Button--primary + .ms-Button': { + border: 'none', selectors: { [HighContrastSelector]: { - color: 'GrayText', - borderColor: 'GrayText', - backgroundColor: 'Window', + border: '1px solid WindowText', + borderLeftWidth: '0', }, }, }, }, }, - splitButtonContainerChecked: { - selectors: { - '.ms-Button--primary': { - selectors: { - [HighContrastSelector]: { - color: 'Window', - backgroundColor: 'WindowText', - ...getHighContrastNoAdjustStyle(), - }, + ], + splitButtonContainerHovered: { + selectors: { + '.ms-Button--primary': { + selectors: { + [HighContrastSelector]: { + color: 'Window', + backgroundColor: 'Highlight', }, }, }, - }, - splitButtonContainerCheckedHovered: { - selectors: { - '.ms-Button--primary': { - selectors: { - [HighContrastSelector]: { - color: 'Window', - backgroundColor: 'WindowText', - ...getHighContrastNoAdjustStyle(), - }, + '.ms-Button.is-disabled': { + color: semanticColors.buttonTextDisabled, + selectors: { + [HighContrastSelector]: { + color: 'GrayText', + borderColor: 'GrayText', + backgroundColor: 'Window', }, }, }, }, - splitButtonContainerFocused: { - outline: 'none!important', - }, - splitButtonMenuButton: { - padding: 6, - height: 'auto', - boxSizing: 'border-box', - borderRadius: 0, - borderTopRightRadius: effects.roundedCorner2, - borderBottomRightRadius: effects.roundedCorner2, - border: `1px solid ${palette.neutralSecondaryAlt}`, - borderLeft: 'none', - outline: 'transparent', - userSelect: 'none', - display: 'inline-block', - textDecoration: 'none', - textAlign: 'center', - cursor: 'pointer', - verticalAlign: 'top', - width: 32, - marginLeft: -1, - marginTop: 0, - marginRight: 0, - marginBottom: 0, - [HighContrastSelector]: { - '.ms-Button-menuIcon': { - color: 'WindowText', + }, + splitButtonContainerChecked: { + selectors: { + '.ms-Button--primary': { + selectors: { + [HighContrastSelector]: { + color: 'Window', + backgroundColor: 'WindowText', + ...getHighContrastNoAdjustStyle(), + }, }, }, }, - splitButtonDivider: { - ...splitButtonDividerBaseStyles, - selectors: { - [HighContrastSelector]: { - backgroundColor: 'WindowText', + }, + splitButtonContainerCheckedHovered: { + selectors: { + '.ms-Button--primary': { + selectors: { + [HighContrastSelector]: { + color: 'Window', + backgroundColor: 'WindowText', + ...getHighContrastNoAdjustStyle(), + }, }, }, }, - splitButtonDividerDisabled: { - ...splitButtonDividerBaseStyles, - selectors: { - [HighContrastSelector]: { - backgroundColor: 'GrayText', - }, + }, + splitButtonContainerFocused: { + outline: 'none!important', + }, + splitButtonMenuButton: { + padding: 6, + height: 'auto', + boxSizing: 'border-box', + borderRadius: 0, + borderTopRightRadius: effects.roundedCorner2, + borderBottomRightRadius: effects.roundedCorner2, + border: `1px solid ${palette.neutralSecondaryAlt}`, + borderLeft: 'none', + outline: 'transparent', + userSelect: 'none', + display: 'inline-block', + textDecoration: 'none', + textAlign: 'center', + cursor: 'pointer', + verticalAlign: 'top', + width: 32, + marginLeft: -1, + marginTop: 0, + marginRight: 0, + marginBottom: 0, + [HighContrastSelector]: { + '.ms-Button-menuIcon': { + color: 'WindowText', }, }, - splitButtonMenuButtonDisabled: { - pointerEvents: 'none', - border: 'none', - selectors: { - ':hover': { - cursor: 'default', - }, + }, + splitButtonDivider: { + ...splitButtonDividerBaseStyles, + selectors: { + [HighContrastSelector]: { + backgroundColor: 'WindowText', + }, + }, + }, + splitButtonDividerDisabled: { + ...splitButtonDividerBaseStyles, + selectors: { + [HighContrastSelector]: { + backgroundColor: 'GrayText', + }, + }, + }, + splitButtonMenuButtonDisabled: { + pointerEvents: 'none', + border: 'none', + selectors: { + ':hover': { + cursor: 'default', + }, - '.ms-Button--primary': { - selectors: { - [HighContrastSelector]: { - color: 'GrayText', - borderColor: 'GrayText', - backgroundColor: 'Window', - }, + '.ms-Button--primary': { + selectors: { + [HighContrastSelector]: { + color: 'GrayText', + borderColor: 'GrayText', + backgroundColor: 'Window', }, }, - '.ms-Button-menuIcon': { - selectors: { - [HighContrastSelector]: { - color: 'GrayText', - }, + }, + '.ms-Button-menuIcon': { + selectors: { + [HighContrastSelector]: { + color: 'GrayText', }, }, - [HighContrastSelector]: { - color: 'GrayText', - border: '1px solid GrayText', - backgroundColor: 'Window', - }, + }, + [HighContrastSelector]: { + color: 'GrayText', + border: '1px solid GrayText', + backgroundColor: 'Window', }, }, + }, - splitButtonFlexContainer: { - display: 'flex', - height: '100%', - flexWrap: 'nowrap', - justifyContent: 'center', - alignItems: 'center', - }, + splitButtonFlexContainer: { + display: 'flex', + height: '100%', + flexWrap: 'nowrap', + justifyContent: 'center', + alignItems: 'center', + }, - splitButtonContainerDisabled: { - outline: 'none', - border: 'none', - selectors: { - [HighContrastSelector]: { - color: 'GrayText', - borderColor: 'GrayText', - backgroundColor: 'Window', - ...getHighContrastNoAdjustStyle(), - }, + splitButtonContainerDisabled: { + outline: 'none', + border: 'none', + selectors: { + [HighContrastSelector]: { + color: 'GrayText', + borderColor: 'GrayText', + backgroundColor: 'Window', + ...getHighContrastNoAdjustStyle(), }, }, - splitButtonMenuFocused: { - ...getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 }), - }, - }; + }, + splitButtonMenuFocused: { + ...getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 }), + }, + }; - return concatStyleSets(splitButtonStyles, customStyles)!; - }, -); + return concatStyleSets(splitButtonStyles, customStyles)!; +}); diff --git a/packages/react/src/components/Calendar/Calendar.base.tsx b/packages/react/src/components/Calendar/Calendar.base.tsx index 02440ea73bbee5..b054f6a40c81f2 100644 --- a/packages/react/src/components/Calendar/Calendar.base.tsx +++ b/packages/react/src/components/Calendar/Calendar.base.tsx @@ -149,9 +149,8 @@ export const CalendarBase: React.FunctionComponent = React.forwa (propsWithoutDefaults, forwardedRef) => { const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults); - const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] = useDateState( - props, - ); + const [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth] = + useDateState(props); const [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility] = useVisibilityState(props); const [dayPicker, monthPicker, focusOnNextUpdate] = useFocusLogic(props, isDayPickerVisible, isMonthPickerVisible); diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx index 21c7888f18663f..745fd7a6c01b24 100644 --- a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx +++ b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx @@ -181,15 +181,13 @@ const CalendarDayNavigationButtons = (props: ICalendarDayNavigationButtonsProps) }; CalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons'; -const onButtonKeyDown = ( - callback?: () => void, -): ((ev: React.KeyboardEvent) => void) => ( - ev: React.KeyboardEvent, -) => { - // eslint-disable-next-line deprecation/deprecation - switch (ev.which) { - case KeyCodes.enter: - callback?.(); - break; - } -}; +const onButtonKeyDown = + (callback?: () => void): ((ev: React.KeyboardEvent) => void) => + (ev: React.KeyboardEvent) => { + // eslint-disable-next-line deprecation/deprecation + switch (ev.which) { + case KeyCodes.enter: + callback?.(); + break; + } + }; diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts index 92a2ca4e0ba222..9a937fa4728542 100644 --- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts +++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts @@ -21,34 +21,32 @@ export interface IPositioningContainerNames { beakCurtain?: string; } -export const getClassNames = memoizeFunction( - (): IPositioningContainerNames => { - return mergeStyleSets({ - root: [ - { - position: 'absolute', - boxSizing: 'border-box', - border: '1px solid ${}', - selectors: { - [HighContrastSelector]: { - border: '1px solid WindowText', - }, +export const getClassNames = memoizeFunction((): IPositioningContainerNames => { + return mergeStyleSets({ + root: [ + { + position: 'absolute', + boxSizing: 'border-box', + border: '1px solid ${}', + selectors: { + [HighContrastSelector]: { + border: '1px solid WindowText', }, }, - focusClear(), - ], - container: { - position: 'relative', }, - main: { - backgroundColor: '#ffffff', - overflowX: 'hidden', - overflowY: 'hidden', - position: 'relative', - }, - overFlowYHidden: { - overflowY: 'hidden', - }, - }); - }, -); + focusClear(), + ], + container: { + position: 'relative', + }, + main: { + backgroundColor: '#ffffff', + overflowX: 'hidden', + overflowY: 'hidden', + position: 'relative', + }, + overFlowYHidden: { + overflowY: 'hidden', + }, + }); +}); diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx index 97360d331361b1..3d3b7545599df8 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx @@ -24,7 +24,8 @@ export interface IColorRectangleState { */ export class ColorRectangleBase extends React.Component - implements IColorRectangle { + implements IColorRectangle +{ public static defaultProps: Partial = { minSize: 220, ariaLabel: 'Saturation and brightness', diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx index dcd51fae2992a8..e3fcadcba4b268 100644 --- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx +++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.test.tsx @@ -17,15 +17,17 @@ describe('ColorRectangle', () => { const colorRectRef = (ref: ColorRectangleBase | null) => { colorRectangle = ref; }; - const getBoundingClientRect = (size: number, offset: number = 0) => (): DOMRect => - ({ - left: offset, - top: offset, - right: size + offset, - bottom: size + offset, - width: size, - height: size, - } as DOMRect); + const getBoundingClientRect = + (size: number, offset: number = 0) => + (): DOMRect => + ({ + left: offset, + top: offset, + right: size + offset, + bottom: size + offset, + width: size, + height: size, + } as DOMRect); afterEach(() => { if (wrapper) { diff --git a/packages/react/src/components/ComboBox/ComboBox.styles.ts b/packages/react/src/components/ComboBox/ComboBox.styles.ts index 899cb304316254..b6e01c9dda4cd9 100644 --- a/packages/react/src/components/ComboBox/ComboBox.styles.ts +++ b/packages/react/src/components/ComboBox/ComboBox.styles.ts @@ -18,30 +18,28 @@ const ComboBoxLineHeight = 30; const ComboBoxCaretDownWidth = 32; const ComboBoxOptionHeight = 36; -const getDisabledStyles = memoizeFunction( - (theme: ITheme): IRawStyle => { - const { semanticColors } = theme; - - return { - backgroundColor: semanticColors.disabledBackground, - color: semanticColors.disabledText, - cursor: 'default', - selectors: { - ':after': { - borderColor: semanticColors.disabledBackground, - }, - [HighContrastSelector]: { - color: 'GrayText', - selectors: { - ':after': { - borderColor: 'GrayText', - }, +const getDisabledStyles = memoizeFunction((theme: ITheme): IRawStyle => { + const { semanticColors } = theme; + + return { + backgroundColor: semanticColors.disabledBackground, + color: semanticColors.disabledText, + cursor: 'default', + selectors: { + ':after': { + borderColor: semanticColors.disabledBackground, + }, + [HighContrastSelector]: { + color: 'GrayText', + selectors: { + ':after': { + borderColor: 'GrayText', }, }, }, - }; - }, -); + }, + }; +}); const listOptionHighContrastStyles: IRawStyle = { selectors: { diff --git a/packages/react/src/components/CommandBar/CommandBar.base.tsx b/packages/react/src/components/CommandBar/CommandBar.base.tsx index 52db6d2214e936..eaee893cf0d677 100644 --- a/packages/react/src/components/CommandBar/CommandBar.base.tsx +++ b/packages/react/src/components/CommandBar/CommandBar.base.tsx @@ -193,7 +193,7 @@ export class CommandBarBase extends React.Component implem private _commandButton = (item: ICommandBarItemProps, props: ICommandBarItemProps): JSX.Element => { const ButtonAs = this.props.buttonAs as IComponentAs | undefined; const CommandBarButtonAs = item.commandBarButtonAs as IComponentAs | undefined; - const DefaultButtonAs = (CommandBarButton as {}) as IComponentAs; + const DefaultButtonAs = CommandBarButton as {} as IComponentAs; // The prop types between these three possible implementations overlap enough that a force-cast is safe. let Type = DefaultButtonAs; diff --git a/packages/react/src/components/CommandBar/CommandBar.styles.ts b/packages/react/src/components/CommandBar/CommandBar.styles.ts index 8f40d09afaa94a..6c00b591631e0b 100644 --- a/packages/react/src/components/CommandBar/CommandBar.styles.ts +++ b/packages/react/src/components/CommandBar/CommandBar.styles.ts @@ -40,21 +40,19 @@ export const getStyles = (props: ICommandBarStyleProps): ICommandBarStyles => { }; }; -export const getCommandButtonStyles = memoizeFunction( - (customStyles: IButtonStyles | undefined): IButtonStyles => { - const rootStyles: IStyle = { - height: '100%', - }; - const labelStyles: IStyle = { - whiteSpace: 'nowrap', - }; +export const getCommandButtonStyles = memoizeFunction((customStyles: IButtonStyles | undefined): IButtonStyles => { + const rootStyles: IStyle = { + height: '100%', + }; + const labelStyles: IStyle = { + whiteSpace: 'nowrap', + }; - const { root, label, ...restCustomStyles } = customStyles || {}; + const { root, label, ...restCustomStyles } = customStyles || {}; - return { - ...restCustomStyles, - root: root ? [rootStyles, root] : rootStyles, - label: label ? [labelStyles, label] : labelStyles, - }; - }, -); + return { + ...restCustomStyles, + root: root ? [rootStyles, root] : rootStyles, + label: label ? [labelStyles, label] : labelStyles, + }; +}); diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts b/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts index 279649207b7956..30c8cb46edd70b 100644 --- a/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts +++ b/packages/react/src/components/ContextualMenu/ContextualMenu.cnstyles.ts @@ -15,197 +15,195 @@ export const CONTEXTUAL_MENU_ITEM_HEIGHT = 36; const MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium); -export const getMenuItemStyles = memoizeFunction( - (theme: ITheme): IMenuItemStyles => { - const { semanticColors, fonts, palette } = theme; - const ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered; - const ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered; - const ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed; - const ContextualMenuItemDividerColor = semanticColors.bodyDivider; +export const getMenuItemStyles = memoizeFunction((theme: ITheme): IMenuItemStyles => { + const { semanticColors, fonts, palette } = theme; + const ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered; + const ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered; + const ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed; + const ContextualMenuItemDividerColor = semanticColors.bodyDivider; - const menuItemStyles: IMenuItemStyles = { - item: [ - fonts.medium, - { - color: semanticColors.bodyText, - position: 'relative', - boxSizing: 'border-box', - }, - ], - divider: { - display: 'block', - height: '1px', - backgroundColor: ContextualMenuItemDividerColor, + const menuItemStyles: IMenuItemStyles = { + item: [ + fonts.medium, + { + color: semanticColors.bodyText, position: 'relative', + boxSizing: 'border-box', }, - root: [ - getFocusStyle(theme), - fonts.medium, - { - color: semanticColors.bodyText, - backgroundColor: 'transparent', - border: 'none', - width: '100%', - height: CONTEXTUAL_MENU_ITEM_HEIGHT, - lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT, - display: 'block', - cursor: 'pointer', - padding: '0px 8px 0 4px', // inner elements have a margin of 4px (4 + 4 = 8px as on right side) - textAlign: 'left', - }, - ], - rootDisabled: { - color: semanticColors.disabledBodyText, - cursor: 'default', - pointerEvents: 'none', - selectors: { - [HighContrastSelector]: { - // ensure disabled text looks different than enabled - color: 'GrayText', - opacity: 1, - }, + ], + divider: { + display: 'block', + height: '1px', + backgroundColor: ContextualMenuItemDividerColor, + position: 'relative', + }, + root: [ + getFocusStyle(theme), + fonts.medium, + { + color: semanticColors.bodyText, + backgroundColor: 'transparent', + border: 'none', + width: '100%', + height: CONTEXTUAL_MENU_ITEM_HEIGHT, + lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT, + display: 'block', + cursor: 'pointer', + padding: '0px 8px 0 4px', // inner elements have a margin of 4px (4 + 4 = 8px as on right side) + textAlign: 'left', + }, + ], + rootDisabled: { + color: semanticColors.disabledBodyText, + cursor: 'default', + pointerEvents: 'none', + selectors: { + [HighContrastSelector]: { + // ensure disabled text looks different than enabled + color: 'GrayText', + opacity: 1, }, }, - rootHovered: { - backgroundColor: ContextualMenuItemBackgroundHoverColor, - color: ContextualMenuItemTextHoverColor, - selectors: { - '.ms-ContextualMenu-icon': { - color: palette.themeDarkAlt, - }, - '.ms-ContextualMenu-submenuIcon': { - color: palette.neutralPrimary, - }, + }, + rootHovered: { + backgroundColor: ContextualMenuItemBackgroundHoverColor, + color: ContextualMenuItemTextHoverColor, + selectors: { + '.ms-ContextualMenu-icon': { + color: palette.themeDarkAlt, + }, + '.ms-ContextualMenu-submenuIcon': { + color: palette.neutralPrimary, }, }, - rootFocused: { - backgroundColor: palette.white, - }, - rootChecked: { - selectors: { - '.ms-ContextualMenu-checkmarkIcon': { - color: palette.neutralPrimary, - }, + }, + rootFocused: { + backgroundColor: palette.white, + }, + rootChecked: { + selectors: { + '.ms-ContextualMenu-checkmarkIcon': { + color: palette.neutralPrimary, }, }, - rootPressed: { - backgroundColor: ContextualMenuItemBackgroundSelectedColor, - selectors: { - '.ms-ContextualMenu-icon': { - color: palette.themeDark, - }, - '.ms-ContextualMenu-submenuIcon': { - color: palette.neutralPrimary, - }, + }, + rootPressed: { + backgroundColor: ContextualMenuItemBackgroundSelectedColor, + selectors: { + '.ms-ContextualMenu-icon': { + color: palette.themeDark, + }, + '.ms-ContextualMenu-submenuIcon': { + color: palette.neutralPrimary, }, }, - rootExpanded: { - backgroundColor: ContextualMenuItemBackgroundSelectedColor, - color: semanticColors.bodyTextChecked, - selectors: { - '.ms-ContextualMenu-submenuIcon': { - [HighContrastSelector]: { - // icons inside of anchor tags are not properly inheriting color in high contrast - color: 'inherit', - }, - }, + }, + rootExpanded: { + backgroundColor: ContextualMenuItemBackgroundSelectedColor, + color: semanticColors.bodyTextChecked, + selectors: { + '.ms-ContextualMenu-submenuIcon': { [HighContrastSelector]: { - // allow change in background/text to be visible - ...getHighContrastNoAdjustStyle(), + // icons inside of anchor tags are not properly inheriting color in high contrast + color: 'inherit', }, }, - }, - linkContent: { - whiteSpace: 'nowrap', - height: 'inherit', - display: 'flex', - alignItems: 'center', - maxWidth: '100%', - }, - anchorLink: { - padding: '0px 8px 0 4px', // inner elements have a margin of 4px (4 + 4 = 8px as on right side) - textRendering: 'auto', - color: 'inherit', - letterSpacing: 'normal', - wordSpacing: 'normal', - textTransform: 'none', - textIndent: '0px', - textShadow: 'none', - textDecoration: 'none', - boxSizing: 'border-box', - }, - label: { - margin: '0 4px', - verticalAlign: 'middle', - display: 'inline-block', - flexGrow: '1', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - }, - secondaryText: { - color: theme.palette.neutralSecondary, - paddingLeft: '20px', - textAlign: 'right', - }, - icon: { - display: 'inline-block', - minHeight: '1px', - maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT, - fontSize: IconFontSizes.medium, - width: IconFontSizes.medium, - margin: '0 4px', - verticalAlign: 'middle', - flexShrink: '0', - selectors: { - [MediumScreenSelector]: { - fontSize: IconFontSizes.large, - width: IconFontSizes.large, - }, + [HighContrastSelector]: { + // allow change in background/text to be visible + ...getHighContrastNoAdjustStyle(), }, }, - iconColor: { - color: semanticColors.menuIcon, - }, - iconDisabled: { - color: semanticColors.disabledBodyText, + }, + linkContent: { + whiteSpace: 'nowrap', + height: 'inherit', + display: 'flex', + alignItems: 'center', + maxWidth: '100%', + }, + anchorLink: { + padding: '0px 8px 0 4px', // inner elements have a margin of 4px (4 + 4 = 8px as on right side) + textRendering: 'auto', + color: 'inherit', + letterSpacing: 'normal', + wordSpacing: 'normal', + textTransform: 'none', + textIndent: '0px', + textShadow: 'none', + textDecoration: 'none', + boxSizing: 'border-box', + }, + label: { + margin: '0 4px', + verticalAlign: 'middle', + display: 'inline-block', + flexGrow: '1', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + }, + secondaryText: { + color: theme.palette.neutralSecondary, + paddingLeft: '20px', + textAlign: 'right', + }, + icon: { + display: 'inline-block', + minHeight: '1px', + maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT, + fontSize: IconFontSizes.medium, + width: IconFontSizes.medium, + margin: '0 4px', + verticalAlign: 'middle', + flexShrink: '0', + selectors: { + [MediumScreenSelector]: { + fontSize: IconFontSizes.large, + width: IconFontSizes.large, + }, }, - checkmarkIcon: { - color: semanticColors.bodySubtext, + }, + iconColor: { + color: semanticColors.menuIcon, + }, + iconDisabled: { + color: semanticColors.disabledBodyText, + }, + checkmarkIcon: { + color: semanticColors.bodySubtext, + }, + subMenuIcon: { + height: CONTEXTUAL_MENU_ITEM_HEIGHT, + lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT, + color: palette.neutralSecondary, + textAlign: 'center', + display: 'inline-block', + verticalAlign: 'middle', + flexShrink: '0', + fontSize: IconFontSizes.small, // 12px + selectors: { + ':hover': { + color: palette.neutralPrimary, + }, + ':active': { + color: palette.neutralPrimary, + }, + [MediumScreenSelector]: { + fontSize: IconFontSizes.medium, // 16px + }, }, - subMenuIcon: { + }, + splitButtonFlexContainer: [ + getFocusStyle(theme), + { + display: 'flex', height: CONTEXTUAL_MENU_ITEM_HEIGHT, - lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT, - color: palette.neutralSecondary, - textAlign: 'center', - display: 'inline-block', - verticalAlign: 'middle', - flexShrink: '0', - fontSize: IconFontSizes.small, // 12px - selectors: { - ':hover': { - color: palette.neutralPrimary, - }, - ':active': { - color: palette.neutralPrimary, - }, - [MediumScreenSelector]: { - fontSize: IconFontSizes.medium, // 16px - }, - }, + flexWrap: 'nowrap', + justifyContent: 'center', + alignItems: 'flex-start', }, - splitButtonFlexContainer: [ - getFocusStyle(theme), - { - display: 'flex', - height: CONTEXTUAL_MENU_ITEM_HEIGHT, - flexWrap: 'nowrap', - justifyContent: 'center', - alignItems: 'flex-start', - }, - ], - }; + ], + }; - return concatStyleSets(menuItemStyles); - }, -); + return concatStyleSets(menuItemStyles); +}); diff --git a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx index 5b260788c4fbbc..387e31c4320b58 100644 --- a/packages/react/src/components/DetailsList/DetailsColumn.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsColumn.base.tsx @@ -21,19 +21,19 @@ const TRANSITION_DURATION_DRAG = 200; // ms const TRANSITION_DURATION_DROP = 1500; // ms const CLASSNAME_ADD_INTERVAL = 20; // ms -const defaultOnRenderHeader = (classNames: IProcessedStyleSet) => ( - props?: IDetailsColumnProps, -): JSX.Element | null => { - if (!props) { - return null; - } +const defaultOnRenderHeader = + (classNames: IProcessedStyleSet) => + (props?: IDetailsColumnProps): JSX.Element | null => { + if (!props) { + return null; + } - if (props.column.isIconOnly) { - return {props.column.name}; - } + if (props.column.isIconOnly) { + return {props.column.name}; + } - return <>{props.column.name}; -}; + return <>{props.column.name}; + }; /** * Component for rendering columns in a `DetailsList`. @@ -241,14 +241,14 @@ export class DetailsColumnBase extends React.Component { } } - private _onRenderFilterIcon = (classNames: IProcessedStyleSet) => ( - props: IDetailsColumnFilterIconProps, - ): JSX.Element => { - const { columnProps, ...iconProps } = props; - const IconComponent = columnProps?.useFastIcons ? FontIcon : Icon; + private _onRenderFilterIcon = + (classNames: IProcessedStyleSet) => + (props: IDetailsColumnFilterIconProps): JSX.Element => { + const { columnProps, ...iconProps } = props; + const IconComponent = columnProps?.useFastIcons ? FontIcon : Icon; - return ; - }; + return ; + }; private _onRenderColumnHeaderTooltip = (tooltipHostProps: IDetailsColumnRenderTooltipProps): JSX.Element => { return {tooltipHostProps.children}; diff --git a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx index c3da652901e166..b8c7166055b4f6 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx @@ -37,7 +37,8 @@ const NO_COLUMNS: IColumn[] = []; export class DetailsHeaderBase extends React.Component - implements IDetailsHeader { + implements IDetailsHeader +{ public static defaultProps = { selectAllVisibility: SelectAllVisibility.visible, collapseAllVisibility: CollapseAllVisibility.visible, diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx index 4e6aec68e2dfc4..d2e40b859ee35f 100644 --- a/packages/react/src/components/DetailsList/DetailsList.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx @@ -82,7 +82,7 @@ describe('DetailsList', () => { }); afterEach(() => { - if (((setTimeout as unknown) as jest.Mock).mock) { + if ((setTimeout as unknown as jest.Mock).mock) { jest.runOnlyPendingTimers(); jest.useRealTimers(); } diff --git a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx index 0f02aff354d8cb..da424735418675 100644 --- a/packages/react/src/components/DetailsList/DetailsListV2.test.tsx +++ b/packages/react/src/components/DetailsList/DetailsListV2.test.tsx @@ -91,7 +91,7 @@ describe('DetailsListV2', () => { }); afterEach(() => { - if (((setTimeout as unknown) as jest.Mock).mock) { + if ((setTimeout as unknown as jest.Mock).mock) { jest.runOnlyPendingTimers(); jest.useRealTimers(); } diff --git a/packages/react/src/components/DetailsList/DetailsRow.styles.ts b/packages/react/src/components/DetailsList/DetailsRow.styles.ts index 72bc60035f25f5..8f900d5cb62955 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.styles.ts +++ b/packages/react/src/components/DetailsList/DetailsRow.styles.ts @@ -65,15 +65,8 @@ export const getDetailsRowStyles = (props: IDetailsRowStyleProps): IDetailsRowSt } = props; const { palette, fonts } = theme; - const { - neutralPrimary, - white, - neutralSecondary, - neutralLighter, - neutralLight, - neutralDark, - neutralQuaternaryAlt, - } = palette; + const { neutralPrimary, white, neutralSecondary, neutralLighter, neutralLight, neutralDark, neutralQuaternaryAlt } = + palette; const { focusBorder, linkHovered: focusedLinkColor } = theme.semanticColors; const classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme); diff --git a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx index 9e2f4bee281752..6adb625ba0ba11 100644 --- a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -19,7 +19,8 @@ export interface IBaseExtendedPickerState { export class BaseExtendedPicker> extends React.Component> - implements IBaseExtendedPicker { + implements IBaseExtendedPicker +{ public floatingPicker = React.createRef>>(); public selectedItemsList = React.createRef>>(); diff --git a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx index 0453b457825886..6d58d0ddcc510e 100644 --- a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx +++ b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.test.tsx @@ -67,7 +67,7 @@ describe('Pickers', () => { document.body.appendChild(input); document.body.appendChild(root); - const picker: TypedBaseFloatingPicker = (ReactDOM.render( + const picker: TypedBaseFloatingPicker = ReactDOM.render( { inputElement={input} />, root, - ) as unknown) as TypedBaseFloatingPicker; + ) as unknown as TypedBaseFloatingPicker; input.value = 'a'; picker.onQueryStringChanged('a'); @@ -96,7 +96,7 @@ describe('Pickers', () => { document.body.appendChild(input); document.body.appendChild(root); - const picker: TypedBaseFloatingPicker = (ReactDOM.render( + const picker: TypedBaseFloatingPicker = ReactDOM.render( { inputElement={input} />, root, - ) as unknown) as TypedBaseFloatingPicker; + ) as unknown as TypedBaseFloatingPicker; input.value = 'b'; picker.onQueryStringChanged('b'); diff --git a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx index 0b88c7a827d688..c2690e5edc7c0b 100644 --- a/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/react/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -19,15 +19,15 @@ export interface IBaseFloatingPickerState { export class BaseFloatingPicker> extends React.Component - implements IBaseFloatingPicker { + implements IBaseFloatingPicker +{ protected selection: Selection; protected root = React.createRef(); protected suggestionStore: SuggestionsStore; protected suggestionsControl: React.RefObject> = React.createRef(); - protected SuggestionsControlOfProperType: new ( - props: ISuggestionsControlProps, - ) => SuggestionsControl = SuggestionsControl as new (props: ISuggestionsControlProps) => SuggestionsControl; + protected SuggestionsControlOfProperType: new (props: ISuggestionsControlProps) => SuggestionsControl = + SuggestionsControl as new (props: ISuggestionsControlProps) => SuggestionsControl; protected currentPromise: PromiseLike; protected isComponentMounted: boolean = false; @@ -334,13 +334,9 @@ export class BaseFloatingPicker> private _onValidateInput = (): void => { if (this.state.queryString && this.props.onValidateInput && this.props.createGenericItem) { - const itemToConvert: ISuggestionModel = (this.props.createGenericItem as ( - input: string, - isValid: boolean, - ) => ISuggestionModel)( - this.state.queryString, - (this.props.onValidateInput as (input: string) => boolean)(this.state.queryString), - ); + const itemToConvert: ISuggestionModel = ( + this.props.createGenericItem as (input: string, isValid: boolean) => ISuggestionModel + )(this.state.queryString, (this.props.onValidateInput as (input: string) => boolean)(this.state.queryString)); const convertedItems = this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]); this.onChange(convertedItems[0].item); } diff --git a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx index e4c6d2c911ad2e..d23d08ea21d59f 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx +++ b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx @@ -61,9 +61,8 @@ export class SuggestionsControl extends React.Component(); protected _suggestions = React.createRef>(); - private SuggestionsOfProperType: new ( - props: ISuggestionsCoreProps, - ) => SuggestionsCore = SuggestionsCore as new (props: ISuggestionsCoreProps) => SuggestionsCore; + private SuggestionsOfProperType: new (props: ISuggestionsCoreProps) => SuggestionsCore = + SuggestionsCore as new (props: ISuggestionsCoreProps) => SuggestionsCore; constructor(suggestionsProps: ISuggestionsControlProps) { super(suggestionsProps); diff --git a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts index b7294f123d3905..893ced2fa91f77 100644 --- a/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts +++ b/packages/react/src/components/FloatingPicker/Suggestions/SuggestionsStore.ts @@ -52,7 +52,7 @@ export class SuggestionsStore { ariaLabel: this.getAriaLabel !== undefined ? this.getAriaLabel(suggestion) - : ((suggestion as any) as ITag).name || + : (suggestion as any as ITag).name || (suggestion).text || // eslint-disable-next-line deprecation/deprecation (suggestion).primaryText, diff --git a/packages/react/src/components/GroupedList/GroupedList.test.tsx b/packages/react/src/components/GroupedList/GroupedList.test.tsx index 721a10988e7e9d..ecddb3f4fe171c 100644 --- a/packages/react/src/components/GroupedList/GroupedList.test.tsx +++ b/packages/react/src/components/GroupedList/GroupedList.test.tsx @@ -48,16 +48,14 @@ describe('GroupedList', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -98,16 +96,14 @@ describe('GroupedList', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -148,16 +144,14 @@ describe('GroupedList', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -202,16 +196,14 @@ describe('GroupedList', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -252,16 +244,14 @@ describe('GroupedList', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} diff --git a/packages/react/src/components/GroupedList/GroupedListV2.base.tsx b/packages/react/src/components/GroupedList/GroupedListV2.base.tsx index 23079f4483cc17..ed1335ace174f3 100644 --- a/packages/react/src/components/GroupedList/GroupedListV2.base.tsx +++ b/packages/react/src/components/GroupedList/GroupedListV2.base.tsx @@ -527,7 +527,8 @@ const GroupItem = ({ export class GroupedListV2Wrapper extends React.Component - implements IGroupedList { + implements IGroupedList +{ public static displayName: string = 'GroupedListV2'; private _list = React.createRef(); diff --git a/packages/react/src/components/GroupedList/GroupedListV2.test.tsx b/packages/react/src/components/GroupedList/GroupedListV2.test.tsx index 0cda3ab525fc6c..3b98bc292e3775 100644 --- a/packages/react/src/components/GroupedList/GroupedListV2.test.tsx +++ b/packages/react/src/components/GroupedList/GroupedListV2.test.tsx @@ -54,16 +54,14 @@ describe('GroupedListV2', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -103,16 +101,14 @@ describe('GroupedListV2', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -153,16 +149,14 @@ describe('GroupedListV2', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -207,16 +201,14 @@ describe('GroupedListV2', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} @@ -257,16 +249,14 @@ describe('GroupedListV2', () => { { - return { - key: value, - name: value, - fieldName: value, - minWidth: 300, - }; - }, - )} + .map((value): IColumn => { + return { + key: value, + name: value, + fieldName: value, + minWidth: 300, + }; + })} groupNestingDepth={nestingDepth} item={item} itemIndex={itemIndex} diff --git a/packages/react/src/components/HoverCard/ExpandingCard.styles.ts b/packages/react/src/components/HoverCard/ExpandingCard.styles.ts index 0d1ed03c548e06..293b9f31ff0f25 100644 --- a/packages/react/src/components/HoverCard/ExpandingCard.styles.ts +++ b/packages/react/src/components/HoverCard/ExpandingCard.styles.ts @@ -9,14 +9,8 @@ const GlobalClassNames = { }; export function getStyles(props: IExpandingCardStyleProps): IExpandingCardStyles { - const { - theme, - needsScroll, - expandedCardFirstFrameRendered, - compactCardHeight, - expandedCardHeight, - className, - } = props; + const { theme, needsScroll, expandedCardFirstFrameRendered, compactCardHeight, expandedCardHeight, className } = + props; const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); diff --git a/packages/react/src/components/List/utils/scroll.test.ts b/packages/react/src/components/List/utils/scroll.test.ts index c0ea0249914048..51dc791f65bd17 100644 --- a/packages/react/src/components/List/utils/scroll.test.ts +++ b/packages/react/src/components/List/utils/scroll.test.ts @@ -67,7 +67,7 @@ describe('List scroll utils', () => { scrollTo, }; - setScrollYPosition((mockWindow as unknown) as Window, 7.5); + setScrollYPosition(mockWindow as unknown as Window, 7.5); expect(scrollTo.mock.calls[0][0]).toBe(5); expect(scrollTo.mock.calls[0][1]).toBe(7.5); diff --git a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx index 91d0e4b451ce7b..d9444f3443acc5 100644 --- a/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx +++ b/packages/react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx @@ -191,41 +191,43 @@ export const PersonaCoinBase: React.FunctionComponent = React }); PersonaCoinBase.displayName = 'PersonaCoinBase'; -const getCoinRenderer = (onLoadingStateChange: (loadState: ImageLoadState) => void) => ({ - coinSize, - styles, - imageUrl, - imageAlt, - imageShouldFadeIn, - imageShouldStartVisible, - theme, - showUnknownPersonaCoin, - size = DEFAULT_PROPS.size, -}: IPersonaCoinProps): JSX.Element | null => { - // Render the Image component only if an image URL is provided - if (!imageUrl) { - return null; - } - const classNames = getClassNames(styles, { - theme: theme!, - size, +const getCoinRenderer = + (onLoadingStateChange: (loadState: ImageLoadState) => void) => + ({ + coinSize, + styles, + imageUrl, + imageAlt, + imageShouldFadeIn, + imageShouldStartVisible, + theme, showUnknownPersonaCoin, - }); - const dimension = coinSize || sizeToPixels[size]; - return ( - {imageAlt} - ); -}; + size = DEFAULT_PROPS.size, + }: IPersonaCoinProps): JSX.Element | null => { + // Render the Image component only if an image URL is provided + if (!imageUrl) { + return null; + } + const classNames = getClassNames(styles, { + theme: theme!, + size, + showUnknownPersonaCoin, + }); + const dimension = coinSize || sizeToPixels[size]; + return ( + {imageAlt} + ); + }; const renderPersonaCoinInitials = ({ imageInitials, diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx index 34635c30cadb79..6a2248a5df696f 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -29,7 +29,8 @@ const getClassNames = classNamesFunction - implements IScrollablePane { + implements IScrollablePane +{ private _root = React.createRef(); private _stickyAboveRef = React.createRef(); private _stickyBelowRef = React.createRef(); diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx index 41489937c98da5..dd254208cf6224 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx @@ -49,7 +49,7 @@ describe('SelectedItemsList', () => { expect(items![0].name).toBe('b'); }; - const itemsList: TypedBaseSelectedItemsList = (ReactDOM.render( + const itemsList: TypedBaseSelectedItemsList = ReactDOM.render( { onChange={onChange} />, root, - ) as unknown) as TypedBaseSelectedItemsList; + ) as unknown as TypedBaseSelectedItemsList; expect(itemsList.items.length).toEqual(2); itemsList.removeItemAt(0); @@ -67,10 +67,10 @@ describe('SelectedItemsList', () => { it('can add items', () => { const root = document.createElement('div'); - const itemsList: TypedBaseSelectedItemsList = (ReactDOM.render( + const itemsList: TypedBaseSelectedItemsList = ReactDOM.render( , root, - ) as unknown) as TypedBaseSelectedItemsList; + ) as unknown as TypedBaseSelectedItemsList; const items: ISimple[] = [ { key: '1', name: 'a' }, diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx index c99bb16c583275..f646106c8b0dfc 100644 --- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx +++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx @@ -14,7 +14,8 @@ export interface IBaseSelectedItemsListState { export class BaseSelectedItemsList> extends React.Component> - implements IBaseSelectedItemsList { + implements IBaseSelectedItemsList +{ protected root: HTMLElement; private _defaultSelection: Selection; diff --git a/packages/react/src/components/Slider/useSlider.ts b/packages/react/src/components/Slider/useSlider.ts index aeed3aa2a14503..a881eba9d8200c 100644 --- a/packages/react/src/components/Slider/useSlider.ts +++ b/packages/react/src/components/Slider/useSlider.ts @@ -452,23 +452,22 @@ export const useSlider = (props: ISliderProps, ref: React.ForwardedRef & React.RefAttributes) - | undefined = ranged - ? { - ref: lowerValueThumbRef, - className: classNames.thumb, - style: getPositionStyles(lowerValuePercent), - ...sliderProps, - ...onFocusProp, - id: `min-${id}`, - 'aria-valuemin': min, - 'aria-valuemax': value, - 'aria-valuenow': lowerValue, - 'aria-valuetext': getAriaValueText(lowerValue), - 'aria-label': `min ${ariaLabel || label}`, - } - : undefined; + const lowerValueThumbProps: (React.HTMLAttributes & React.RefAttributes) | undefined = + ranged + ? { + ref: lowerValueThumbRef, + className: classNames.thumb, + style: getPositionStyles(lowerValuePercent), + ...sliderProps, + ...onFocusProp, + id: `min-${id}`, + 'aria-valuemin': min, + 'aria-valuemax': value, + 'aria-valuenow': lowerValue, + 'aria-valuetext': getAriaValueText(lowerValue), + 'aria-label': `min ${ariaLabel || label}`, + } + : undefined; const containerProps: React.HTMLAttributes = { className: classNames.container, diff --git a/packages/react/src/components/SpinButton/SpinButton.styles.ts b/packages/react/src/components/SpinButton/SpinButton.styles.ts index 437d2973aaabbb..8a561818b9e0e4 100644 --- a/packages/react/src/components/SpinButton/SpinButton.styles.ts +++ b/packages/react/src/components/SpinButton/SpinButton.styles.ts @@ -11,29 +11,27 @@ const DEFAULT_HEIGHT = 32; const DEFAULT_MIN_WIDTH = 86; const LABEL_MARGIN = 10; -const getDisabledStyles = memoizeFunction( - (theme: ITheme): IRawStyle => { - const { semanticColors } = theme; +const getDisabledStyles = memoizeFunction((theme: ITheme): IRawStyle => { + const { semanticColors } = theme; - const SpinButtonTextColorDisabled = semanticColors.disabledText; - const SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground; + const SpinButtonTextColorDisabled = semanticColors.disabledText; + const SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground; - return { - backgroundColor: SpinButtonBackgroundColorDisabled, - pointerEvents: 'none', - cursor: 'default', - color: SpinButtonTextColorDisabled, - selectors: { - ':after': { - borderColor: SpinButtonBackgroundColorDisabled, - }, - [HighContrastSelector]: { - color: 'GrayText', - }, + return { + backgroundColor: SpinButtonBackgroundColorDisabled, + pointerEvents: 'none', + cursor: 'default', + color: SpinButtonTextColorDisabled, + selectors: { + ':after': { + borderColor: SpinButtonBackgroundColorDisabled, }, - }; - }, -); + [HighContrastSelector]: { + color: 'GrayText', + }, + }, + }; +}); export const getArrowButtonStyles = memoizeFunction( (theme: ITheme, isUpArrow: boolean, customSpecificArrowStyles?: Partial): IButtonStyles => { diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx index b731e19670240f..21b19b50669ae0 100644 --- a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx +++ b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx @@ -339,7 +339,7 @@ export const SwatchColorPickerBase: React.FunctionComponent - implements ITextField { + implements ITextField +{ public static defaultProps: ITextFieldProps = { resizable: true, deferredValidationTime: 200, diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx index 833e5dd66252ad..d24fbd783b261d 100644 --- a/packages/react/src/components/TimePicker/TimePicker.tsx +++ b/packages/react/src/components/TimePicker/TimePicker.tsx @@ -53,11 +53,10 @@ export const TimePicker: React.FunctionComponent = ({ const optionsCount = getDropdownOptionsCount(increments, timeRange); const initialValue = useConst(defaultValue || new Date()); - const baseDate: Date = React.useMemo(() => generateBaseDate(increments, timeRange, initialValue), [ - increments, - timeRange, - initialValue, - ]); + const baseDate: Date = React.useMemo( + () => generateBaseDate(increments, timeRange, initialValue), + [increments, timeRange, initialValue], + ); const timePickerOptions: IComboBoxOption[] = React.useMemo(() => { const optionsList = Array(optionsCount); diff --git a/packages/react/src/components/Tooltip/Tooltip.test.tsx b/packages/react/src/components/Tooltip/Tooltip.test.tsx index f62e2d4cbf7251..e070b3c3b8241c 100644 --- a/packages/react/src/components/Tooltip/Tooltip.test.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.test.tsx @@ -51,7 +51,7 @@ describe('Tooltip', () => { const directionalHint = DirectionalHint.bottomLeftEdge; const directionalHintForRTL = DirectionalHint.topRightEdge; - const targetElement = (ReactTestUtils.renderIntoDocument(
) as unknown) as HTMLElement; + const targetElement = ReactTestUtils.renderIntoDocument(
) as unknown as HTMLElement; let onRenderCalled = false; const component = mount( diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index 6cd563ee826454..0856a157715087 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -93,7 +93,8 @@ function getStyledSuggestions(suggestionsType: new (props: ISuggestionsProps< */ export class BasePicker> extends React.Component> - implements IBasePicker { + implements IBasePicker +{ // Refs protected root = React.createRef(); protected input = React.createRef(); diff --git a/packages/react/src/utilities/DraggableZone/DraggableZone.styles.ts b/packages/react/src/utilities/DraggableZone/DraggableZone.styles.ts index 429c6e78914288..0ebc3b6e4a88fd 100644 --- a/packages/react/src/utilities/DraggableZone/DraggableZone.styles.ts +++ b/packages/react/src/utilities/DraggableZone/DraggableZone.styles.ts @@ -5,20 +5,18 @@ export interface IDraggableZoneStyles { root: string; } -export const getClassNames = memoizeFunction( - (className: string, isDragging: boolean): IDraggableZoneStyles => { - return { - root: mergeStyles( - className, - isDragging && { - touchAction: 'none', - selectors: { - '& *': { - userSelect: 'none', - }, +export const getClassNames = memoizeFunction((className: string, isDragging: boolean): IDraggableZoneStyles => { + return { + root: mergeStyles( + className, + isDragging && { + touchAction: 'none', + selectors: { + '& *': { + userSelect: 'none', }, }, - ), - }; - }, -); + }, + ), + }; +}); diff --git a/packages/test-utilities/src/safeMount.ts b/packages/test-utilities/src/safeMount.ts index 97cdbc412edc5e..23fc8b906e997e 100644 --- a/packages/test-utilities/src/safeMount.ts +++ b/packages/test-utilities/src/safeMount.ts @@ -14,7 +14,7 @@ import { createTestContainer } from './createTestContainer'; export function safeMount< TComponent extends React.Component, TProps = TComponent['props'], - TState = TComponent['state'] + TState = TComponent['state'], >( content: React.ReactElement, callback?: (wrapper: ReactWrapper) => void, diff --git a/packages/utilities/src/Async.ts b/packages/utilities/src/Async.ts index c457053a6ac4aa..142ac9dbe43da4 100644 --- a/packages/utilities/src/Async.ts +++ b/packages/utilities/src/Async.ts @@ -325,7 +325,7 @@ export class Async { noOpFunction.cancel = () => { return; }; - noOpFunction.flush = ((() => null) as unknown) as () => ReturnType; + noOpFunction.flush = (() => null) as unknown as () => ReturnType; noOpFunction.pending = () => false; return noOpFunction; diff --git a/packages/utilities/src/createMergedRef.ts b/packages/utilities/src/createMergedRef.ts index a02b906e26b0d8..e1ac30e9fef5d6 100644 --- a/packages/utilities/src/createMergedRef.ts +++ b/packages/utilities/src/createMergedRef.ts @@ -13,16 +13,18 @@ type LocalState = { * Set up a ref resolver function given internal state managed for the ref. * @param local Set */ -const createResolver = (local: LocalState) => (newValue: TType | TValue | null) => { - for (const ref of local.refs) { - if (typeof ref === 'function') { - ref(newValue); - } else if (ref) { - // work around the immutability of the React.Ref type - ((ref as unknown) as React.MutableRefObject).current = newValue; +const createResolver = + (local: LocalState) => + (newValue: TType | TValue | null) => { + for (const ref of local.refs) { + if (typeof ref === 'function') { + ref(newValue); + } else if (ref) { + // work around the immutability of the React.Ref type + (ref as unknown as React.MutableRefObject).current = newValue; + } } - } -}; + }; /** * Helper to merge refs from within class components. diff --git a/packages/utilities/src/initials.ts b/packages/utilities/src/initials.ts index 9dd1882b9412e9..d7bf2b95ac9181 100644 --- a/packages/utilities/src/initials.ts +++ b/packages/utilities/src/initials.ts @@ -32,7 +32,8 @@ const MULTIPLE_WHITESPACES_REGEX: RegExp = /\s+/g; * CJK Unified Ideographs Extension B */ // eslint-disable-next-line @fluentui/max-len -const UNSUPPORTED_TEXT_REGEX: RegExp = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; +const UNSUPPORTED_TEXT_REGEX: RegExp = + /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; function getInitialsLatin(displayName: string, isRtl: boolean): string { let initials = ''; diff --git a/packages/utilities/src/merge.ts b/packages/utilities/src/merge.ts index 3b6568b37e3889..b814d424cf23df 100644 --- a/packages/utilities/src/merge.ts +++ b/packages/utilities/src/merge.ts @@ -27,9 +27,9 @@ function _merge(target: T, source: T, circularReferences: any[ const value: T[Extract] = source[name]; if (typeof value === 'object' && value !== null && !Array.isArray(value)) { const isCircularReference = circularReferences.indexOf(value) > -1; - target[name] = (isCircularReference - ? value - : _merge(target[name] || {}, value, circularReferences)) as T[Extract]; + target[name] = ( + isCircularReference ? value : _merge(target[name] || {}, value, circularReferences) + ) as T[Extract]; } else { target[name] = value; } diff --git a/packages/utilities/src/modalize.ts b/packages/utilities/src/modalize.ts index 267e89c50110cb..17bb9d7cf93a5a 100644 --- a/packages/utilities/src/modalize.ts +++ b/packages/utilities/src/modalize.ts @@ -25,7 +25,7 @@ export function modalize(target: HTMLElement): () => void { // start at target, then recurse and do the same for parent, until we reach while (target !== targetDocument.body && target.parentElement) { // grab all siblings of current element - for (const sibling of (target.parentElement.children as unknown) as HTMLElement[]) { + for (const sibling of target.parentElement.children as unknown as HTMLElement[]) { // but ignore elements that are already aria-hidden const ariaHidden = sibling.getAttribute('aria-hidden'); if (sibling !== target && ariaHidden?.toLowerCase() !== 'true' && tagsToIgnore.indexOf(sibling.tagName) === -1) { diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx index 22b609d61e1781..0b65e10ed6cfaf 100644 --- a/packages/utilities/src/styled.tsx +++ b/packages/utilities/src/styled.tsx @@ -52,7 +52,7 @@ export type StyleFunction = IStyleFunctionOrObject, TStyleProps, - TStyleSet extends IStyleSet + TStyleSet extends IStyleSet, >( Component: React.ComponentClass | React.FunctionComponent, baseStyles: IStyleFunctionOrObject, @@ -64,7 +64,7 @@ export function styled< TComponentProps extends IPropsWithStyles & React.RefAttributes, TStyleProps, TStyleSet extends IStyleSet, - TRef = unknown + TRef = unknown, >( Component: React.ComponentClass | React.FunctionComponent, baseStyles: IStyleFunctionOrObject, @@ -76,7 +76,7 @@ export function styled< TComponentProps extends IPropsWithStyles & React.RefAttributes, TStyleProps, TStyleSet extends IStyleSet, - TRef = unknown + TRef = unknown, >( Component: React.ComponentClass | React.FunctionComponent, baseStyles: IStyleFunctionOrObject, diff --git a/packages/utilities/src/useFocusRects.test.tsx b/packages/utilities/src/useFocusRects.test.tsx index 8c441abc7e531e..944e10bac5c915 100644 --- a/packages/utilities/src/useFocusRects.test.tsx +++ b/packages/utilities/src/useFocusRects.test.tsx @@ -70,7 +70,7 @@ describe('useFocusRects', () => { defaultView: mockWindow, }, }; - const mockRefObject = ({ current: mockTarget } as unknown) as React.RefObject; + const mockRefObject = { current: mockTarget } as unknown as React.RefObject; const mockWindow2 = new MockWindow(); const mockTarget2 = { @@ -78,7 +78,7 @@ describe('useFocusRects', () => { defaultView: mockWindow2, }, }; - const mockRefObject2 = ({ current: mockTarget2 } as unknown) as React.RefObject; + const mockRefObject2 = { current: mockTarget2 } as unknown as React.RefObject; beforeEach(() => { mockWindow.reset(); diff --git a/packages/utilities/src/warn/warnControlledUsage.ts b/packages/utilities/src/warn/warnControlledUsage.ts index ec40bfe4c082ad..0ce94b86f31767 100644 --- a/packages/utilities/src/warn/warnControlledUsage.ts +++ b/packages/utilities/src/warn/warnControlledUsage.ts @@ -59,16 +59,8 @@ export interface IWarnControlledUsageParams

{ */ export function warnControlledUsage

(params: IWarnControlledUsageParams

): void { if (process.env.NODE_ENV !== 'production') { - const { - componentId, - componentName, - defaultValueProp, - props, - oldProps, - onChangeProp, - readOnlyProp, - valueProp, - } = params; + const { componentId, componentName, defaultValueProp, props, oldProps, onChangeProp, readOnlyProp, valueProp } = + params; // This warning logic closely follows what React does for native elements. diff --git a/packages/web-components/src/_docs/design-system/color-explorer/app.ts b/packages/web-components/src/_docs/design-system/color-explorer/app.ts index 4f1448df07ec1e..14ed65e42ca71e 100644 --- a/packages/web-components/src/_docs/design-system/color-explorer/app.ts +++ b/packages/web-components/src/_docs/design-system/color-explorer/app.ts @@ -216,19 +216,17 @@ export class App extends FASTElement { return this.showOnlyLayerBackgrounds ? neutralLayers - : this.neutralPalette.map( - (color: string, index: number): SwatchInfo => { - const neutralLayerIndex: number = neutralLayers.findIndex( - (config: SwatchInfo): boolean => config.color === color, - ); + : this.neutralPalette.map((color: string, index: number): SwatchInfo => { + const neutralLayerIndex: number = neutralLayers.findIndex( + (config: SwatchInfo): boolean => config.color === color, + ); - return { - index, - color, - title: neutralLayerIndex !== -1 ? neutralLayers[neutralLayerIndex].title : undefined, - }; - }, - ); + return { + index, + color, + title: neutralLayerIndex !== -1 ? neutralLayers[neutralLayerIndex].title : undefined, + }; + }); } private layerRecipes: Array<[DesignToken, string]> = [ @@ -246,16 +244,14 @@ export class App extends FASTElement { baseLayerLuminance.setValueFor(designSystemElement, luminance); return this.layerRecipes - .map( - (conf: [DesignToken, string]): SwatchInfo => { - const color = conf[0].getValueFor(document.body).evaluate(designSystemElement).toColorString(); - return { - index: this.neutralPalette.indexOf(color), - color: color, - title: conf[1], - }; - }, - ) + .map((conf: [DesignToken, string]): SwatchInfo => { + const color = conf[0].getValueFor(document.body).evaluate(designSystemElement).toColorString(); + return { + index: this.neutralPalette.indexOf(color), + color: color, + title: conf[1], + }; + }) .reduce((accum: Array, value: SwatchInfo): Array => { const colorIndex: number = accum.findIndex((config: SwatchInfo): boolean => config.color === value.color); diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts index 91e55d43766d97..e53f0da7c10a18 100644 --- a/packages/web-components/src/design-tokens.ts +++ b/packages/web-components/src/design-tokens.ts @@ -332,9 +332,9 @@ export const neutralLayerCardContainerRecipe = createNonCss( }); /** @public */ -export const neutralLayerCardContainer = create( - 'neutral-layer-card-container', -).withDefault((element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element)); +export const neutralLayerCardContainer = create('neutral-layer-card-container').withDefault( + (element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element), +); // Neutral Layer Floating /** @public */ diff --git a/packages/web-components/src/styles/elevation.ts b/packages/web-components/src/styles/elevation.ts index 3050ee75078104..6a83b1fd5ead0b 100644 --- a/packages/web-components/src/styles/elevation.ts +++ b/packages/web-components/src/styles/elevation.ts @@ -72,53 +72,46 @@ export const elevationShadowCardFocusSize = DesignToken.create('elevatio 8, ); /** @public */ -export const elevationShadowCardRest = DesignToken.create( - 'elevation-shadow-card-rest', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardRestSize.getValueFor(element)), +export const elevationShadowCardRest = DesignToken.create('elevation-shadow-card-rest').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardRestSize.getValueFor(element)), ); /** @public */ -export const elevationShadowCardHover = DesignToken.create( - 'elevation-shadow-card-hover', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardHoverSize.getValueFor(element)), +export const elevationShadowCardHover = DesignToken.create('elevation-shadow-card-hover').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardHoverSize.getValueFor(element)), ); /** @public */ -export const elevationShadowCardActive = DesignToken.create( - 'elevation-shadow-card-active', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardActiveSize.getValueFor(element)), +export const elevationShadowCardActive = DesignToken.create('elevation-shadow-card-active').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardActiveSize.getValueFor(element)), ); /** @public */ -export const elevationShadowCardFocus = DesignToken.create( - 'elevation-shadow-card-focus', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardFocusSize.getValueFor(element)), +export const elevationShadowCardFocus = DesignToken.create('elevation-shadow-card-focus').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardFocusSize.getValueFor(element)), ); /** @public */ export const elevationShadowTooltipSize = DesignToken.create('elevation-shadow-tooltip-size').withDefault(16); /** @public */ -export const elevationShadowTooltip = DesignToken.create( - 'elevation-shadow-tooltip', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowTooltipSize.getValueFor(element)), +export const elevationShadowTooltip = DesignToken.create('elevation-shadow-tooltip').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowTooltipSize.getValueFor(element)), ); /** @public */ export const elevationShadowFlyoutSize = DesignToken.create('elevation-shadow-flyout-size').withDefault(32); /** @public */ -export const elevationShadowFlyout = DesignToken.create( - 'elevation-shadow-flyout', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowFlyoutSize.getValueFor(element)), +export const elevationShadowFlyout = DesignToken.create('elevation-shadow-flyout').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowFlyoutSize.getValueFor(element)), ); /** @public */ export const elevationShadowDialogSize = DesignToken.create('elevation-shadow-dialog-size').withDefault(128); /** @public */ -export const elevationShadowDialog = DesignToken.create( - 'elevation-shadow-dialog', -).withDefault((element: HTMLElement) => - elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)), +export const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').withDefault( + (element: HTMLElement) => + elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)), ); diff --git a/rfcs/react-components/convergence/theme-tokens.md b/rfcs/react-components/convergence/theme-tokens.md index 072d5005e5eabc..2a4bac7dca1674 100644 --- a/rfcs/react-components/convergence/theme-tokens.md +++ b/rfcs/react-components/convergence/theme-tokens.md @@ -147,14 +147,14 @@ As the `ThemeProvider` consumes a React context, merges themes and creates a new const radiusOverrides = { global: { borderRadius: { - medium: '6px' - } - } -} + medium: '6px', + }, + }, +}; - + - +; ``` You can also override styles using `makeStyles`: diff --git a/scripts/babel/plugins/types.ts b/scripts/babel/plugins/types.ts index 3c5ddd7a1a4cb9..a08b89da8b3e7e 100644 --- a/scripts/babel/plugins/types.ts +++ b/scripts/babel/plugins/types.ts @@ -12,9 +12,7 @@ type BabelPluginVisitor = exit: BabelPluginVisitorFunction; }; -export type BabelPlugin = ( - options: BabelPluginArguments, -) => { +export type BabelPlugin = (options: BabelPluginArguments) => { visitor: { // This type is extendable, feel to add own visitor types. ImportDeclaration: BabelPluginVisitor; diff --git a/scripts/beachball/utils.ts b/scripts/beachball/utils.ts index 06d7ecf15da3bf..a60797510bcfd2 100644 --- a/scripts/beachball/utils.ts +++ b/scripts/beachball/utils.ts @@ -8,11 +8,7 @@ import { AllPackageInfo, getAllPackageInfo, isConvergedPackage } from '@fluentui * @returns {string[]} Array of package paths for beachball scope */ export function getConfig({ version }: { version: 'v8' }): { scope: string[] }; -export function getConfig({ - version, -}: { - version: 'vNext'; -}): { +export function getConfig({ version }: { version: 'vNext' }): { scope: string[]; groupConfig: { masterPackageName: string; diff --git a/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts b/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts index 2d48898e0ae089..4bf4912c2e5275 100644 --- a/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts +++ b/scripts/dangerjs/src/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts @@ -23,10 +23,12 @@ const getRuntimeDependencies = (packageName: string) => { throw new Error(error); } - return (output - .split('\n') - .map(line => line.match(dependencyRegex)) - .filter(Boolean) as RegExpMatchArray[]).map(match => match[1]); + return ( + output + .split('\n') + .map(line => line.match(dependencyRegex)) + .filter(Boolean) as RegExpMatchArray[] + ).map(match => match[1]); }; export default getRuntimeDependencies; diff --git a/scripts/gulp/src/config.ts b/scripts/gulp/src/config.ts index 7eff9b00dfa40a..16eccae5149f05 100644 --- a/scripts/gulp/src/config.ts +++ b/scripts/gulp/src/config.ts @@ -59,7 +59,10 @@ const envConfig = { // Paths // ------------------------------------ const base = (...paths: string[]) => path.resolve(envConfig.path_base, ...paths); -const fromBase = (...paths: string[]) => (...subPaths: string[]) => base(...paths, ...subPaths); +const fromBase = + (...paths: string[]) => + (...subPaths: string[]) => + base(...paths, ...subPaths); const tempPaths = { build: fromBase(envConfig.dir_build), @@ -79,7 +82,10 @@ const tempPaths = { perfSrc: fromBase(envConfig.dir_perf_src), umdDist: fromBase(envConfig.dir_umd_dist), ciArtifacts: fromBase(envConfig.dir_ci_artifacts), - withRootAt: (root: string, ...subpaths: string[]) => (...args: string[]) => path.resolve(root, ...subpaths, ...args), + withRootAt: + (root: string, ...subpaths: string[]) => + (...args: string[]) => + path.resolve(root, ...subpaths, ...args), }; const paths: typeof tempPaths & { @@ -89,8 +95,11 @@ const paths: typeof tempPaths & { base, ...tempPaths, // all the sibling values, but with forward slashes regardless the OS - posix: _.mapValues(tempPaths, (func: (...args: string[]) => string) => (...args: string[]) => - func(...args).replace(/\\/g, '/'), + posix: _.mapValues( + tempPaths, + (func: (...args: string[]) => string) => + (...args: string[]) => + func(...args).replace(/\\/g, '/'), ) as any, }; diff --git a/scripts/gulp/src/plugins/util/getComponentInfo.ts b/scripts/gulp/src/plugins/util/getComponentInfo.ts index 87b7f89563ac56..56d09dd8c19262 100644 --- a/scripts/gulp/src/plugins/util/getComponentInfo.ts +++ b/scripts/gulp/src/plugins/util/getComponentInfo.ts @@ -107,11 +107,12 @@ export default function getComponentInfo(options: GetComponentInfoOptions): Comp // class name for the component // example, the "button" in class="ui-button" // name of the component, sub component, or plural parent for sub component groups - const componentClassName = (isChild - ? _.includes(subcomponentName, 'Group') - ? `ui-${parentDisplayName}s` - : `ui-${parentDisplayName}__${subcomponentName}` - : `ui-${info.displayName}` + const componentClassName = ( + isChild + ? _.includes(subcomponentName, 'Group') + ? `ui-${parentDisplayName}s` + : `ui-${parentDisplayName}__${subcomponentName}` + : `ui-${info.displayName}` ).toLowerCase(); // replace the component.description string with a parsed docblock object diff --git a/scripts/puppeteer/src/utils.spec.ts b/scripts/puppeteer/src/utils.spec.ts index b333c18d50b85d..c75d21b79068de 100644 --- a/scripts/puppeteer/src/utils.spec.ts +++ b/scripts/puppeteer/src/utils.spec.ts @@ -77,7 +77,7 @@ describe(`utils`, () => { pageMock.goto.mockImplementation(() => Promise.reject(new Error('page wont open - mock'))); await expect( - visitUrl((pageMock as unknown) as puppeteer.Page, 'https://localhost:8080'), + visitUrl(pageMock as unknown as puppeteer.Page, 'https://localhost:8080'), ).rejects.toMatchInlineSnapshot(`[Error: page wont open - mock]`); expect(consoleWarnSpy.mock.calls.flat()).toMatchInlineSnapshot(` @@ -106,9 +106,7 @@ describe(`utils`, () => { const { pageMock } = setup(); - await expect( - visitUrl((pageMock as unknown) as puppeteer.Page, 'https://localhost:8080'), - ).resolves.toBeUndefined(); + await expect(visitUrl(pageMock as unknown as puppeteer.Page, 'https://localhost:8080')).resolves.toBeUndefined(); expect(pageMock.goto).toHaveBeenCalledTimes(1); expect(consoleLogSpy.mock.calls.flat()).toMatchInlineSnapshot(` diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index cbbeb95df8f1fe..aa82592c164d46 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -78,13 +78,8 @@ function loadWorkspaceAddon(addonName, options) { }; } - const { - relativePathToSource, - packageDistPath, - packageTempPath, - presetSourcePath, - presetMockedSourcePath, - } = getPaths(); + const { relativePathToSource, packageDistPath, packageTempPath, presetSourcePath, presetMockedSourcePath } = + getPaths(); if (!fs.existsSync(presetSourcePath)) { throw new Error( @@ -201,9 +196,11 @@ function getPackageStoriesGlob(options) { fs.readFileSync(path.resolve(workspaceRoot, projectMetadata.root, 'package.json'), 'utf-8'), ); - const dependencies = /** @type {Record} */ (Object.assign(packageJson.dependencies, { - [options.packageName]: '*', - })); + const dependencies = /** @type {Record} */ ( + Object.assign(packageJson.dependencies, { + [options.packageName]: '*', + }) + ); const rootOffset = offsetFromRoot(options.callerPath.replace(workspaceRoot, '')); return Object.keys(dependencies) diff --git a/scripts/tasks/src/utils.spec.ts b/scripts/tasks/src/utils.spec.ts index a30d6da02a5894..56e35def7e6576 100644 --- a/scripts/tasks/src/utils.spec.ts +++ b/scripts/tasks/src/utils.spec.ts @@ -52,7 +52,7 @@ describe(`utils`, () => { pathAliasesTsConfigPath: path.join(workspaceRoot, 'tsconfig.base.json'), }); - const newPaths = (actual.overrideTsconfig.compilerOptions.paths as unknown) as Record; + const newPaths = actual.overrideTsconfig.compilerOptions.paths as unknown as Record; const newPath = Object.values(newPaths)[0][0]; expect(newPath).toMatch(new RegExp('^dist/for/types.+src/index.d.ts$', 'i')); diff --git a/scripts/tasks/src/utils.ts b/scripts/tasks/src/utils.ts index 2547fd796f5550..a46babceaff712 100644 --- a/scripts/tasks/src/utils.ts +++ b/scripts/tasks/src/utils.ts @@ -54,7 +54,7 @@ function createNormalizedTsPaths(options: { definitionsRootPath: string; pathAli type PathAliases = Record; const { definitionsRootPath, pathAliasesTsConfigPath } = options; const tsConfigRoot = JSON.parse(fs.readFileSync(pathAliasesTsConfigPath, 'utf-8')) as TsConfig; - const paths = (tsConfigRoot.compilerOptions.paths as unknown) as undefined | PathAliases; + const paths = tsConfigRoot.compilerOptions.paths as unknown as undefined | PathAliases; if (!paths) { throw new Error(`Provided "${pathAliasesTsConfigPath}" has no compilerOptions.path defined`); diff --git a/scripts/triage-bot/src/triage-bot.spec.ts b/scripts/triage-bot/src/triage-bot.spec.ts index 041c68a37572b0..24ab9d44dbe525 100644 --- a/scripts/triage-bot/src/triage-bot.spec.ts +++ b/scripts/triage-bot/src/triage-bot.spec.ts @@ -32,7 +32,7 @@ describe(`triage bot`, () => { ], }; - await main({ ...((githubApi as unknown) as GithubScriptsParams), config }); + await main({ ...(githubApi as unknown as GithubScriptsParams), config }); expect(githubApi.github.rest.issues.addLabels).not.toHaveBeenCalled(); expect(githubApi.github.rest.issues.addAssignees).not.toHaveBeenCalled(); @@ -51,7 +51,7 @@ describe(`triage bot`, () => { }; githubApi.github.rest.issues.addLabels.mockReturnValueOnce(Promise.resolve({ status: 200 })); - await main({ ...((githubApi as unknown) as GithubScriptsParams), config }); + await main({ ...(githubApi as unknown as GithubScriptsParams), config }); expect(formatMockedCalls(githubApi.core.info.mock.calls)).toMatchInlineSnapshot(`"Label set: bug"`); }); @@ -69,7 +69,7 @@ describe(`triage bot`, () => { }; githubApi.github.rest.issues.addLabels.mockReturnValueOnce(Promise.resolve({ status: 200 })); githubApi.github.rest.issues.addAssignees.mockReturnValueOnce(Promise.resolve({ status: 201 })); - await main({ ...((githubApi as unknown) as GithubScriptsParams), config }); + await main({ ...(githubApi as unknown as GithubScriptsParams), config }); expect(formatMockedCalls(githubApi.core.info.mock.calls)).toMatchInlineSnapshot(` "Label set: bug diff --git a/tools/generators/epic-generator/index.spec.ts b/tools/generators/epic-generator/index.spec.ts index f07c47ab82526b..338b737321f8e0 100644 --- a/tools/generators/epic-generator/index.spec.ts +++ b/tools/generators/epic-generator/index.spec.ts @@ -5,8 +5,8 @@ import { workspacePaths } from '../../utils'; import epicGenerator from './index'; jest.mock('child_process'); -const execSyncMock = (execSync as unknown) as jest.Mock; -const spawnSyncMock = (spawnSync as unknown) as jest.Mock>>; +const execSyncMock = execSync as unknown as jest.Mock; +const spawnSyncMock = spawnSync as unknown as jest.Mock>>; type Package = { name: string; From af18a0f154b0c4955a28e6488321da479f3449c7 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:41:51 +0100 Subject: [PATCH 03/13] chore: migrate to prettier 2.4 --- package.json | 6 +++--- .../package.json | 2 +- yarn.lock | 16 ++++++++-------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index f13b2c17fa0667..3a6859ae1e75a0 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "@types/micromatch": "4.0.2", "@types/node": "14.18.32", "@types/node-fetch": "2.5.7", - "@types/prettier": "2.3.2", + "@types/prettier": "2.4.4", "@types/progress": "2.0.5", "@types/prompts": "2.4.1", "@types/react": "17.0.44", @@ -287,7 +287,7 @@ "postcss": "8.3.5", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.3.2", + "prettier": "2.4.1", "pretty-bytes": "5.6.0", "progress": "2.0.3", "prompts": "2.4.2", @@ -379,7 +379,7 @@ "eslint": "7.25.0", "@mdx-js/loader/loader-utils": "~2.0.4", "swc-loader": "^0.2.3", - "prettier": "2.3.2" + "prettier": "2.4.1" }, "syncpack": { "prod": true, diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index b97609b991e939..acf9d502996c0d 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/core": "^7.10.4", - "prettier": "2.3.2", + "prettier": "2.4.1", "pkg-up": "^3.1.0", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index 1509b212b62a0b..ae7210ec356cbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5785,10 +5785,10 @@ resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== -"@types/prettier@*", "@types/prettier@2.3.2", "@types/prettier@^2.1.5": - version "2.3.2" - resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3" - integrity sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog== +"@types/prettier@*", "@types/prettier@2.4.4", "@types/prettier@^2.1.5": + version "2.4.4" + resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.4.tgz#5d9b63132df54d8909fce1c3f8ca260fdd693e17" + integrity sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA== "@types/pretty-hrtime@^1.0.0": version "1.0.1" @@ -21011,10 +21011,10 @@ prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.3.2, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: - version "2.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d" - integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ== +prettier@2.4.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c" + integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA== pretty-bytes@5.6.0, pretty-bytes@^5.6.0: version "5.6.0" From b1de5dcef969922103cf03bb757420000003d10d Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:43:48 +0100 Subject: [PATCH 04/13] style: apply 2.4 on whole codebase --- .../Overviews/StylesPage/StylesPage.module.scss | 2 +- packages/fluentui/styles/src/types.ts | 12 ++++-------- packages/merge-styles/src/IStyleSet.ts | 5 +++-- .../convergence/native-element-props.md | 16 +++++++--------- 4 files changed, 15 insertions(+), 20 deletions(-) diff --git a/apps/public-docsite/src/pages/Overviews/StylesPage/StylesPage.module.scss b/apps/public-docsite/src/pages/Overviews/StylesPage/StylesPage.module.scss index 55d3ba450f0f3f..d38ca0b06fdee0 100644 --- a/apps/public-docsite/src/pages/Overviews/StylesPage/StylesPage.module.scss +++ b/apps/public-docsite/src/pages/Overviews/StylesPage/StylesPage.module.scss @@ -1,4 +1,4 @@ -@use "sass:math"; +@use 'sass:math'; @import '../../../styles/common'; diff --git a/packages/fluentui/styles/src/types.ts b/packages/fluentui/styles/src/types.ts index d56cfb847835e3..911d16db49b46f 100644 --- a/packages/fluentui/styles/src/types.ts +++ b/packages/fluentui/styles/src/types.ts @@ -175,23 +175,19 @@ export type StaticStyles = StaticStyle[]; export type ThemeComponentVariablesInput = { [K in keyof ThemeStylesProps]?: ComponentVariablesInput; -} & - Record; +} & Record; export type ThemeComponentVariablesPrepared = { [K in keyof ThemeStylesProps]?: ComponentVariablesPrepared; -} & - Record; +} & Record; export type ThemeComponentStylesInput = { [K in keyof ThemeStylesProps]?: ComponentSlotStylesInput; -} & - Record; +} & Record; export type ThemeComponentStylesPrepared = { [K in keyof ThemeStylesProps]?: ComponentSlotStylesPrepared; -} & - Record; +} & Record; // ======================================================== // Theme diff --git a/packages/merge-styles/src/IStyleSet.ts b/packages/merge-styles/src/IStyleSet.ts index becc374122d032..64aa0d9e6a81d5 100644 --- a/packages/merge-styles/src/IStyleSet.ts +++ b/packages/merge-styles/src/IStyleSet.ts @@ -4,8 +4,9 @@ import { IStyleFunctionOrObject, IStyleFunction } from './IStyleFunction'; /** * @deprecated Use `Exclude` provided by TypeScript instead. */ -export type Diff = ({ [P in T]: P } & - { [P in U]: never } & { [x: string]: never })[T]; +export type Diff = ({ [P in T]: P } & { [P in U]: never } & { + [x: string]: never; +})[T]; /** * @deprecated Use the version provided by TypeScript instead. diff --git a/rfcs/react-components/convergence/native-element-props.md b/rfcs/react-components/convergence/native-element-props.md index 0dfd1cf9fc8870..ba2fa318deb6f6 100644 --- a/rfcs/react-components/convergence/native-element-props.md +++ b/rfcs/react-components/convergence/native-element-props.md @@ -119,15 +119,13 @@ The `ComponentProps` type has a template parameter to specify the primary slot: ```ts export type ComponentProps = // Put the primary slot's props directly on the ComponentProps - Shorthands[Primary] & - // Add shorthand props for the other slots - { - [Key in Exclude< - keyof Shorthands, - // Exclude `root` only if it is the primary slot - Primary extends 'root' ? Primary : never - >]?: ShorthandProps>; - }; + Shorthands[Primary] & { // Add shorthand props for the other slots + [Key in Exclude< + keyof Shorthands, + // Exclude `root` only if it is the primary slot + Primary extends 'root' ? Primary : never + >]?: ShorthandProps>; + }; ``` #### Implementation From 9211ca9497faa8fdcaf026d939b91b52790c6fb7 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:46:51 +0100 Subject: [PATCH 05/13] chore: migrate to prettier 2.5 --- package.json | 4 ++-- .../babel-preset-storybook-full-source/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 3a6859ae1e75a0..e2429df5b199eb 100644 --- a/package.json +++ b/package.json @@ -287,7 +287,7 @@ "postcss": "8.3.5", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.4.1", + "prettier": "2.5.1", "pretty-bytes": "5.6.0", "progress": "2.0.3", "prompts": "2.4.2", @@ -379,7 +379,7 @@ "eslint": "7.25.0", "@mdx-js/loader/loader-utils": "~2.0.4", "swc-loader": "^0.2.3", - "prettier": "2.4.1" + "prettier": "2.5.1" }, "syncpack": { "prod": true, diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index acf9d502996c0d..f96ae205aa28d6 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/core": "^7.10.4", - "prettier": "2.4.1", + "prettier": "2.5.1", "pkg-up": "^3.1.0", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index ae7210ec356cbf..3e6f09990db0d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21011,10 +21011,10 @@ prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.4.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: - version "2.4.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c" - integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA== +prettier@2.5.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" + integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== pretty-bytes@5.6.0, pretty-bytes@^5.6.0: version "5.6.0" From c958b843fdb2c20302644f4581d08b45ff3a7b9e Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:48:58 +0100 Subject: [PATCH 06/13] style: apply 2.5 on whole codebase --- .../src/stories/AvatarGroup.stories.tsx | 45 +++--- .../src/utilities/TestWrapperDecorator.tsx | 45 +++--- .../datepickerCalendarCellButtonBehavior.ts | 21 +-- .../src/components/ItemLayout/ItemLayout.tsx | 134 +++++++++--------- .../CommandBar.CommandBarButtonAs.Example.tsx | 63 ++++---- .../Suggestions/SuggestionsItem.tsx | 83 +++++------ .../convergence/native-element-props.md | 3 +- 7 files changed, 200 insertions(+), 194 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index b249303b49cfa0..6bd674763f1cb4 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -45,29 +45,30 @@ const names = [ const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128]; -const AvatarGroupList: React.FC = - props => { - const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout }); +const AvatarGroupList: React.FC< + AvatarGroupProps & { overflowIndicator?: AvatarGroupPopoverProps['indicator'] } +> = props => { + const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout }); - return ( -

- {sizes.map(size => ( - - {inlineItems.map(name => ( - - ))} - {overflowItems && ( - - {overflowItems.map(name => ( - - ))} - - )} - - ))} -
- ); - }; + return ( +
+ {sizes.map(size => ( + + {inlineItems.map(name => ( + + ))} + {overflowItems && ( + + {overflowItems.map(name => ( + + ))} + + )} + + ))} +
+ ); +}; // Non-interactive stories storiesOf('AvatarGroup Converged', module) diff --git a/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx b/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx index 34ee61c6c88f23..338d241c6eaff8 100644 --- a/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx +++ b/apps/vr-tests/src/utilities/TestWrapperDecorator.tsx @@ -18,29 +18,32 @@ export const TestWrapperDecoratorTall: DecoratorFunction ); -export const TestWrapperDecoratorTallFixedWidth: DecoratorFunction = - story => ( -
-
- {story()} -
+export const TestWrapperDecoratorTallFixedWidth: DecoratorFunction< + ExtendedStoryFnReturnType +> = story => ( +
+
+ {story()}
- ); +
+); -export const TestWrapperDecoratorFixedWidth: DecoratorFunction = - story => ( -
-
- {story()} -
+export const TestWrapperDecoratorFixedWidth: DecoratorFunction< + ExtendedStoryFnReturnType +> = story => ( +
+
+ {story()}
- ); +
+); -export const TestWrapperDecoratorFullWidth: DecoratorFunction = - story => ( -
-
- {story()} -
+export const TestWrapperDecoratorFullWidth: DecoratorFunction< + ExtendedStoryFnReturnType +> = story => ( +
+
+ {story()}
- ); +
+); diff --git a/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts index 1028aaaf9adf8e..5f3445de857580 100644 --- a/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts +++ b/packages/fluentui/accessibility/src/behaviors/Datepicker/datepickerCalendarCellButtonBehavior.ts @@ -9,17 +9,18 @@ import { Accessibility } from '../../types'; * Adds attribute 'aria-selected=true' based on the property 'selected'. * Adds role='gridcell'. */ -export const datepickerCalendarCellButtonBehavior: Accessibility = - props => ({ - attributes: { - root: { - role: 'gridcell', - ...(props.selected && { 'aria-selected': true }), - ...(props.disabled && { 'aria-disabled': true }), - ...(props.today && { 'aria-current': 'date' }), - }, +export const datepickerCalendarCellButtonBehavior: Accessibility< + DatepickerCalendarCellButtonBehaviorProps +> = props => ({ + attributes: { + root: { + role: 'gridcell', + ...(props.selected && { 'aria-selected': true }), + ...(props.disabled && { 'aria-disabled': true }), + ...(props.today && { 'aria-current': 'date' }), }, - }); + }, +}); export type DatepickerCalendarCellButtonBehaviorProps = { /** Cell can be selected. */ diff --git a/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx b/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx index 6586c32bd67ecc..2e67b2491c1fb9 100644 --- a/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx +++ b/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx @@ -75,77 +75,77 @@ export type ItemLayoutStylesProps = never; /** * (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates. */ -export const ItemLayout: ComponentWithAs<'div', ItemLayoutProps> & FluentComponentStaticProps = - props => { - const context = useFluentContext(); - const { setStart, setEnd } = useTelemetry(ItemLayout.displayName, context.telemetry); - setStart(); - const { - as, - debug, - endMedia, - media, - renderMainArea, - rootCSS, - mediaCSS, - endMediaCSS, +export const ItemLayout: ComponentWithAs<'div', ItemLayoutProps> & + FluentComponentStaticProps = props => { + const context = useFluentContext(); + const { setStart, setEnd } = useTelemetry(ItemLayout.displayName, context.telemetry); + setStart(); + const { + as, + debug, + endMedia, + media, + renderMainArea, + rootCSS, + mediaCSS, + endMediaCSS, + className, + design, + styles, + variables, + } = props; + + const unhandledProps = useUnhandledProps(ItemLayout.handledProps, props); + + const { classes, styles: resolvedStyles } = useStyles(ItemLayout.displayName, { + className: itemLayoutClassName, + mapPropsToInlineStyles: () => ({ className, design, styles, variables, - } = props; - - const unhandledProps = useUnhandledProps(ItemLayout.handledProps, props); - - const { classes, styles: resolvedStyles } = useStyles(ItemLayout.displayName, { - className: itemLayoutClassName, - mapPropsToInlineStyles: () => ({ - className, - design, - styles, - variables, - }), - rtl: context.rtl, - }); - - const startArea = media; - const mainArea = renderMainArea(props, classes); - const endArea = endMedia; - - const mergedMediaClasses = cx(itemLayoutSlotClassNames.media, classes.media); - const mergedEndMediaClasses = cx(itemLayoutSlotClassNames.endMedia, classes.endMedia); - - const element = ( - - {rtlTextContainer.createFor({ element: startArea })} - - ) - } - main={mainArea} - end={ - endArea && ( - - {rtlTextContainer.createFor({ element: endArea })} - - ) - } - {...unhandledProps} - /> - ); - setEnd(); - return element; - }; + }), + rtl: context.rtl, + }); + + const startArea = media; + const mainArea = renderMainArea(props, classes); + const endArea = endMedia; + + const mergedMediaClasses = cx(itemLayoutSlotClassNames.media, classes.media); + const mergedEndMediaClasses = cx(itemLayoutSlotClassNames.endMedia, classes.endMedia); + + const element = ( + + {rtlTextContainer.createFor({ element: startArea })} + + ) + } + main={mainArea} + end={ + endArea && ( + + {rtlTextContainer.createFor({ element: endArea })} + + ) + } + {...unhandledProps} + /> + ); + setEnd(); + return element; +}; ItemLayout.displayName = 'ItemLayout'; diff --git a/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx b/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx index 8f89b80fd406e2..263f338b2bd380 100644 --- a/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx +++ b/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx @@ -60,40 +60,39 @@ const overflowButtonProps: IButtonProps = { /** Command bar which renders the Share button with a coachmark */ // eslint-disable-next-line @fluentui/max-len -const IndividualCommandBarButtonAsExample: React.FunctionComponent = - props => { - const { onDismissCoachmark, isCoachmarkVisible } = props; - const items: ICommandBarItemProps[] = React.useMemo(() => { - const CoachmarkButtonWrapper: IComponentAs = ( - p: IComponentAsProps, - ) => { - return ( - - ); - }; +const IndividualCommandBarButtonAsExample: React.FunctionComponent< + IIndividualCommandBarButtonAsExampleProps +> = props => { + const { onDismissCoachmark, isCoachmarkVisible } = props; + const items: ICommandBarItemProps[] = React.useMemo(() => { + const CoachmarkButtonWrapper: IComponentAs = (p: IComponentAsProps) => { + return ( + + ); + }; - return [ - { key: 'newItem', text: 'New', iconProps: { iconName: 'Add' }, onClick: () => console.log('New') }, - { key: 'upload', text: 'Upload', iconProps: { iconName: 'Upload' }, onClick: () => console.log('Upload') }, - { - key: 'share', - text: 'Share', - iconProps: { iconName: 'Share' }, - // The Share button will have a coachmark - commandBarButtonAs: CoachmarkButtonWrapper, - onClick: () => console.log('Share'), - }, - { - key: 'download', - text: 'Download', - iconProps: { iconName: 'Download' }, - onClick: () => console.log('Download'), - }, - ]; - }, [onDismissCoachmark, isCoachmarkVisible]); + return [ + { key: 'newItem', text: 'New', iconProps: { iconName: 'Add' }, onClick: () => console.log('New') }, + { key: 'upload', text: 'Upload', iconProps: { iconName: 'Upload' }, onClick: () => console.log('Upload') }, + { + key: 'share', + text: 'Share', + iconProps: { iconName: 'Share' }, + // The Share button will have a coachmark + commandBarButtonAs: CoachmarkButtonWrapper, + onClick: () => console.log('Share'), + }, + { + key: 'download', + text: 'Download', + iconProps: { iconName: 'Download' }, + onClick: () => console.log('Download'), + }, + ]; + }, [onDismissCoachmark, isCoachmarkVisible]); - return ; - }; + return ; +}; export const IndividualCommandBarButtonAsExampleWrapper: React.FunctionComponent = () => { const [isCoachmarkVisible, setIsCoachmarkVisible] = React.useState(true); diff --git a/packages/react-experiments/src/components/FloatingSuggestions/Suggestions/SuggestionsItem.tsx b/packages/react-experiments/src/components/FloatingSuggestions/Suggestions/SuggestionsItem.tsx index c9a76846907291..d6a6aa40992f74 100644 --- a/packages/react-experiments/src/components/FloatingSuggestions/Suggestions/SuggestionsItem.tsx +++ b/packages/react-experiments/src/components/FloatingSuggestions/Suggestions/SuggestionsItem.tsx @@ -8,49 +8,50 @@ import type { ISuggestionItemProps, ISuggestionsItemStyleProps, ISuggestionsItem const getClassNames = classNamesFunction(); -export const SuggestionsItemInner: (props: ISuggestionItemProps) => React.ReactElement = - props => { - const { - suggestionModel, - onRenderSuggestion: RenderSuggestion, - onClick, - className, - onRemoveItem, - isSelectedOverride, - removeButtonAriaLabel, - styles, - theme, - } = props; +export const SuggestionsItemInner: ( + props: ISuggestionItemProps, +) => React.ReactElement = props => { + const { + suggestionModel, + onRenderSuggestion: RenderSuggestion, + onClick, + className, + onRemoveItem, + isSelectedOverride, + removeButtonAriaLabel, + styles, + theme, + } = props; - const classNames: Partial> = styles - ? // TODO don't do this horrible hack to get around `styled` typing problems. - getClassNames(styles || getStyles, { - theme: theme!, - className, - suggested: suggestionModel.selected || isSelectedOverride, - }) - : { - itemButton: css('ms-Suggestions-itemButton'), - closeButton: css('ms-Suggestions-closeButton'), - }; + const classNames: Partial> = styles + ? // TODO don't do this horrible hack to get around `styled` typing problems. + getClassNames(styles || getStyles, { + theme: theme!, + className, + suggested: suggestionModel.selected || isSelectedOverride, + }) + : { + itemButton: css('ms-Suggestions-itemButton'), + closeButton: css('ms-Suggestions-closeButton'), + }; - return ( -
- - - - {props.showRemoveButton ? ( - - ) : null} -
- ); - }; + return ( +
+ + + + {props.showRemoveButton ? ( + + ) : null} +
+ ); +}; export const SuggestionsItem = styled, ISuggestionsItemStyleProps, ISuggestionsItemStyles>( SuggestionsItemInner, diff --git a/rfcs/react-components/convergence/native-element-props.md b/rfcs/react-components/convergence/native-element-props.md index ba2fa318deb6f6..88107ef87db603 100644 --- a/rfcs/react-components/convergence/native-element-props.md +++ b/rfcs/react-components/convergence/native-element-props.md @@ -119,7 +119,8 @@ The `ComponentProps` type has a template parameter to specify the primary slot: ```ts export type ComponentProps = // Put the primary slot's props directly on the ComponentProps - Shorthands[Primary] & { // Add shorthand props for the other slots + Shorthands[Primary] & { + // Add shorthand props for the other slots [Key in Exclude< keyof Shorthands, // Exclude `root` only if it is the primary slot From 9b19650dfdb7fd254ea01c7ce19879d229546e47 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 12:55:40 +0100 Subject: [PATCH 07/13] chore: migrate to prettier 2.6 --- package.json | 6 +++--- .../package.json | 2 +- yarn.lock | 16 ++++++++-------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index e2429df5b199eb..78dab6226f7f5c 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "@types/micromatch": "4.0.2", "@types/node": "14.18.32", "@types/node-fetch": "2.5.7", - "@types/prettier": "2.4.4", + "@types/prettier": "2.6.4", "@types/progress": "2.0.5", "@types/prompts": "2.4.1", "@types/react": "17.0.44", @@ -287,7 +287,7 @@ "postcss": "8.3.5", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.5.1", + "prettier": "2.6.2", "pretty-bytes": "5.6.0", "progress": "2.0.3", "prompts": "2.4.2", @@ -379,7 +379,7 @@ "eslint": "7.25.0", "@mdx-js/loader/loader-utils": "~2.0.4", "swc-loader": "^0.2.3", - "prettier": "2.5.1" + "prettier": "2.6.2" }, "syncpack": { "prod": true, diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index f96ae205aa28d6..aa53818dc3e870 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/core": "^7.10.4", - "prettier": "2.5.1", + "prettier": "2.6.2", "pkg-up": "^3.1.0", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index 3e6f09990db0d9..05f3b80608fa1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5785,10 +5785,10 @@ resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== -"@types/prettier@*", "@types/prettier@2.4.4", "@types/prettier@^2.1.5": - version "2.4.4" - resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.4.tgz#5d9b63132df54d8909fce1c3f8ca260fdd693e17" - integrity sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA== +"@types/prettier@*", "@types/prettier@2.6.4", "@types/prettier@^2.1.5": + version "2.6.4" + resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.4.tgz#ad899dad022bab6b5a9f0a0fe67c2f7a4a8950ed" + integrity sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw== "@types/pretty-hrtime@^1.0.0": version "1.0.1" @@ -21011,10 +21011,10 @@ prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.5.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: - version "2.5.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" - integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== +prettier@2.6.2, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: + version "2.6.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032" + integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew== pretty-bytes@5.6.0, pretty-bytes@^5.6.0: version "5.6.0" From 192e386581a2957805d6cc33c139be9b2c13ed82 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 13:02:38 +0100 Subject: [PATCH 08/13] chore: migrate to prettier 2.7 --- package.json | 6 +++--- .../package.json | 2 +- yarn.lock | 16 ++++++++-------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 78dab6226f7f5c..c1d294d9395308 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "@types/micromatch": "4.0.2", "@types/node": "14.18.32", "@types/node-fetch": "2.5.7", - "@types/prettier": "2.6.4", + "@types/prettier": "2.7.2", "@types/progress": "2.0.5", "@types/prompts": "2.4.1", "@types/react": "17.0.44", @@ -287,7 +287,7 @@ "postcss": "8.3.5", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.6.2", + "prettier": "2.7.1", "pretty-bytes": "5.6.0", "progress": "2.0.3", "prompts": "2.4.2", @@ -379,7 +379,7 @@ "eslint": "7.25.0", "@mdx-js/loader/loader-utils": "~2.0.4", "swc-loader": "^0.2.3", - "prettier": "2.6.2" + "prettier": "2.7.1" }, "syncpack": { "prod": true, diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index aa53818dc3e870..b9ff53ad83f85e 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/core": "^7.10.4", - "prettier": "2.6.2", + "prettier": "2.7.1", "pkg-up": "^3.1.0", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index 05f3b80608fa1f..39cef45d42953c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5785,10 +5785,10 @@ resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== -"@types/prettier@*", "@types/prettier@2.6.4", "@types/prettier@^2.1.5": - version "2.6.4" - resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.4.tgz#ad899dad022bab6b5a9f0a0fe67c2f7a4a8950ed" - integrity sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw== +"@types/prettier@*", "@types/prettier@2.7.2", "@types/prettier@^2.1.5": + version "2.7.2" + resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0" + integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg== "@types/pretty-hrtime@^1.0.0": version "1.0.1" @@ -21011,10 +21011,10 @@ prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.6.2, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: - version "2.6.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032" - integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew== +prettier@2.7.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: + version "2.7.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" + integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== pretty-bytes@5.6.0, pretty-bytes@^5.6.0: version "5.6.0" From 00dbd53bc8b9a0ae80886f811d1d8a6f3424ecef Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 13:06:43 +0100 Subject: [PATCH 09/13] chore: migrate to prettier 2.8 --- package.json | 4 ++-- .../babel-preset-storybook-full-source/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c1d294d9395308..3d557194b69872 100644 --- a/package.json +++ b/package.json @@ -287,7 +287,7 @@ "postcss": "8.3.5", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.7.1", + "prettier": "2.8.4", "pretty-bytes": "5.6.0", "progress": "2.0.3", "prompts": "2.4.2", @@ -379,7 +379,7 @@ "eslint": "7.25.0", "@mdx-js/loader/loader-utils": "~2.0.4", "swc-loader": "^0.2.3", - "prettier": "2.7.1" + "prettier": "2.8.4" }, "syncpack": { "prod": true, diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index b9ff53ad83f85e..1c0c43e5bb11ac 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -27,7 +27,7 @@ }, "dependencies": { "@babel/core": "^7.10.4", - "prettier": "2.7.1", + "prettier": "2.8.4", "pkg-up": "^3.1.0", "tslib": "^2.1.0" }, diff --git a/yarn.lock b/yarn.lock index 39cef45d42953c..61ccbdaa72b66c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21011,10 +21011,10 @@ prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.7.1, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: - version "2.7.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" - integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== +prettier@2.8.4, "prettier@>=2.2.1 <=2.3.0", prettier@^2.0.1, prettier@^2.2.1: + version "2.8.4" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3" + integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw== pretty-bytes@5.6.0, pretty-bytes@^5.6.0: version "5.6.0" From d58f173d595a130027601fe4a374e6da4e8d6999 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 13:09:38 +0100 Subject: [PATCH 10/13] style: apply 2.8 on whole codebase --- .../Migration/FromV0/Components/IconCatalog/IconCatalog.tsx | 2 +- apps/stress-test/src/shared/css/RandomSelector.ts | 2 +- packages/fluentui/docs/src/utils/systemColors.ts | 4 ++-- packages/merge-styles/src/Stylesheet.ts | 2 +- .../stories/Combobox/ComboboxControlled.stories.tsx | 2 +- .../stories/Dropdown/DropdownControlled.stories.tsx | 2 +- .../src/components/CalendarYear/CalendarYear.tsx | 4 ++-- .../react-components/react-storybook-addon/src/theme.ts | 4 ++-- .../src/react-experiments/Tile/Tile.Document.Example.tsx | 2 +- .../src/react-experiments/Tile/Tile.Folder.Example.tsx | 2 +- .../src/react-experiments/Tile/Tile.Media.Example.tsx | 2 +- packages/react-experiments/src/components/Tile/Tile.tsx | 2 +- .../react-focus/src/components/FocusZone/FocusZone.types.ts | 2 +- packages/react/src/common/DirectionalHint.ts | 2 +- packages/react/src/components/List/List.types.ts | 2 +- .../src/components/ScrollablePane/ScrollablePane.types.ts | 2 +- packages/scheme-utilities/src/variantThemeType.ts | 2 +- packages/tokens/src/types.ts | 6 +++--- scripts/generators/token-pipeline.ts | 2 +- scripts/github/src/pullRequests.ts | 2 +- scripts/triage-bot/src/types.ts | 4 ++-- scripts/update-release-notes/pullRequests.ts | 2 +- tools/generators/migrate-converged-pkg/index.spec.ts | 4 ++-- tools/generators/version-bump/index.ts | 2 +- 24 files changed, 31 insertions(+), 31 deletions(-) diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx index 408388ff23281e..74d30a39cf9c12 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconCatalog.tsx @@ -43,7 +43,7 @@ const _mapping = rawMapping }; }) .filter(Boolean); -const mapping = _mapping.filter(Boolean) as Array>; +const mapping = _mapping.filter(Boolean) as Array>; const IconCatalogInner: React.FC = () => { const styles = useStyles(); diff --git a/apps/stress-test/src/shared/css/RandomSelector.ts b/apps/stress-test/src/shared/css/RandomSelector.ts index 89b084d8e68f3c..d6711a5fe27afc 100644 --- a/apps/stress-test/src/shared/css/RandomSelector.ts +++ b/apps/stress-test/src/shared/css/RandomSelector.ts @@ -11,7 +11,7 @@ export const defaultSelectorTypes = [ 'attribute-value', ] as const; -type SelectorType = typeof defaultSelectorTypes[number]; +type SelectorType = (typeof defaultSelectorTypes)[number]; type SelectorParams = { seed?: number; diff --git a/packages/fluentui/docs/src/utils/systemColors.ts b/packages/fluentui/docs/src/utils/systemColors.ts index faa50666c089dd..f9f5bde76b5c04 100644 --- a/packages/fluentui/docs/src/utils/systemColors.ts +++ b/packages/fluentui/docs/src/utils/systemColors.ts @@ -9,6 +9,6 @@ export const systemColors = [ 'ButtonFace', ] as const; -export const isSystemColor = (color: string): color is typeof systemColors[number] => { - return systemColors.includes(color as typeof systemColors[number]); +export const isSystemColor = (color: string): color is (typeof systemColors)[number] => { + return systemColors.includes(color as (typeof systemColors)[number]); }; diff --git a/packages/merge-styles/src/Stylesheet.ts b/packages/merge-styles/src/Stylesheet.ts index daf6257a705a04..3be6223b3d3119 100644 --- a/packages/merge-styles/src/Stylesheet.ts +++ b/packages/merge-styles/src/Stylesheet.ts @@ -17,7 +17,7 @@ export const InjectionMode = { appendChild: 2 as 2, }; -export type InjectionMode = typeof InjectionMode[keyof typeof InjectionMode]; +export type InjectionMode = (typeof InjectionMode)[keyof typeof InjectionMode]; /** * CSP settings for the stylesheet diff --git a/packages/react-components/react-combobox/stories/Combobox/ComboboxControlled.stories.tsx b/packages/react-components/react-combobox/stories/Combobox/ComboboxControlled.stories.tsx index da3a0dfa5f8a61..6e477c81db0e04 100644 --- a/packages/react-components/react-combobox/stories/Combobox/ComboboxControlled.stories.tsx +++ b/packages/react-components/react-combobox/stories/Combobox/ComboboxControlled.stories.tsx @@ -23,7 +23,7 @@ export const Controlled = (props: Partial) => { const [selectedOptions, setSelectedOptions] = React.useState(['eatkins']); const [value, setValue] = React.useState('Elvia Atkins'); - const onOptionSelect: typeof props['onOptionSelect'] = (ev, data) => { + const onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => { setSelectedOptions(data.selectedOptions); setValue(data.optionText ?? ''); }; diff --git a/packages/react-components/react-combobox/stories/Dropdown/DropdownControlled.stories.tsx b/packages/react-components/react-combobox/stories/Dropdown/DropdownControlled.stories.tsx index 5475e8c653578c..ee038c252a17e8 100644 --- a/packages/react-components/react-combobox/stories/Dropdown/DropdownControlled.stories.tsx +++ b/packages/react-components/react-combobox/stories/Dropdown/DropdownControlled.stories.tsx @@ -23,7 +23,7 @@ export const Controlled = (props: Partial) => { const [selectedOptions, setSelectedOptions] = React.useState(['eatkins']); const [value, setValue] = React.useState('Elvia Atkins'); - const onOptionSelect: typeof props['onOptionSelect'] = (ev, data) => { + const onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => { setSelectedOptions(data.selectedOptions); setValue(data.optionText ?? ''); }; diff --git a/packages/react-components/react-datepicker/src/components/CalendarYear/CalendarYear.tsx b/packages/react-components/react-datepicker/src/components/CalendarYear/CalendarYear.tsx index 766b93d1b36725..a3fdda7bb6dc39 100644 --- a/packages/react-components/react-datepicker/src/components/CalendarYear/CalendarYear.tsx +++ b/packages/react-components/react-datepicker/src/components/CalendarYear/CalendarYear.tsx @@ -194,7 +194,7 @@ const CalendarYearNavDirection = { }; interface CalendarYearNavArrowProps extends CalendarYearHeaderProps { - direction: typeof CalendarYearNavDirection[keyof typeof CalendarYearNavDirection]; + direction: (typeof CalendarYearNavDirection)[keyof typeof CalendarYearNavDirection]; } const CalendarYearNavArrow: React.FunctionComponent = props => { @@ -385,7 +385,7 @@ const NavigationDirection = { function useYearRangeState({ selectedYear, navigatedYear }: CalendarYearProps) { const [fromYear, navigate] = React.useReducer( - (state: number, action: typeof NavigationDirection[keyof typeof NavigationDirection]): number => { + (state: number, action: (typeof NavigationDirection)[keyof typeof NavigationDirection]): number => { return state + (action === NavigationDirection.Next ? CELL_COUNT : -CELL_COUNT); }, undefined, diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts index 52484c93063684..bdd2df38c3f94b 100644 --- a/packages/react-components/react-storybook-addon/src/theme.ts +++ b/packages/react-components/react-storybook-addon/src/theme.ts @@ -18,7 +18,7 @@ export const themes = [ export const defaultTheme = themes[0]; -export type ThemeIds = typeof themes[number]['id']; -export type ThemeLabels = typeof themes[number]['label']; +export type ThemeIds = (typeof themes)[number]['id']; +export type ThemeLabels = (typeof themes)[number]['label']; export type { Theme }; diff --git a/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx b/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx index e5ac3329ff6fcc..fb9b3825809593 100644 --- a/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx +++ b/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx @@ -41,7 +41,7 @@ const ITEMS: { name: string; activity: string }[] = [ interface IDocumentTileWithThumbnailProps { originalImageSize: ISize; showForeground: boolean; - item: typeof ITEMS[0]; + item: (typeof ITEMS)[0]; } const DocumentTileWithThumbnail: React.FunctionComponent = ( diff --git a/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx b/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx index cd1f93cb1580a6..e255649ef98029 100644 --- a/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx +++ b/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx @@ -45,7 +45,7 @@ interface IFolderTileWithThumbnailProps { folderCoverType?: FolderCoverType; originalImageSize?: ISize; size: 'small' | 'large'; - item: typeof ITEMS[0]; + item: (typeof ITEMS)[0]; } const FolderTileWithThumbnail: React.FunctionComponent = ( diff --git a/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx b/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx index 72f49d663c2767..967edbf0575451 100644 --- a/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx +++ b/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx @@ -105,7 +105,7 @@ interface IImageTileProps { nameplateOnlyOnHover: boolean; linkHref?: string; linkTarget?: string; - item: typeof ITEMS[0]; + item: (typeof ITEMS)[0]; } const ImageTile: React.FunctionComponent = (props: IImageTileProps): JSX.Element => { diff --git a/packages/react-experiments/src/components/Tile/Tile.tsx b/packages/react-experiments/src/components/Tile/Tile.tsx index 9b8f1ba007e933..e27730089aed17 100644 --- a/packages/react-experiments/src/components/Tile/Tile.tsx +++ b/packages/react-experiments/src/components/Tile/Tile.tsx @@ -36,7 +36,7 @@ export const TileLayoutValues = { foregroundMargin: 16 as 16, }; -export type TileLayoutValues = typeof TileLayoutValues[keyof typeof TileLayoutValues]; +export type TileLayoutValues = (typeof TileLayoutValues)[keyof typeof TileLayoutValues]; export interface ITileState { isSelected?: boolean; diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.types.ts b/packages/react-focus/src/components/FocusZone/FocusZone.types.ts index 745357e9272798..1aee30fe0a988f 100644 --- a/packages/react-focus/src/components/FocusZone/FocusZone.types.ts +++ b/packages/react-focus/src/components/FocusZone/FocusZone.types.ts @@ -289,7 +289,7 @@ export const FocusZoneTabbableElements = { /** * {@docCategory FocusZone} */ -export type FocusZoneTabbableElements = typeof FocusZoneTabbableElements[keyof typeof FocusZoneTabbableElements]; +export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements]; /** * {@docCategory FocusZone} diff --git a/packages/react/src/common/DirectionalHint.ts b/packages/react/src/common/DirectionalHint.ts index e8425bb8da3a09..f89cbfa4e1269c 100644 --- a/packages/react/src/common/DirectionalHint.ts +++ b/packages/react/src/common/DirectionalHint.ts @@ -72,4 +72,4 @@ export const DirectionalHint = { rightBottomEdge: 13 as 13, }; -export type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint]; +export type DirectionalHint = (typeof DirectionalHint)[keyof typeof DirectionalHint]; diff --git a/packages/react/src/components/List/List.types.ts b/packages/react/src/components/List/List.types.ts index d2b922663770d9..2ee540b5b066fa 100644 --- a/packages/react/src/components/List/List.types.ts +++ b/packages/react/src/components/List/List.types.ts @@ -27,7 +27,7 @@ export const ScrollToMode = { /** * {@docCategory List} */ -export type ScrollToMode = typeof ScrollToMode[keyof typeof ScrollToMode]; +export type ScrollToMode = (typeof ScrollToMode)[keyof typeof ScrollToMode]; /** * Props passed to the render override for the list root. diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts b/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts index c78b7e14629d42..fe6a24d16d3c6e 100644 --- a/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts +++ b/packages/react/src/components/ScrollablePane/ScrollablePane.types.ts @@ -117,7 +117,7 @@ export const ScrollbarVisibility = { /** * {@docCategory ScrollablePane} */ -export type ScrollbarVisibility = typeof ScrollbarVisibility[keyof typeof ScrollbarVisibility]; +export type ScrollbarVisibility = (typeof ScrollbarVisibility)[keyof typeof ScrollbarVisibility]; export interface IScrollablePaneContext { scrollablePane?: { diff --git a/packages/scheme-utilities/src/variantThemeType.ts b/packages/scheme-utilities/src/variantThemeType.ts index d0eb974b22b41e..df2aae11f8bf45 100644 --- a/packages/scheme-utilities/src/variantThemeType.ts +++ b/packages/scheme-utilities/src/variantThemeType.ts @@ -25,4 +25,4 @@ export const VariantThemeType = { Strong: 3 as 3, }; -export type VariantThemeType = typeof VariantThemeType[keyof typeof VariantThemeType]; +export type VariantThemeType = (typeof VariantThemeType)[keyof typeof VariantThemeType]; diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index 340faa635c5ea6..a96d6c379ca1ea 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -440,9 +440,9 @@ export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 12 export type BrandVariants = Record; -type StatusSharedColorNames = typeof statusSharedColorNames[number]; -type PersonaSharedColorNames = typeof personaSharedColorNames[number]; -type UnusedSharedColorNames = typeof unusedSharedColorNames[number]; +type StatusSharedColorNames = (typeof statusSharedColorNames)[number]; +type PersonaSharedColorNames = (typeof personaSharedColorNames)[number]; +type UnusedSharedColorNames = (typeof unusedSharedColorNames)[number]; export type StatusSharedColors = Record; export type PersonaSharedColors = Record; diff --git a/scripts/generators/token-pipeline.ts b/scripts/generators/token-pipeline.ts index 8c11896f670164..6fc17cca625c3e 100644 --- a/scripts/generators/token-pipeline.ts +++ b/scripts/generators/token-pipeline.ts @@ -31,7 +31,7 @@ function getGeneratedFiles(tmpDir: string) { ]; } -function runPipeline(theme: typeof themes[number], pipelineDir: string, outDir: string) { +function runPipeline(theme: (typeof themes)[number], pipelineDir: string, outDir: string) { console.log(`Running pipeline for ${theme} theme`); console.log(`Generate tokens for theme`); diff --git a/scripts/github/src/pullRequests.ts b/scripts/github/src/pullRequests.ts index e891948b748449..4d38ed109c51dc 100644 --- a/scripts/github/src/pullRequests.ts +++ b/scripts/github/src/pullRequests.ts @@ -61,7 +61,7 @@ export function processPullRequestApiResponse( | RestEndpointMethodTypes['repos']['listPullRequestsAssociatedWithCommit']['response']['data'][number], authorEmail?: string, ): IPullRequest { - const user = pr.user as NonNullable; + const user = pr.user as NonNullable<(typeof pr)['user']>; return { // eslint-disable-next-line @typescript-eslint/naming-convention number: pr.number, diff --git a/scripts/triage-bot/src/types.ts b/scripts/triage-bot/src/types.ts index 8df06c5e6b8bff..d5d4df7a304641 100644 --- a/scripts/triage-bot/src/types.ts +++ b/scripts/triage-bot/src/types.ts @@ -5,8 +5,8 @@ export interface Api extends GithubScriptsParams { config: Schema; } export interface GithubScriptsParams { - context: typeof Github['context']; - github: ReturnType; + context: (typeof Github)['context']; + github: ReturnType<(typeof Github)['getOctokit']>; core: typeof Core; } diff --git a/scripts/update-release-notes/pullRequests.ts b/scripts/update-release-notes/pullRequests.ts index 68db5929071f06..debf1808de3678 100644 --- a/scripts/update-release-notes/pullRequests.ts +++ b/scripts/update-release-notes/pullRequests.ts @@ -149,7 +149,7 @@ async function _addCommitInfo(prs: IPullRequest[]): Promise & { author: NonNullable }; return value.filter(commit => Boolean(commit.author)) as FilteredCommit[]; } diff --git a/tools/generators/migrate-converged-pkg/index.spec.ts b/tools/generators/migrate-converged-pkg/index.spec.ts index 8b7a086f4b7083..674ebe0610e34d 100644 --- a/tools/generators/migrate-converged-pkg/index.spec.ts +++ b/tools/generators/migrate-converged-pkg/index.spec.ts @@ -1209,7 +1209,7 @@ describe('migrate-converged-pkg generator', () => { acc[projectName] = readProjectConfiguration(tree, projectName); return acc; - }, {} as Record); + }, {} as Record<(typeof projects)[number], ReadProjectConfiguration>); expect(configs['@proj/react-foo'].sourceRoot).toBeDefined(); expect(configs['@proj/react-bar'].sourceRoot).toBeDefined(); @@ -1233,7 +1233,7 @@ describe('migrate-converged-pkg generator', () => { acc[projectName] = readProjectConfiguration(tree, projectName); return acc; - }, {} as Record); + }, {} as Record<(typeof projects)[number], ReadProjectConfiguration>); expect(configs[projects[0]].sourceRoot).toBeDefined(); expect(configs[projects[1]].sourceRoot).toBeDefined(); diff --git a/tools/generators/version-bump/index.ts b/tools/generators/version-bump/index.ts index 7b570037ee512b..e6fceb2b9881c1 100644 --- a/tools/generators/version-bump/index.ts +++ b/tools/generators/version-bump/index.ts @@ -193,7 +193,7 @@ export const validbumpTypes = [ ] as const; interface ValidatedSchema extends Required> { - bumpType: typeof validbumpTypes[number]; + bumpType: (typeof validbumpTypes)[number]; exclude: string[]; } From ecd54ff88c80bec55e59d215fccd3c2c8efc3b1e Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 13:25:38 +0100 Subject: [PATCH 11/13] generate change-files --- ...ntui-api-docs-d5ca469c-2654-496e-85aa-4c3c59dafe12.json | 7 +++++++ ...lobal-context-105dbfc7-4bff-4782-bb43-a2ffd6593b41.json | 7 +++++++ ...ntui-codemods-c27a26fe-beb5-4402-9831-54f571677701.json | 7 +++++++ ...eslint-plugin-1b2f2ccd-ab5c-4ff5-af55-4c3500ed8dc5.json | 7 +++++++ ...nt-icons-mdl2-da18f715-b233-4346-9371-7fef925188cd.json | 7 +++++++ ...dation-legacy-d2f76a0c-5a7a-4423-ad3e-4b3ca1aa0306.json | 7 +++++++ ...-merge-styles-a1d94712-a381-46e0-8531-bb7b7a1fd1e3.json | 7 +++++++ ...act-accordion-daf750ca-4fd7-4f2a-ba54-2112b6077602.json | 7 +++++++ ...ui-react-aria-5304324e-0162-496e-b1c5-3d6acfdff6e3.json | 7 +++++++ ...-react-avatar-5e41422a-1f52-4dc2-adf7-7ef6e15bbdc3.json | 7 +++++++ ...-react-button-7a07434b-5ae5-42f8-aa7e-fb02c54d7083.json | 7 +++++++ ...ui-react-card-7a5119c4-8ef8-4591-9504-ea30af8534a3.json | 7 +++++++ ...eact-charting-0232d1c8-11a8-4173-bf99-98133b743406.json | 7 +++++++ ...eact-combobox-3547ec40-830a-4864-8681-770f3cbd77d8.json | 7 +++++++ ...text-selector-93356ee2-04f8-4cf9-89c4-f9ce6b3c065f.json | 7 +++++++ ...te-components-e5f487b6-b5d5-41aa-900e-35d73c46c2a8.json | 7 +++++++ ...t-experiments-5f74ba57-7afe-4423-98e6-ee5108f320e5.json | 7 +++++++ ...luentui-react-f0ffa66e-4df9-426d-9464-43792627bdf4.json | 7 +++++++ ...i-react-focus-908709bd-752d-46ef-935b-62f77dcef7e1.json | 7 +++++++ ...i-react-hooks-c6f6b4f7-2db1-434c-a6fb-27106ac02bcf.json | 7 +++++++ ...ui-react-menu-cc4f7820-c9d1-4ae9-a5dc-f7b9e992c528.json | 7 +++++++ ...gration-v8-v9-4dcb682f-6d4c-40d5-9237-6c573e0f0a49.json | 7 +++++++ ...monaco-editor-011430fb-ca70-4d66-af22-29b61eded1c1.json | 7 +++++++ ...t-positioning-bdc7de0a-49d3-41e0-86ea-3ee0713e38e6.json | 7 +++++++ ...i-react-table-01c97dbb-ba0d-41ca-b65a-825a8da318ee.json | 7 +++++++ ...react-tabster-28b7f5b6-4c14-4b1f-9988-e6aed94045ff.json | 7 +++++++ ...act-utilities-04010e9f-d4f0-4b40-80e1-71a519eb7f2d.json | 7 +++++++ ...eme-utilities-f592b960-40b4-4b0e-9aff-275b49893c98.json | 7 +++++++ ...est-utilities-67f82490-31fe-4468-9d1d-075837d5be9d.json | 7 +++++++ ...uentui-tokens-4647f604-2927-4576-85aa-18d801ae9aa8.json | 7 +++++++ ...tui-utilities-df8fc092-0fac-4b10-836f-f0d2393dc742.json | 7 +++++++ ...eb-components-481c44d1-317d-4ef9-bdb4-faddb6e38605.json | 7 +++++++ 32 files changed, 224 insertions(+) create mode 100644 change/@fluentui-api-docs-d5ca469c-2654-496e-85aa-4c3c59dafe12.json create mode 100644 change/@fluentui-babel-preset-global-context-105dbfc7-4bff-4782-bb43-a2ffd6593b41.json create mode 100644 change/@fluentui-codemods-c27a26fe-beb5-4402-9831-54f571677701.json create mode 100644 change/@fluentui-eslint-plugin-1b2f2ccd-ab5c-4ff5-af55-4c3500ed8dc5.json create mode 100644 change/@fluentui-font-icons-mdl2-da18f715-b233-4346-9371-7fef925188cd.json create mode 100644 change/@fluentui-foundation-legacy-d2f76a0c-5a7a-4423-ad3e-4b3ca1aa0306.json create mode 100644 change/@fluentui-merge-styles-a1d94712-a381-46e0-8531-bb7b7a1fd1e3.json create mode 100644 change/@fluentui-react-accordion-daf750ca-4fd7-4f2a-ba54-2112b6077602.json create mode 100644 change/@fluentui-react-aria-5304324e-0162-496e-b1c5-3d6acfdff6e3.json create mode 100644 change/@fluentui-react-avatar-5e41422a-1f52-4dc2-adf7-7ef6e15bbdc3.json create mode 100644 change/@fluentui-react-button-7a07434b-5ae5-42f8-aa7e-fb02c54d7083.json create mode 100644 change/@fluentui-react-card-7a5119c4-8ef8-4591-9504-ea30af8534a3.json create mode 100644 change/@fluentui-react-charting-0232d1c8-11a8-4173-bf99-98133b743406.json create mode 100644 change/@fluentui-react-combobox-3547ec40-830a-4864-8681-770f3cbd77d8.json create mode 100644 change/@fluentui-react-context-selector-93356ee2-04f8-4cf9-89c4-f9ce6b3c065f.json create mode 100644 change/@fluentui-react-docsite-components-e5f487b6-b5d5-41aa-900e-35d73c46c2a8.json create mode 100644 change/@fluentui-react-experiments-5f74ba57-7afe-4423-98e6-ee5108f320e5.json create mode 100644 change/@fluentui-react-f0ffa66e-4df9-426d-9464-43792627bdf4.json create mode 100644 change/@fluentui-react-focus-908709bd-752d-46ef-935b-62f77dcef7e1.json create mode 100644 change/@fluentui-react-hooks-c6f6b4f7-2db1-434c-a6fb-27106ac02bcf.json create mode 100644 change/@fluentui-react-menu-cc4f7820-c9d1-4ae9-a5dc-f7b9e992c528.json create mode 100644 change/@fluentui-react-migration-v8-v9-4dcb682f-6d4c-40d5-9237-6c573e0f0a49.json create mode 100644 change/@fluentui-react-monaco-editor-011430fb-ca70-4d66-af22-29b61eded1c1.json create mode 100644 change/@fluentui-react-positioning-bdc7de0a-49d3-41e0-86ea-3ee0713e38e6.json create mode 100644 change/@fluentui-react-table-01c97dbb-ba0d-41ca-b65a-825a8da318ee.json create mode 100644 change/@fluentui-react-tabster-28b7f5b6-4c14-4b1f-9988-e6aed94045ff.json create mode 100644 change/@fluentui-react-utilities-04010e9f-d4f0-4b40-80e1-71a519eb7f2d.json create mode 100644 change/@fluentui-scheme-utilities-f592b960-40b4-4b0e-9aff-275b49893c98.json create mode 100644 change/@fluentui-test-utilities-67f82490-31fe-4468-9d1d-075837d5be9d.json create mode 100644 change/@fluentui-tokens-4647f604-2927-4576-85aa-18d801ae9aa8.json create mode 100644 change/@fluentui-utilities-df8fc092-0fac-4b10-836f-f0d2393dc742.json create mode 100644 change/@fluentui-web-components-481c44d1-317d-4ef9-bdb4-faddb6e38605.json diff --git a/change/@fluentui-api-docs-d5ca469c-2654-496e-85aa-4c3c59dafe12.json b/change/@fluentui-api-docs-d5ca469c-2654-496e-85aa-4c3c59dafe12.json new file mode 100644 index 00000000000000..e2011f08274045 --- /dev/null +++ b/change/@fluentui-api-docs-d5ca469c-2654-496e-85aa-4c3c59dafe12.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/api-docs", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-babel-preset-global-context-105dbfc7-4bff-4782-bb43-a2ffd6593b41.json b/change/@fluentui-babel-preset-global-context-105dbfc7-4bff-4782-bb43-a2ffd6593b41.json new file mode 100644 index 00000000000000..0e4f300a31a6d3 --- /dev/null +++ b/change/@fluentui-babel-preset-global-context-105dbfc7-4bff-4782-bb43-a2ffd6593b41.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/babel-preset-global-context", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-codemods-c27a26fe-beb5-4402-9831-54f571677701.json b/change/@fluentui-codemods-c27a26fe-beb5-4402-9831-54f571677701.json new file mode 100644 index 00000000000000..a64e35fb37bed5 --- /dev/null +++ b/change/@fluentui-codemods-c27a26fe-beb5-4402-9831-54f571677701.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/codemods", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-eslint-plugin-1b2f2ccd-ab5c-4ff5-af55-4c3500ed8dc5.json b/change/@fluentui-eslint-plugin-1b2f2ccd-ab5c-4ff5-af55-4c3500ed8dc5.json new file mode 100644 index 00000000000000..98d82cf643f9cc --- /dev/null +++ b/change/@fluentui-eslint-plugin-1b2f2ccd-ab5c-4ff5-af55-4c3500ed8dc5.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/eslint-plugin", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-font-icons-mdl2-da18f715-b233-4346-9371-7fef925188cd.json b/change/@fluentui-font-icons-mdl2-da18f715-b233-4346-9371-7fef925188cd.json new file mode 100644 index 00000000000000..bc700b3429ca32 --- /dev/null +++ b/change/@fluentui-font-icons-mdl2-da18f715-b233-4346-9371-7fef925188cd.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/font-icons-mdl2", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-foundation-legacy-d2f76a0c-5a7a-4423-ad3e-4b3ca1aa0306.json b/change/@fluentui-foundation-legacy-d2f76a0c-5a7a-4423-ad3e-4b3ca1aa0306.json new file mode 100644 index 00000000000000..e6a29f1a4d2d66 --- /dev/null +++ b/change/@fluentui-foundation-legacy-d2f76a0c-5a7a-4423-ad3e-4b3ca1aa0306.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/foundation-legacy", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-merge-styles-a1d94712-a381-46e0-8531-bb7b7a1fd1e3.json b/change/@fluentui-merge-styles-a1d94712-a381-46e0-8531-bb7b7a1fd1e3.json new file mode 100644 index 00000000000000..db522e9c19ecc1 --- /dev/null +++ b/change/@fluentui-merge-styles-a1d94712-a381-46e0-8531-bb7b7a1fd1e3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/merge-styles", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-accordion-daf750ca-4fd7-4f2a-ba54-2112b6077602.json b/change/@fluentui-react-accordion-daf750ca-4fd7-4f2a-ba54-2112b6077602.json new file mode 100644 index 00000000000000..21c53fc3a556cc --- /dev/null +++ b/change/@fluentui-react-accordion-daf750ca-4fd7-4f2a-ba54-2112b6077602.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-accordion", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-aria-5304324e-0162-496e-b1c5-3d6acfdff6e3.json b/change/@fluentui-react-aria-5304324e-0162-496e-b1c5-3d6acfdff6e3.json new file mode 100644 index 00000000000000..099c9890359ec1 --- /dev/null +++ b/change/@fluentui-react-aria-5304324e-0162-496e-b1c5-3d6acfdff6e3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-aria", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-avatar-5e41422a-1f52-4dc2-adf7-7ef6e15bbdc3.json b/change/@fluentui-react-avatar-5e41422a-1f52-4dc2-adf7-7ef6e15bbdc3.json new file mode 100644 index 00000000000000..e4eaeb336218ec --- /dev/null +++ b/change/@fluentui-react-avatar-5e41422a-1f52-4dc2-adf7-7ef6e15bbdc3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-avatar", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-button-7a07434b-5ae5-42f8-aa7e-fb02c54d7083.json b/change/@fluentui-react-button-7a07434b-5ae5-42f8-aa7e-fb02c54d7083.json new file mode 100644 index 00000000000000..5ce6af7975d51d --- /dev/null +++ b/change/@fluentui-react-button-7a07434b-5ae5-42f8-aa7e-fb02c54d7083.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-button", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-card-7a5119c4-8ef8-4591-9504-ea30af8534a3.json b/change/@fluentui-react-card-7a5119c4-8ef8-4591-9504-ea30af8534a3.json new file mode 100644 index 00000000000000..171592d1ff81c4 --- /dev/null +++ b/change/@fluentui-react-card-7a5119c4-8ef8-4591-9504-ea30af8534a3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-card", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-charting-0232d1c8-11a8-4173-bf99-98133b743406.json b/change/@fluentui-react-charting-0232d1c8-11a8-4173-bf99-98133b743406.json new file mode 100644 index 00000000000000..2f962622e36c04 --- /dev/null +++ b/change/@fluentui-react-charting-0232d1c8-11a8-4173-bf99-98133b743406.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-charting", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-combobox-3547ec40-830a-4864-8681-770f3cbd77d8.json b/change/@fluentui-react-combobox-3547ec40-830a-4864-8681-770f3cbd77d8.json new file mode 100644 index 00000000000000..28522e9dd0503a --- /dev/null +++ b/change/@fluentui-react-combobox-3547ec40-830a-4864-8681-770f3cbd77d8.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-combobox", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-context-selector-93356ee2-04f8-4cf9-89c4-f9ce6b3c065f.json b/change/@fluentui-react-context-selector-93356ee2-04f8-4cf9-89c4-f9ce6b3c065f.json new file mode 100644 index 00000000000000..ee02781c09ba27 --- /dev/null +++ b/change/@fluentui-react-context-selector-93356ee2-04f8-4cf9-89c4-f9ce6b3c065f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-context-selector", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-docsite-components-e5f487b6-b5d5-41aa-900e-35d73c46c2a8.json b/change/@fluentui-react-docsite-components-e5f487b6-b5d5-41aa-900e-35d73c46c2a8.json new file mode 100644 index 00000000000000..ae087c56e97817 --- /dev/null +++ b/change/@fluentui-react-docsite-components-e5f487b6-b5d5-41aa-900e-35d73c46c2a8.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-docsite-components", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-experiments-5f74ba57-7afe-4423-98e6-ee5108f320e5.json b/change/@fluentui-react-experiments-5f74ba57-7afe-4423-98e6-ee5108f320e5.json new file mode 100644 index 00000000000000..af1c8167859584 --- /dev/null +++ b/change/@fluentui-react-experiments-5f74ba57-7afe-4423-98e6-ee5108f320e5.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-experiments", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-f0ffa66e-4df9-426d-9464-43792627bdf4.json b/change/@fluentui-react-f0ffa66e-4df9-426d-9464-43792627bdf4.json new file mode 100644 index 00000000000000..b44fef379d5b12 --- /dev/null +++ b/change/@fluentui-react-f0ffa66e-4df9-426d-9464-43792627bdf4.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-focus-908709bd-752d-46ef-935b-62f77dcef7e1.json b/change/@fluentui-react-focus-908709bd-752d-46ef-935b-62f77dcef7e1.json new file mode 100644 index 00000000000000..95507efac696b5 --- /dev/null +++ b/change/@fluentui-react-focus-908709bd-752d-46ef-935b-62f77dcef7e1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-focus", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-hooks-c6f6b4f7-2db1-434c-a6fb-27106ac02bcf.json b/change/@fluentui-react-hooks-c6f6b4f7-2db1-434c-a6fb-27106ac02bcf.json new file mode 100644 index 00000000000000..4fa7305269a0dd --- /dev/null +++ b/change/@fluentui-react-hooks-c6f6b4f7-2db1-434c-a6fb-27106ac02bcf.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-hooks", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-menu-cc4f7820-c9d1-4ae9-a5dc-f7b9e992c528.json b/change/@fluentui-react-menu-cc4f7820-c9d1-4ae9-a5dc-f7b9e992c528.json new file mode 100644 index 00000000000000..358b98243aaf8e --- /dev/null +++ b/change/@fluentui-react-menu-cc4f7820-c9d1-4ae9-a5dc-f7b9e992c528.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-menu", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-migration-v8-v9-4dcb682f-6d4c-40d5-9237-6c573e0f0a49.json b/change/@fluentui-react-migration-v8-v9-4dcb682f-6d4c-40d5-9237-6c573e0f0a49.json new file mode 100644 index 00000000000000..ef2d67e121d88a --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-4dcb682f-6d4c-40d5-9237-6c573e0f0a49.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-monaco-editor-011430fb-ca70-4d66-af22-29b61eded1c1.json b/change/@fluentui-react-monaco-editor-011430fb-ca70-4d66-af22-29b61eded1c1.json new file mode 100644 index 00000000000000..013a1e25a9d3fb --- /dev/null +++ b/change/@fluentui-react-monaco-editor-011430fb-ca70-4d66-af22-29b61eded1c1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-monaco-editor", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-positioning-bdc7de0a-49d3-41e0-86ea-3ee0713e38e6.json b/change/@fluentui-react-positioning-bdc7de0a-49d3-41e0-86ea-3ee0713e38e6.json new file mode 100644 index 00000000000000..715b753a21b89b --- /dev/null +++ b/change/@fluentui-react-positioning-bdc7de0a-49d3-41e0-86ea-3ee0713e38e6.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-positioning", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-table-01c97dbb-ba0d-41ca-b65a-825a8da318ee.json b/change/@fluentui-react-table-01c97dbb-ba0d-41ca-b65a-825a8da318ee.json new file mode 100644 index 00000000000000..7c37c992eb2194 --- /dev/null +++ b/change/@fluentui-react-table-01c97dbb-ba0d-41ca-b65a-825a8da318ee.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-table", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-tabster-28b7f5b6-4c14-4b1f-9988-e6aed94045ff.json b/change/@fluentui-react-tabster-28b7f5b6-4c14-4b1f-9988-e6aed94045ff.json new file mode 100644 index 00000000000000..c5363f574eb474 --- /dev/null +++ b/change/@fluentui-react-tabster-28b7f5b6-4c14-4b1f-9988-e6aed94045ff.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-tabster", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-utilities-04010e9f-d4f0-4b40-80e1-71a519eb7f2d.json b/change/@fluentui-react-utilities-04010e9f-d4f0-4b40-80e1-71a519eb7f2d.json new file mode 100644 index 00000000000000..4ab0041ff195f3 --- /dev/null +++ b/change/@fluentui-react-utilities-04010e9f-d4f0-4b40-80e1-71a519eb7f2d.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/react-utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-scheme-utilities-f592b960-40b4-4b0e-9aff-275b49893c98.json b/change/@fluentui-scheme-utilities-f592b960-40b4-4b0e-9aff-275b49893c98.json new file mode 100644 index 00000000000000..4f22fbbce4da6d --- /dev/null +++ b/change/@fluentui-scheme-utilities-f592b960-40b4-4b0e-9aff-275b49893c98.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/scheme-utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-test-utilities-67f82490-31fe-4468-9d1d-075837d5be9d.json b/change/@fluentui-test-utilities-67f82490-31fe-4468-9d1d-075837d5be9d.json new file mode 100644 index 00000000000000..ac6e16b0485065 --- /dev/null +++ b/change/@fluentui-test-utilities-67f82490-31fe-4468-9d1d-075837d5be9d.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/test-utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-tokens-4647f604-2927-4576-85aa-18d801ae9aa8.json b/change/@fluentui-tokens-4647f604-2927-4576-85aa-18d801ae9aa8.json new file mode 100644 index 00000000000000..fa271ea07e29f7 --- /dev/null +++ b/change/@fluentui-tokens-4647f604-2927-4576-85aa-18d801ae9aa8.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/tokens", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-utilities-df8fc092-0fac-4b10-836f-f0d2393dc742.json b/change/@fluentui-utilities-df8fc092-0fac-4b10-836f-f0d2393dc742.json new file mode 100644 index 00000000000000..deb36a56252f5c --- /dev/null +++ b/change/@fluentui-utilities-df8fc092-0fac-4b10-836f-f0d2393dc742.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/utilities", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-web-components-481c44d1-317d-4ef9-bdb4-faddb6e38605.json b/change/@fluentui-web-components-481c44d1-317d-4ef9-bdb4-faddb6e38605.json new file mode 100644 index 00000000000000..a38f67bb42d4d4 --- /dev/null +++ b/change/@fluentui-web-components-481c44d1-317d-4ef9-bdb4-faddb6e38605.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase", + "packageName": "@fluentui/web-components", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} From 01ecffc3d787e4a67f796b3098b6f38b009a5d08 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 15:45:39 +0100 Subject: [PATCH 12/13] style: fix lint errors caused by new formatting style --- packages/utilities/src/initials.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/src/initials.ts b/packages/utilities/src/initials.ts index d7bf2b95ac9181..6a020c53aeda87 100644 --- a/packages/utilities/src/initials.ts +++ b/packages/utilities/src/initials.ts @@ -31,8 +31,8 @@ const MULTIPLE_WHITESPACES_REGEX: RegExp = /\s+/g; * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs, * CJK Unified Ideographs Extension B */ -// eslint-disable-next-line @fluentui/max-len const UNSUPPORTED_TEXT_REGEX: RegExp = + // eslint-disable-next-line @fluentui/max-len /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; function getInitialsLatin(displayName: string, isRtl: boolean): string { From 148da27d9526d04946a67818117a58d6be8e5ff6 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 1 Mar 2023 16:05:24 +0100 Subject: [PATCH 13/13] docs: fix api.md files errors caused by new formatting style --- packages/merge-styles/etc/merge-styles.api.md | 2 +- .../react-storybook-addon/etc/react-storybook-addon.api.md | 2 +- packages/react-focus/etc/react-focus.api.md | 2 +- packages/react/etc/react.api.md | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/merge-styles/etc/merge-styles.api.md b/packages/merge-styles/etc/merge-styles.api.md index 2ec6c4f20dc8d0..bd0e748d69dfc3 100644 --- a/packages/merge-styles/etc/merge-styles.api.md +++ b/packages/merge-styles/etc/merge-styles.api.md @@ -78,7 +78,7 @@ export const InjectionMode: { }; // @public (undocumented) -export type InjectionMode = typeof InjectionMode[keyof typeof InjectionMode]; +export type InjectionMode = (typeof InjectionMode)[keyof typeof InjectionMode]; // @public export type IProcessedStyleSet> = { diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index 9785ca69a1eb52..20455544dc906e 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -51,7 +51,7 @@ export function parameters(options?: FluentParameters): { export const THEME_ID: "storybook/fluentui-react-addon/theme"; // @public (undocumented) -export type ThemeIds = typeof themes[number]['id']; +export type ThemeIds = (typeof themes)[number]['id']; // @public (undocumented) export const themes: readonly [{ diff --git a/packages/react-focus/etc/react-focus.api.md b/packages/react-focus/etc/react-focus.api.md index 9530101e04c378..bb83efb7bd7a68 100644 --- a/packages/react-focus/etc/react-focus.api.md +++ b/packages/react-focus/etc/react-focus.api.md @@ -48,7 +48,7 @@ export const FocusZoneTabbableElements: { }; // @public (undocumented) -export type FocusZoneTabbableElements = typeof FocusZoneTabbableElements[keyof typeof FocusZoneTabbableElements]; +export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements]; // @public export interface IFocusZone { diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index eb40c50e0161ff..300b4a93688535 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -1448,7 +1448,7 @@ export const DirectionalHint: { }; // @public (undocumented) -export type DirectionalHint = typeof DirectionalHint[keyof typeof DirectionalHint]; +export type DirectionalHint = (typeof DirectionalHint)[keyof typeof DirectionalHint]; export { disableBodyScroll } @@ -10565,7 +10565,7 @@ export const ScrollbarVisibility: { }; // @public (undocumented) -export type ScrollbarVisibility = typeof ScrollbarVisibility[keyof typeof ScrollbarVisibility]; +export type ScrollbarVisibility = (typeof ScrollbarVisibility)[keyof typeof ScrollbarVisibility]; // @public (undocumented) export const ScrollToMode: { @@ -10576,7 +10576,7 @@ export const ScrollToMode: { }; // @public (undocumented) -export type ScrollToMode = typeof ScrollToMode[keyof typeof ScrollToMode]; +export type ScrollToMode = (typeof ScrollToMode)[keyof typeof ScrollToMode]; // @public (undocumented) export const SearchBox: React_2.FunctionComponent;