• Update change files for consistency
• Fix some pr comments
• fix merge
• Change files
• Add change files
• update api
• fix api-extractor warnings

Pull request checklist

• [ ] Addresses an existing issue: fixes #16101
• [ ] Include a change request file using $ yarn change

Description of changes

(give an overview)

Focus areas to test

(optional)

…lution kind of TS config

Pull request checklist

• ~[ ] Addresses an existing issue: Fixes #0000~
• [x] Include a change request file using $ yarn change

Description of changes

Before:

• with current setup linting was not working in editors within /tools project
• while debugging I found out our dynamic config provided invalid paths for file property (double slash etc)

After:

• linting now works consistently within /tools project from CLI and Editor
• files are properly normalized

Focus areas to test

(optional)

Pull request checklist

• ~[ ] Addresses an existing issue:~
• [x] Include a change request file using $ yarn change

Description of changes

(give an overview)

Focus areas to test

(optional)

Pull request checklist

• [x] Include a change request file using $ yarn change

Description of changes

Enable the react-hooks/exhaustive-deps lint rule for useIsomorphicLayoutEffect. Also disable the rule in the one place that it caused a failure.

Pull request checklist

• [x] Addresses an existing issue: Fixes #17891
• [x] Include a change request file using $ yarn change

Description of changes

This PR replaces React.useLayoutEffect with useIsomorphicLayoutEffect as it produces warnings during SSR. Also modifies ESLint preset to prevent future usages. Warnings in existing places of v8 code have been suppressed.

See more details: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

Pull request checklist

• [x] Addresses an existing issue: part of #18025
• [x] Include a change request file using $ yarn change

Description of changes

Update eslint-related dependencies to be compatible with TS 4.1, including proper parsing for import type/export type.

After this change, it will probably be necessary for everyone to delete their local eslint caches (yarn rimraf '{apps,packages}/*/.eslintcache' or similar) to avoid some weird false positives.

Thanks to one or more of the updated deps (hard to say which), usage of React components is now flagged! :tada: However, this meant that a bunch more rule disables had to be added, mainly for usage of Fabric and Customizer. Where it made sense and was clearly safe, I went ahead and changed these to use ThemeProvider, but in other cases I just disabled the rule.

There are also a few other interesting changes that I'll comment on inline.

Related references:

• @typescript-eslint/* v4 release notes
• @typescript-eslint/* v3 release notes

• Package version(s): @fluentui/[email protected]
• Browser and OS versions: NA

Actual behavior:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, u
seLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at TooltipProvider (@fluentui\react-tooltip\lib-commonjs\components\TooltipProvider\TooltipProvider.js:12:38)
    at div
    at ThemeProvider (@fluentui\react-theme-provider\lib-commonjs\components\ThemeProvider\ThemeProvider.js:8:36)

Priorities and help requested:

Are you willing to submit a PR to fix? Yes Requested priority: Normal Products/sites affected: (if applicable)

Pull request checklist

• [x] Addresses an existing issue: Part of #14691
• [x] Include a change request file using $ yarn change

Description of changes

Best viewed with "ignore whitespace changes" (for a couple of the files)

Previously, several pieces of setup code for the public website (developer.microsoft.com/fluentui) and its local/PR deployed versions had to be duplicated across every major version branch of Fluent/Fabric. This was not ideal since the process of making updates (such as adding a new major version) was very manual and error-prone.

This PR adds and uses a new package @fluentui/public-docsite-setup (open to naming suggestions) to de-duplicate website setup tasks, including:

• Loading the real site (developer.microsoft.com/fluentui): get the "manifest" file for the requested (or latest) major version, then load the current website build for that major version
• Loading the local or PR deploy site
• Setting up the version switcher definition (also provides related types)

Build setup

The build steps/configuration related to this change are as follows. (These build steps will also be added in the 5.0, 6.0, and 7.0 branches, using the @fluentui/public-docsite-setup package from master.)

Some of this is also explained in the public-docsite-setup readme.

| File/pipeline | What's called/done | Details | |--|--|--| | apps/public-docsite webpack configs | getLoadSiteConfig() from under @fluentui/public-docsite-setup/scripts/ | Adds a webpack config that generates dist/loadSite.js (for actual loading) and copies shared index.html to website's dist folder | | Release pipeline azure-pipelines.release.yml | yarn create-site-manifests [main package path] [CDN URL root] (script is from @fluentui/public-docsite-setup's bin) | Generates "manifest" files (under site-manifests/v8-prod.js and v8-df.js) with:
- the URL where files from that build will be uploaded
- the full version of @fluentui/react | | Release pipeline azure-pipelines.release.yml | "Publish artifact: fabric-website-manifests" task | Uploads the generated manifest files as a build artifact | | Website release pipeline (internal) | Upload manifest files to live location | |

Additional manual step (as needed): since the live site actually uses bootstrap code stored in an internal repo, manually copy apps/public-docsite/homepage.htm and apps/public-docsite/dist/loadSite.js to the internal repo

What happens at runtime

At runtime, we start with the HTML file loading the loadSite.js bundle. (The bundle is generated by webpack from @fluentui/public-docsite-setup/src/loadSite.ts, using the getLoadSiteConfig() helper.)

The version switcher definition is read from the global by apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx, and various places in the site consume it from there.

Open questions

As the PR is now, there's quite a mix of "fabric" or not in naming. Open for suggestions for what to do here. (Also okay with just going with it as-is.)

| Thing | Name | Notes | |--|--|--| | Main website webpack bundle | fabric-site | A slight improvement over previous name fabric-sitev5. Could let this vary across branches, but it's easiest if we don't. | | Website-related artifacts in azure-pipelines.release.yml | fabric-website-whatever | Again easiest if these stay the same across branches. Inclined to leave as-is to reduce work updating the website release pipeline (and slightly reduce churn in old branches). | | Shared setup package | public-docsite-setup | Follows website naming convention from master. Will be used in other branches but that's probably fine. | | Shared bootstrap file | loadSite.ts/.js | | | Types from shared package | SiteConfig, SiteGlobals | | | Manifest creation script | create-site-manifests | | | Generated manifest files | site-manifests/vN-prod.js | | | Global defined by manifest files | __siteConfig | |

Pull request checklist

• [x] Addresses an existing issue: Part of #14692
• [x] Include a change request file using $ yarn change

Description of changes

Change all version 8-related packages to non-beta versions as the final step of the major release.

Change the repo default beachball config back to:

  disallowedChangeTypes: ['major', 'prerelease'],
  tag: 'latest',

As a result of this change, most pre-release package beachball configs must be updated to maintain current versions. (Some of the current versions violate the 9.0.0-alpha convention we discussed last week, but that can be fixed separately.)

Open questions

• react-shared-contexts: currently at 1-beta and used by both v8 (ContextualMenu) and react-button--what to do? (PR currently adds special beachball config to keep as-is)

Deleted package

Due to changes in plans I don't think we need this. We can bring it back later if needed.

• ie11-polyfills

v8-related packages bumped to major < 8

These packages were previously on N-beta where N > 0 and < 8. To go with prior convention I just removed the -beta suffix and kept the major version.

• common-styles: 1
• dom-utilities: 2
• eslint-plugin: 1
• monaco-editor: 1
• react-charting: 5
• react-icons-mdl2: 1
• react-icons-mdl2-branded: 1
• react-icon-provider: 1 (was previously 0.x, agreed to bump to 1)
• react-monaco-editor: 1
• react-window-provider: 2
• theme: 2

Bumped to version 8

• api-docs
• azure-themes
• codemods (changed from 1 b/c seems like this should match suite version)
• date-time-utilities
• example-data
• font-icons-mdl2
• foundation-legacy
• jest-serializer-merge-styles
• merge-styles
• public-docsite
• public-docsite-resources
• react
• react-date-time
• react-docsite-components
• react-examples
• react-experiments
• react-file-type-icons
• react-focus
• react-hooks
• scheme-utilities
• set-version
• style-utilities
• test-utilities
• theme-samples
• utilities
• webpack-utilities

Everything else

I updated other packages' beachball configs to keep their current versioning approach, so the only changes should be standard prerelease or patch bumps due to dep version updates.

Environment Information

• Package version(s): ^5.113.1, ^7.6.3, probably 6.x too.
• Browser and OS versions: Windows

Please provide a reproduction of the bug in a codepen:

1. Not a codepen, but a git repo. Check out RushWithMultipleFabricVersions.
2. Run rush install.
3. Run rush build.

Actual behavior:

The build will fail with an error like:

ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx
./src/index.tsx
[tsl] ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx(8,5)
      TS2605: JSX element type 'PrimaryButton' is not a constructor function for JSX elements.
  Type 'PrimaryButton' is missing the following properties from type 'ElementClass': setState, forceUpdate, props, state, and 2 more.

ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx
./src/index.tsx
[tsl] ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx(8,5)
      TS2607: JSX element class does not support attributes because it does not have a 'props' property.

Expected behavior:

The build should succeed. If you open /rush.json and comment out one of the projects, either test-15 or test-16 then the build will succeed on the uncommented project.

Priorities and help requested:

I originally opened Issue 1351 on the Rush team, but @octogonz said it was an issue with phantom dependencies.

Are you willing to submit a PR to fix? No.

Requested priority: Normal

Products/sites affected: Internal development is slower since we can't use rush for projects with multiple UI fabric versions.

I would like a web implementation of a time picker.

I believe that this would be an expansion of the current web DatePicker as the iOS and Android controls are DateTimePickers. https://developer.microsoft.com/en-us/fabric#/controls/web/datepicker

No, I have not discussed this with the team.

Additional context/screenshots https://developer.microsoft.com/en-us/fabric#/controls/ios/date-time-picker https://developer.microsoft.com/en-us/fabric#/controls/android/date-time-picker

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 12.40 GB / 31.83 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

None

Reproduction

Render any DetailsList with a group and select all items in that group.

Bug Description

Actual Behavior

Checkbox for group is not shown after clicking on it and selecting all items from that group. It is only available on hover. Codepen example: https://codepen.io/mizeljko/pen/oNMYOdo

Expected Behavior

Checkbox for group is always shown after clicking on it and selecting all items from that group.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

Previous Behavior

Checkbox always renders its checkmark icon, even when unchecked. It uses a universal selector in css (> *) to target the checkmark and set its opacity to 0 when unchecked.

New Behavior

Don't render the checkmark at all when unchecked, and remove the universal selector rule in CSS.

Previous Behavior

The styles for Checkbox and Radio use complex state and sibling selectors, which can be tricky to override correctly. See https://github.com/microsoft/fluentui/issues/25483 for more details.

New Behavior

Simplify the selectors used for applying colors to the checkbox. The colors are now applied via styles on the root slot, with selectors for :hover and :active. The label's color is applied by inheriting the root's color. The indicator's color is applied by a > .${checkboxClassNames.indicator} selector on the root.

This makes it simpler to override styles for Checkbox.

Related Issue(s)

• https://github.com/microsoft/fluentui/issues/25483

Previous Behavior

No aria-owns, so when the listbox popup is appended at the end of the DOM, it was not really reachable with virtual cursor/scan mode/swipe navigation

New Behavior

aria-owns is added to the root node pointing at the listbox when the listbox is not inline (it's not needed with an inline popup, since then the listbox DOM is already adjacent to the trigger).

This works for every browser but Safari.

Related Issue(s)

Part of work in #26069

#24154 added a polyfill for focus visible and focus within, but on several components the ref returned by the hooks was added to the defaultProps, therefor any ref passed in by the user would override the ref and break focus rectangles.

This is being fixed in Slider by https://github.com/microsoft/fluentui/pull/26243

but we'll need to go through the rest of the controls where these hooks were added and make sure they merge with user props properly.

https://github.com/microsoft/fluentui/issues/26245#tasklist-block-2c5e08b7-eedc-4bdc-b81d-36509958b306