Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Update useId to work correctly in React 18 and React 18 strictmode #26465

Merged
merged 8 commits into from Jan 24, 2023

Conversation

sopranopillow
Copy link
Contributor

@sopranopillow sopranopillow commented Jan 23, 2023

Previous Behavior

We generate our own ids and use a context to keep track of server vs client id generation.

New Behavior

We still have the previous behavior, but we now check if React.useId is available (React 18+) and use it when available. This will help fix issues with React 18+ when using SSR and/or strictmode. This is due to React.useId being aware of strictmode and SSR.

Note: React's useId hook uses : for its generated id, this is a problem for us since we use ids as class names when loading up our theme css vars. To fix this issue, we have to add a backslash to the className when inserting it into the style tag turning : to \:.

Related Issue(s)

@size-auditor
Copy link

size-auditor bot commented Jan 23, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 2fe537e268140f5b18bf0f53ef23d93f6f1ad940 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 23, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-alert
Alert
85.912 kB
21.686 kB
85.94 kB
21.7 kB
28 B
14 B
react-avatar
Avatar
52.812 kB
14.689 kB
52.84 kB
14.703 kB
28 B
14 B
react-avatar
AvatarGroupItem
69.03 kB
18.984 kB
69.058 kB
19 kB
28 B
16 B
react-button
SplitButton
45.488 kB
11.501 kB
45.516 kB
11.518 kB
28 B
17 B
react-card
Card - All
77.975 kB
22.496 kB
78.003 kB
22.511 kB
28 B
15 B
react-card
CardHeader
10.805 kB
4.443 kB
10.833 kB
4.461 kB
28 B
18 B
react-checkbox
Checkbox
32.658 kB
10.169 kB
32.686 kB
10.186 kB
28 B
17 B
react-checkbox
CheckboxField
39.456 kB
11.993 kB
39.484 kB
12.011 kB
28 B
18 B
react-combobox
Combobox (including child components)
80.722 kB
25.872 kB
80.75 kB
25.884 kB
28 B
12 B
react-combobox
ComboboxField
78.608 kB
26.021 kB
78.636 kB
26.035 kB
28 B
14 B
react-combobox
Dropdown (including child components)
79.508 kB
25.659 kB
79.536 kB
25.673 kB
28 B
14 B
react-components
react-components: Button, FluentProvider & webLightTheme
59.888 kB
16.652 kB
59.936 kB
16.683 kB
48 B
31 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
187.586 kB
52.65 kB
187.634 kB
52.676 kB
48 B
26 B
react-components
react-components: FluentProvider & webLightTheme
34.379 kB
11.322 kB
34.427 kB
11.354 kB
48 B
32 B
react-dialog
Dialog (including children components)
83.464 kB
24.916 kB
83.492 kB
24.931 kB
28 B
15 B
react-divider
Divider
16.938 kB
6.103 kB
16.966 kB
6.119 kB
28 B
16 B
react-infobutton
InfoButton
118.469 kB
36.003 kB
118.497 kB
36.016 kB
28 B
13 B
react-input
InputField
34.606 kB
10.91 kB
34.634 kB
10.925 kB
28 B
15 B
react-menu
Menu (including children components)
118.035 kB
36.483 kB
118.063 kB
36.496 kB
28 B
13 B
react-menu
Menu (including selectable components)
121.104 kB
36.991 kB
121.132 kB
37.004 kB
28 B
13 B
react-overflow
hooks only
11.033 kB
4.198 kB
11.061 kB
4.21 kB
28 B
12 B
react-persona
Persona
58.849 kB
16.348 kB
58.877 kB
16.363 kB
28 B
15 B
react-popover
Popover
105.587 kB
32.519 kB
105.615 kB
32.531 kB
28 B
12 B
react-progress
ProgressField
23.595 kB
8.242 kB
23.623 kB
8.255 kB
28 B
13 B
react-provider
FluentProvider
16.446 kB
6.127 kB
16.494 kB
6.158 kB
48 B
31 B
react-radio
Radio
32.247 kB
10.468 kB
32.275 kB
10.483 kB
28 B
15 B
react-radio
RadioGroup
14.718 kB
5.886 kB
14.746 kB
5.902 kB
28 B
16 B
react-radio
RadioGroupField
24.731 kB
8.947 kB
24.759 kB
8.962 kB
28 B
15 B
react-select
SelectField
32.933 kB
10.601 kB
32.961 kB
10.616 kB
28 B
15 B
react-slider
Slider
32.663 kB
10.403 kB
32.691 kB
10.42 kB
28 B
17 B
react-slider
SliderField
42.398 kB
13.259 kB
42.426 kB
13.274 kB
28 B
15 B
react-spinbutton
SpinButtonField
53.982 kB
15.414 kB
54.01 kB
15.427 kB
28 B
13 B
react-spinner
Spinner
20.445 kB
6.621 kB
20.473 kB
6.636 kB
28 B
15 B
react-switch
Switch
27.791 kB
8.605 kB
27.819 kB
8.622 kB
28 B
17 B
react-switch
SwitchField
34.482 kB
10.425 kB
34.51 kB
10.441 kB
28 B
16 B
react-table
DataGrid
129.317 kB
35.207 kB
129.345 kB
35.221 kB
28 B
14 B
react-table
Table as DataGrid
127.563 kB
32.864 kB
127.592 kB
32.876 kB
29 B
12 B
react-table
Table (Selection only)
81 kB
20.124 kB
81.028 kB
20.138 kB
28 B
14 B
react-table
Table (Sort only)
80.429 kB
19.97 kB
80.457 kB
19.984 kB
28 B
14 B
react-textarea
TextareaField
36.089 kB
11.313 kB
36.117 kB
11.328 kB
28 B
15 B
react-tooltip
Tooltip
43.537 kB
15.226 kB
43.565 kB
15.238 kB
28 B
12 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
react-accordion
Accordion (including children components)
80.097 kB
24.712 kB
react-avatar
AvatarGroup
15.42 kB
6.167 kB
react-badge
Badge
23.78 kB
7.542 kB
react-badge
CounterBadge
24.67 kB
7.825 kB
react-badge
PresenceBadge
25.728 kB
7.439 kB
react-button
Button
33.354 kB
8.779 kB
react-button
CompoundButton
40.384 kB
10.127 kB
react-button
MenuButton
38.043 kB
10.096 kB
react-button
ToggleButton
49.345 kB
10.805 kB
react-card
Card
72.92 kB
21.108 kB
react-card
CardFooter
9.04 kB
3.807 kB
react-card
CardPreview
9.847 kB
4.159 kB
react-image
Image
11.259 kB
4.473 kB
react-input
Input
24.673 kB
8.065 kB
react-label
Label
9.817 kB
4.067 kB
react-link
Link
12.285 kB
5.063 kB
react-portal
Portal
11.13 kB
4.103 kB
react-portal-compat
PortalCompatProvider
6.069 kB
2.053 kB
react-positioning
usePositioning
20.856 kB
7.766 kB
react-progress
ProgressBar
13.573 kB
5.232 kB
react-select
Select
23.963 kB
8.206 kB
react-spinbutton
SpinButton
44.989 kB
12.975 kB
react-table
Table (Primitives only)
42.971 kB
11.781 kB
react-text
Text - Default
12.261 kB
4.819 kB
react-text
Text - Wrappers
15.571 kB
5.23 kB
react-textarea
Textarea
26.156 kB
8.508 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 2fe537e268140f5b18bf0f53ef23d93f6f1ad940

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 23, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
Persona mount 2809 2754 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1270 1293 5000
Button mount 913 932 5000
FluentProvider mount 1537 1514 5000
FluentProviderWithTheme mount 579 582 10
FluentProviderWithTheme virtual-rerender 542 549 10
FluentProviderWithTheme virtual-rerender-with-unmount 571 580 10
InfoButton mount 513 522 5000
MakeStyles mount 1962 1927 50000
Persona mount 2809 2754 5000 Possible regression
SpinButton mount 2304 2366 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 23, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a7e92b9:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 23, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@sopranopillow sopranopillow marked this pull request as ready for review January 24, 2023 00:18
@sopranopillow sopranopillow requested a review from a team as a code owner January 24, 2023 00:18
@sopranopillow sopranopillow merged commit 4f3871d into microsoft:master Jan 24, 2023
@sopranopillow sopranopillow deleted the ssr/provider-fix branch January 24, 2023 18:28
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
…mode (microsoft#26465)

* updated useId to check if React has useId Available an use it

* change file

* moving replace to be specific to style tag and return providedId when provided and React.useId is available

* update ?? to ||

* change file

* minor change

* add requested changes

* adding comment
Hotell added a commit that referenced this pull request Feb 10, 2023
* applying package updates

* fix: Select disabled state hover style, Combobox disabled state open on chevron click (#26068)

* perf: Don't render Checkbox icon when unchecked (#26248)

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

* revert: MenuItem root slot only supports div (#26261)

* fix: Revert MenuItem root slot to support only div

Follow up of #26257

* changefile

* applying package updates

* Fix: Allow root slot refs to merge with focus refs in Slider (#26243)

* fix: allow refs passed in root slot to merge with focus refs

* change file

* cleanup

* chore: Update Switch to use griffel reset styles (#26007)

Update the styles to apply base styles with Griffe's makeResetStyles function, which combines all of the base styles into a single class.

* Update styling for contentBefore and contentAfter input slots (#26115)

* Update styling for contentBefore and contentAfter input slots

* change files

* Update styling

* Azure Theme: reduced spin button height to match TextField / DropDowns at 24px height (#26265)

* Reduced split button height to match textfields / dropdowns at 24px height.

* Typo fix

* Create @fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json

* fix: web component menu layering bug (#26260)

* fix: layering z-index issue for sub menus

* chnage file

* applying package updates

* docs: Add documentation for react-overflow (#26183)

* docs: Add documentation for react-overflow

* add more docs

* changefile

* Update packages/react-components/react-overflow/stories/Overflow/index.stories.tsx

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* Update packages/react-components/react-overflow/stories/Overflow/OverflowDescription.md

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* Update packages/react-components/react-overflow/stories/Overflow/Wrapped.stories.tsx

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* add docs for pinned

* remove gap from minimum visible

* remove redundant overflowDirection prop

* fix wrapped example styling

* use aria-pressed for selected items

* improve resizable area styling

* add non-trivial solution for priority divider overflow

* increase padding for divider examples, document utilities

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* fix: Tab should focus the window if trigger is the last focusable element (#26163)

* fix: Tab should focus thewindow if trigger is the last focusable element

Removes the explicit tab handling in the Menu.

We know that React effects are sync so we always focus the menu trigger
when the menu is closed. Since the browser only performs the default behaviour for Tab once
events have fully bubbled up the window, the browser will move
focus to the next tabbable element before/after the trigger if needed.
If tab was not pressed, then we simply focus the trigger as expected.

* changefile

* Update change/@fluentui-react-menu-9787aa9c-cdf8-41b8-a9d6-c8d7e1f3c502.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/react-components/react-menu/src/components/Menu/useMenu.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* chore: bump storybook to 6.5.15 (#26259)

* chore: manually dedupe prismjs

* bump storybook to 6.5.15

* bump other packages

* lock

* update html as well

* another lock

* lock

* dedup

* locked deduped for sure

* only dedup storybook

* change file

* chore: update yarn.lock again after deduping storybook

* Update Menu.cy.tsx

Co-authored-by: Tristan Watanabe <tristan.watanabe@gmail.com>

* ci: bump actions/checkout to v3 to fix node12 deprecation (#26281)

* chore: migrate whole repo to new `@fluentui/scripts-*` family of packages (#26182)

* chore(scripts/generators): update create-* generators to contain new granular script packages

* chore: migrate scripts/ sub-folders to packages

* chore: migrate apps/ to use new scripts-* packages

* chore: migrate packages/ to use new scripts-* packages

* chore(.github): update codeowners

* generate change-files

* chore: make danger work with packaged api

* Fix suggestions no results infinite loop (#26267)

* Set correct defaultRender

* yarn change

* docs: add migration guide for cards from V0 to V9 (#26186)

* fix: button semantics for Combobox chevron, and pointer styles (#26075)

* fix: button semantics for Combobox chevron, and pointer styles

* Change file

* add chevron accName and tests

* add top-level aria-label* props to be overridden by chevron

* update change file to resolve gh discussion

* update order of icon aria-label* priorities

* chore(react-datepicker): Scaffold package (#26286)

* creating react-datepicker package

* adding api file

* update to new scripts-* setup

* updating api extractor config

* chore: Re-exporting missing exports from @fluentui/react-combobox. (#26294)

* fix: react-field does not wrap SVG in inline parent (#26150)

* update to use root-level grid layout for validation icon to avoid extra wrapping node
* use named grid template areas for readability

* fix: add aria-owns to react-combobox non-inline popups (#26246)

* applying package updates

* docs: Improve a11y for Table/DataGrid examples (#26218)

Fixes #26210
Fixes #26208
Fixes #26197
Fixes #26209

* fix(TableSelectionCell): Radios should not change selection on focus (#26283)

* fix(TableSelectionCell): Radios should not change selection on focus

While native radios change selection on focus, it can be a bad
experience for keyboard users on larger widgets. If an author wants to
perform an action on row select, it won't force a keyboard user to
perform that action for every row between the one that they're on and
the one that they want.

Fixes #26196

* update tests

* changefile

* feat: Implement DataGridBody powered by react-window (#26081)

* feat: Implement DataGridBody powered by react-window

Uses hooks to recompose `DataGridBody` that uses react-window
internally. This component should be a straight replacement for the
standard `DataGridBody` that supports virtualization.

* remove useless import

* update datagrid

* refactor: render function children called in component render function

Components like `DataGridBody` and `DataGridRow` only accept render
functions as children. These render functions were always called during
the `useComponent` hook. This was unnecessary, and makes recomposition
harder because data is always processed even if the recomposed component
should render children differently.

* changefile

* updates

* remove useless story

* changefile

* update md

* changefile

* useScrollbarWidth

* update changefile entry

* remove unnecessary dependencies

* remove TODO

* expose width as prop

* fix comment typo

* fix datagrid virtualization story import

* use unknown in

* change  to

* add incrementing index to virtualization examples

* update api md

* chore: remove all package.json from v-build ownership to speed-up PR review velocity (#26285)

* Organize storybook TOC for react-theme (#26185)

* Separated different theme areas in storybook

* yarn change

* Update change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json

* chore: Simplify Checkbox style selectors using component checked/disabled state (#26247)

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.

* fix(react-infobutton): Change role of PopoverSurface to note and fix API to not require cast (#26300)

* update types to make the API more friendly for popover

* change files

* api file

* updating types to keep slots

* updating query by dialog to note

* chore: Add bundle size fixtures for react-table (#26310)

* chore: Add bundle size fixtures for react-table

* changefile

* chore(react-tree): removes BaseTreeItem premature generalization (#26302)

* fix: toolbar a11y checklist (#26275)

* fix: add missing aria label for toolbar stories

* fix: add missing role for toolbar radio

* fix: add missing aria orientation for vertical toolbar

* feat: create radio group

* chore: add aria pressed and checked

* chore: update stories aria label

* chore: fix class name var

* chore: add changes

* chore: update api

* chore: update snapshot

* chore: update unstable api

* chore: remove aria-pressed

* chore: remove aria pressed

* chore: update changes

* chore: reuse toolbar group

* chore: remove inexistent exports

* chore: update apis

* chore: add changes

* chore: update snapshots

* fix(scripts-generators): use workspace package path on callsite to mitigate plop cwd issue (#26322)

* add perf scenario for InfoButton (#26306)

* test(react-18-tests-v9): mute TS error reporting from packages/ (#26324)

* chore(react-datepicker): Create Calendar components and DatePicker component (#26325)

* add Calendar components and DatePicker component

* fix lint error

* missed one

* chore: rename react-builder index.tsx to index.ts (#26343)

* fix react-builder tsconfig path

* rename react builder index

* Revert "fix react-builder tsconfig path"

This reverts commit c6407ca2fa565ce770287b06a646a7f8bac8d69e.

* chore: fix typo in Dialog docs (#26342)

* chore: fix typo in Dialog docs

* change file

* chore: prepare release react-northstar 0.66.0 (#26217)

* chore: prepare release react-northstar 0.66.0

* @fluentui/react-northstar_v0.66.0

* chore: fix dependencies after react-northstar release

* chore: rename react-builder index.tsx to index.ts (#26343)

* fix react-builder tsconfig path

* rename react builder index

* Revert "fix react-builder tsconfig path"

This reverts commit c6407ca2fa565ce770287b06a646a7f8bac8d69e.

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>

* Update fluent 2 theme to reconcile with v9 (#26331)

* Update fluent 2 theme to reconcile with v9

* yarn change

* Update VR screenshot diff commenting flow (#26340)

* chore: Re-exporting makeResetStyles in @fluentui/react-components (#26353)

* chore: Re-exporting makeResetStyles in @fluentui/react-components.

* Adding change file.

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

* chore(react-infobutton): Add vr tests for InfoButton (#26305)

* adding vr-tests for infobutton

* updating tests to storywright

* fix border for Teams HCM

* update change files?

* updating styles to remove custom focus indicator

* applying package updates

* applying package updates

* BREAKING: rename types to be more consistent (#26304)

* BREAKING: rename types to be more consistent

* changefile

* update md

* refactor(scripts): move executors from monorepo to proper domain (#26345)

* refactor(scripts-tasks): make api-extractor one closure to avoid scope leaks (#26346)

* refactor(scripts-tasks): make api-extractor one closure to avoid scope leaks

* chore(scripts-tasks): remove unnecessary check for ts task

* chore: remove @fluentui/scripts-dependency-graph-generator (#26365)

* chore: remove unused dependency on enhanced-resolve (#26364)

* feat(PresenceBadge) Add `blocked` status (#26366)

* feat(PresenceBadge): Add blocked status

* changelog

* update api

* Update packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* BREAKING(DataGrid): render functions need to by typed (#26371)

* BREAKING(DataGrid): render functions need to by typed

* changefile

* fix dependencies

* update story

* fix(TableCellActions): Background should match rown on hover and active (#26373)

* fix(TableCellActions): Background should match rown on hover and active

* changefile

* remove unnecessary styles, inherit background color

* applying package updates

* feat(scripts-tasks): use path aliases for api-extractor only on local env (#26370)

* feat(scripts-tasks): use path aliases for api-extractor only on local env

* docs: Hoist columns above react code (#26374)

The intention of memoized columns was to make the code visible in `show
code` button of the docsite. However this can encourage bad practices
like memoizing when not necessary.

Fixes #26297

* docs: Add row memoization example (#26379)

Adds an example where selectable table rows are memoized. When a row's
selection changes, only that affected row is re-rendered.

* Release @fluentui/react-table as RC (#26381)

* Release @fluentui/react-table as RC

* changefile

* Fix/message bar remove background in hc (#26221)

* fix: added border with correct contrast ratio in HC in MessageBar

* Release `@fluentui/react-toolbar` as stable (#26384)

* Release `@fluentui/react-toolbar` as stable

see title

* changefiles

* Update packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* chore: Add bug bash to convergence checklist (#26367)

* applying package updates

* Release `@fluentui/priority-overflow` and `@fluentui/overflow` as stable (#26380)

* Release `@fluentui/priority-overflow` and `@fluentui/overflow` as stable

* changefile

* update docs

* update react-components

* changefile

* update stories imports

* update stories

* update stories

* Update packages/react-components/react-overflow/stories/Overflow/index.stories.tsx

* docs(Toolbar): Minor improvements (#26382)

* docs: Minor improvements

- Be more explicity about sizing
- Make popover examples a bit cleaner (removed Example buttons)
- Add link to overflow documentation

* Add subcomponents

* remove from preview section

* fix subtle example

* feat(react-tabster): add id to useModalAttributes options (#26387)

* add id

* chg

* api

* fix(react-northstar)(ChatMessage): action menu positioning in RTL (#26378)

* fix: Styles should be inserted on portal at render time (#26377)

* fix: Styles should be inserted on portal at render time

Fixes #25432 again

`useInsertionEffect`still runs after DOM has been mounted, which results
in the same issue where transitions are triggered due to css variables
changing.

* changefile

* remove useInsertionEffect

* different code paths for React versions

* make version check better

* add test for bug

* remove ts-expects-error

* improve vr tests

* cleanup useInsertionEffect

* fix steps

* fix vr test

* applying package updates

* Generic Virtualizer (#25451)

* Squish and rebase

* Add accessibility metrics to demos

* useCallbacks for refs and update state update methods

* feat: create migration shim packages for V0 (#26142)

* chore: create package

* chore: add api changes

* chore: remove ununsed initializeIcons

* chore: use as dev deps

* chore: fix version mismatch

* chore: use as deps

* chore: remove spec

* chore: add js docs

* chore: update lock

* chore: use V0 Input

* chore: update N* in the shims package

* chore: update package

* Update hex color codes for MS Excel product (#26339)

* chore: Simplify layout for Field (#26352)

Simplify Field's layout:
* For vertical alignment, use a single column grid with row auto flow (the default).
* For horizontal alignment, use a two-column grid with the label taking up the entire first column. All other children of the root will be placed in the second column thanks to the grid's auto-flow behavior.
  * If there is no label, the label's column is replaced with an equal amount of padding. This keeps horizontal fields with and without labels aligned with each other.
* Place the validation message icon as a child of the validation message, since it can no longer have its own grid cell in the root layout.
  * The icon is absolutely positioned in the validationMessage, and the message text is padded in by the width of the icon.
* Use `makeResetStyles` where appropriate to reduce the number of class names on slots.

The primary benefit of this change is that the `control` slot no longer needs to specify its grid area. This will allow a future change to avoid having to wrap the control in a `<div>` to position it properly.

* fix: react components version (#26406)

* update codeowners (#26307)

* chore: fix Panel Confirm Dismiss example to properly restore focus after panel closes (#26301)

* fix(scripts-tasks): unify api-extractor runs on any CI (#26411)

* chore: update browser list db (#26407)

* fix(vr-tests v8): fix flaky VR tests (#26348)

Fixes undefined

* docs: add migration guide for cards from v8 to v9 (#26347)

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Fixes https://github.com/microsoft/fluentui/issues/24020

* New min/max example (#26418)

* feat: provide `launch` and `startServer` functions as single source of truth for creating new browser/server instance within monorepo (#26375)

* feat(scripts-pupeteer): provide launch function as single source of truth for creating new browser instance

* chore: bump puppeteer to v17

* refactor(scripts): make startServer generic and used everywhere

* fix(ProgressBar): rename rectangular shape to square (#26419)

* fix(ProgressBar): rename rectangular shape to square

* change file

* fix: Update Field label padding to match spec (#26413)

Update padding of Field's label to match the visual spec.

* chore(recipes): Create initial implementation for react-recipes (#26332)

* setting up initial implementation

* updating workspace to add package

* adding blank file to register src folder

* adding requested changeS

* updating tsconfig

* updating package.json

* fix: Stretch Field components to full width (#26412)

The component within a field stretches to fill the whole width of the field. The field itself can be resized to the desired width of the component, label, hint, etc.

* chore: remove circular dependency within v0 and scripts/ and move e2e test to proper pipeline (#26410)

* chore(fluentui/e2e): make scripts task naming consistent and rename test to e2e

* refactor(fluent/perf): remove circular deps between scripts-gulp and fluent-perf and scope related tooling to the perf package

* chore(scripts): copy parseDocblock to northstar conformance test to avoid compiling tooling code within current v0 tsc setup

* fix: Field sets role="alert" on its error message so it is announced by screen readers (#26414)

Add role="alert" to the field's validation message when it is an error, so that it is read by screen readers.

* fix: react-combobox examples a11y updates (#26441)

- add a "no results found" fallback item in the filtering example
- update the freeform custom string option in the freeform example
- add better warning language for the multiselect w/ value text example
- set the Persona avatar to aria-hidden to prevent double announcement

* Hotfix/portal memory leak (#26435)

* clean virtual parent reference

* changelog

* reuse setVirtual and remove cleanVirtualParent

* docs: make unsized icons searchable (#26451)

Adds the ability to use the search engine on
the docs page even for the "Unsized" icons.

* docs: fix config for import rewrites for Storybook export (#26454)

* Added README.md for public-docsite-v9 (#26434)

* Added README.md to public-docsite-v9.

* applying package updates

* fix: make ssr-tests-v9 running on Windows (#26458)

* fix: make ssr-tests-v9 running on Windows

* Update test.ts

* fix: disable fluentui debug console messages for the server runtime (#24803)

* fix: disable fluentui debug console messages for the server runtime

* Update createFelaRenderer.tsx

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat: export TextareaOnChangeData type (#26455)

* fix: react-toolbar exports (#26462)

The React hooks useToolbarButtonStyles_unstable and
useToolbarButton_unstable were exported as Typescript types but they
are functions.

Updated to export them as functions, not types.

* SpinButton fix for chevron buttons  (#26464)

* Splitbutton fix for spin button chevrons

* Inline text centered vertically, labels on top remain same height (for Elixir)

* CSS selector clean up

* Create @fluentui-azure-themes-d4442d56-f31c-4e86-b175-7298d7d565de.json

* chore: react-combobox spec and migration docs update (#26396)

* fix: high contrast mode focus styles are applied (#26116)

* fix: react-combobox add listbox max-height and shift shadow style location (#26470)

* Adds Fluent 2 styles for v8 SpinButton (#26277)

* SplitButton styles

* Change file

* applying package updates

* feat(react-tree): create TreeItemLayout component (#26446)

* feat(react-tree): create TreeItemLayout component

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts

* chore: move tokens from contexts folder

* Azure Theme: Spinbutton CSS update (#26467)

* Splitbutton fix for spin button chevrons

* Inline text centered vertically, labels on top remain same height (for Elixir)

* CSS selector clean up

* Create @fluentui-azure-themes-d4442d56-f31c-4e86-b175-7298d7d565de.json

* Second spin button fix: Elixir

* Fixing class selector from previous PR

* Create @fluentui-azure-themes-4447b77a-6462-4e32-a60e-e4bcefb1be23.json

* fix: react-combobox story fixes and docs wording updates (#26471)

* fix: react-combobox activedescendant calculation updates (#26444)

- recalculate the active option when the children change while open
- clear activedescendant if using left or right arrows to move text cursor

* fix: Update `useId` to work correctly in React 18 and React 18 strictmode (#26465)

* updated useId to check if React has useId Available an use it

* change file

* moving replace to be specific to style tag and return providedId when provided and React.useId is available

* update ?? to ||

* change file

* minor change

* add requested changes

* adding comment

* chore(react-datepicker): Copy over files to package from personal branch (#26472)

* copy over files from local branch

* copy over stories and src

* updating deps

* adding missing dep

* adding missing dep

* fix typecheck errors

* chore: update v8 ComboBox & Dropdown docs to explicitly prohibit nested interactive content (#26466)

* feat(react-button): creates ButtonContext (#26478)

* feat(react-button): creates ButtonContext

* chore: add comments to the API

* Update packages/react-components/react-button/src/components/Button/useButton.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Add relative position to base picker (#26490)

* Add relative position to base picker

* changefile

* snaps

* Add labels to arcs in donut chart (#25967)

* add labels to arcs in donut chart

* add change file

* update snapshots

* fix overflowing arc labels

* add prop to hide arc values

* add tests

* update example

* minor

* rename functions

* Add new variant to horizontal bar chart (#26082)

* add new variant to horizontal bar chart

* add change file

* add examples

* add comments

* add tests

* rename variant

* add rtl support

* minor

* rename function

* chore: scaffolds  TreeItemPersonaLayout component (#26369)

* feat: create TreeItemPersonaLayout component

* Update packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts

Co-authored-by: ling1726 <lingfangao@hotmail.com>

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* chore: refactors Tree and TreeItem to stop using aria-owns (#26292)

* chore(deps): bump ua-parser-js from 0.7.31 to 0.7.33 (#26484)

Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 0.7.31 to 0.7.33.
- [Release notes](https://github.com/faisalman/ua-parser-js/releases)
- [Changelog](https://github.com/faisalman/ua-parser-js/blob/master/changelog.md)
- [Commits](https://github.com/faisalman/ua-parser-js/compare/0.7.31...0.7.33)

---
updated-dependencies:
- dependency-name: ua-parser-js
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add property that manages if panels should be rerendered or not (#25368)

* Add property that manages if panels should be rerendered or not

* rename variable

* Update changelog

* Update CHANGELOG.md

Co-authored-by: Volodymyr Hensorskyi <vhensorskyi@atlassian.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* fix: update elementContains() to handle circular references (#26483)

* fix: update elementContains() to handle circular references

* update options, add test

* Add overrides context to allow Input appearance overrides (#25262)

* proto: add overrides context to allow per-component overrides

* fix dependencies

* overides merging

* API files

* change files

* update change files

* fix monorepo dependencies

* api files

* address PR comments

* fix typings

* revert appearance story, add vr test

* add override to Select, SpinButton and TextArea

* change files

* fix test

* rename overrides -> overrides_unstable

* address PR comments, fix test

* feat(web-components): bump tslib to 2.1. to align with rest of monorepo packages (#26457)

* feat(web-components): bump tslib to 2.1. to align with rest of monorepo packages

* chore: remove web-components from deps sync ignore list and fix repo violations

* generate change file

* chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize (#26492)

* chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize

* chore: updates AvatarGroup components to use AvatarSize

* chore(react-tree): updates AvatarSizes for AvatarSize

* react-migration-v8-v9 moved to v9 convergence package (retry PR) (#26503)

* Deleted v8 migration package

* Added new migration package

* Add back migration shims and stories

* yarn change

* syncpack fix

* syncpack fix

* feat: Add Field component to replace InputField, ComboboxField, etc. (#26430)

* Add a new `Field` component that can render any control as its child.
  * Applies props to the child using `cloneElement`, to hook it up to the labels and validation state.
  * Update `useField_unstable` to be used by the new Field. Existing users of this function will need to update their code.
  * Add conformance and bundle-size tests for Field.
* Deprecate the `*Field` components, and replace them with shims that are implemented with the new `Field` component. 
  * These will be removed in a future v9 release, as they were never released as stable.
  * `CheckboxField`, `ComboboxField`, `InputField`, `ProgressField`, `RadioGroupField`, `SelectField`, `SliderField`, `SpinButtonField`, `SwitchField`, `TextareaField`

* RFC: Field with custom components (#26338)

Implemented by #26430

* fix: update react-combobox multiselect checkbox styles to match Checkbox (#26509)

* applying package updates

* fix(Link): Handle "tabIndex" from user's input (#26456)

* fix: handle "tabIndex" from user's input

* Update packages/react-components/react-link/src/components/Link/useLinkState.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* fix(react): No pointer events on focus ring (#25088)

* fix(react): No pointer events on focus ring

* change file

* make pointerEvents configurable in getFocusStyle()

* update change files

* Update packages/style-utilities/src/interfaces/IGetFocusStyles.ts

Co-authored-by: David Zearing <dzearing@microsoft.com>

Co-authored-by: David Zearing <dzearing@microsoft.com>

* feat: add IdPrefixProvider (#26496)

* feat: add IdPrefixProvider

* Update packages/react-components/react-utilities/src/hooks/useId.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* applying package updates

* feat(react-tree): uses ButtonContext to modify default button size (#26495)

* feat(react-tree): starts using ButtonContext to modify default button size

* Update packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* feat: add combobox and dropdown vr tests (#26487)

* fix(react-persona): Reduce spacing between first and second line (#26520)

* updating spacing between second and first line

* change file

* applying package updates

* chore: properly use tokens for border radius (#26516)

* chore(scripts-puppeteer): migrate to puppeteer 19 (#26475)

* chore(scripts-puppeteer): migrate to puppeteer 19

* fix(scripts-storybook): implement proper TS module and path aliases resolution to enable build-less DX (#26489)

* fix(scripts-storybook): attempt to fix workspace addon loader

* fix(scripts-storybook): implement proper ts registration and path aliases resolution in dev mode

* feat(scripts-storybook): redo the solution to reuse storybook webpack module resolution and TS compilation

* docs(scripts-storybook): update docs

* Fix duplicate-id accessibility issue in line chart (#26486)

* fix duplicate-id accessibility issue in line chart

* add change file

* chore(react-builder): migrate to axe-core v4 (#26453)

* chore(react-builder): migrate to axe-core v4

* fix(scripts-jest): remove duplicate __mock__ violations in v00 when running test with build snaps present

* chore: Change the default value of validationState to error when a validationMessage is set (#26523)

Change Field's `validationState` to default to `error` when there is a `validationMessage`. This makes the default more useful, and makes the common case of showing an error message simpler.

* chore(react-badge): updates border-radius to use proper token value (#26531)

* filetype updates for loop, clipchamp [master branch] (#26276)

* Update CDN information for filetype icons, new icons for loop and clipchamp

* Change files

* fix package name typo in readme file

* fix: remove invalid and unnecessary DetailsRow check (#26519)

* fix: Fixing button padding to get correct sizes from design spec (#26522)

* fix: Fixing button padding + minHeight to get correct sizes from design spec.

* Adding change file.

* Cleanup.

* Changing approach to not use minHeight.

* Updating spacing constants to only use values directly instead of having some referencing tokens.

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

---------

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

* applying package updates

* chore: Bump storybook-addon-export-to-codesandbox to 0.8.1 (#26513)

* feat: re-export useFocusWithin() hook (#26533)

* fix: SSRProvider TypeScript definitions (#25582)

* fix: SSRProvider TypeScript definitions

* children prop now needs to be listed explicitly when defining props in React 18
* [How to Upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions)

* Create @fluentui-react-utilities-9259798e-d6da-420f-8da3-3bf377f4825b.json

* update API file

---------

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* fix(scripts-generators): run generate-version-files logic on node execution (#26532)

* Jackieg/azuretheme cal (#26544)

* azure theme calendar style fix

* Context menu border fix

* updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing

* Updated "today' selector to match figma

* Removing border from focused pivot

* Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json

* removing TS errors

* Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir

* Removing empty line

* fix(react-persona): Make before and after textPositions align correctly when the Avatar's size is larger than the text lines together (#26546)

* adding vr-tests and fixing centering of the text

* change files

* fix vr-tests

* fixing vr-tests

* feat: Release react-combobox as stable (#26518)

* Export react tabs context (#26552)

* Exported context for react-tabs

* API updated, yarn change

* Apply suggestions from code review

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Remove wrong context export

* updated API

* components API update

---------

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* applying package updates

* feat: expose Typography tokens as components and create documentation for it (#26403)

* refactor: move all presets to a dedicated folder

* feat: expose all typography tokens as presets

* types: expose TextPresetProps

* docs: link typography page to react-text docs

* docs: code block not having monospace font in all elements

* docs: recreate Typography documentation with better examples

* test: add missing VR tests for text presets

* docs: force code block to have correct font-size and font-family

* test: use inline snapshots

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* docs: add description to code blocks

* docs: move text block to the top for better discoverability

---------

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* feat: Release `@fluentui/react-select` as stable (#26491)

* chore: Update Field VR tests to use new Field component (#26537)

Rewrite Field VR tests to use new standalone `Field` component.

* chore(react-infobutton): Add aria-label to InfoButton's button and add a11y guidance for using InfoButton with a label (#26557)

* updating aria-label for infobutton and adding guidance on how to use infobutton with a label

* change file

* applying package updates

* Adding fluent2-theme dependency (#26571)

* fix: v8 SplitButton should not reset focus to trigger after opening menu (#26572)

* fix: v8 Dropdown option focus should not be cut off in HCM (#26573)

* applying package updates

* [DatePicker] fix default date parser converting dates to UTC implicitly (#25962)

* [DatePicker] fix default date parser converting to UTC instead to local timezone

* add change file + better link

---------

Co-authored-by: Karlo Sudec <karlo.sudec@gmail.com>

* docs: use full source in "Show code" (#26562)

* docs: use full source in "Show code"

* Apply suggestions from code review

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* update the addon

---------

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* docs: Remove extra exports (#26567)

* docs: Remove extra exports

Doc examples should only have one export.

* revert

* feat: generate new component structure for react-drawer (#26554)

* chore(react-tree): adds TreeItemLayout to all stories (#26550)

* ci: bump gha to latest and use major for add-to-milestone to get latest fixes (#26581)

* Fix dependency mismatch (#26586)

* ci: use specific version of add-to-milestone as using v1 throws error (#26588)

* chore(public-docsite-v9): enable build-less DX for storybook (#26476)

* feat(scripts-storybook): implement createPathAliasesConfig util for creating tsconfig with whole repo path aliases

* chore(.storybook): replace babel-loader with swc in root storybook config

* feat(scripts-storybook): add registerRules helper and replace tsConfigPlugins within registerTsPaths if one already exists

* chore(scripts-storybook): move logic from monorepo root /.storybook to package boundary

* chore(public-docsite-v9): enable build-less DX for storybook with swc

* Generated empty Breadcrumb component v9 (#26529)

* Generated Breadcrumb package for FluentUI V9.
* Generated Breadcrumbs component in @fluentui/react-breadcrumb package.

* fix(ssr-tests-v9): don't open browser twice on CI to potentially mitigate TIMEOUT issues (#26587)

* fix(public-docsite-v9): add migration packages as dep to properly build those when releasing (#26589)

* remove mwf styles (#26592)

* remove mwf styles

* change file

* Fix: Contextual menu label missing overflow hidden (#26591)

* fix: ContextualMenu label was missing overflow hidden

* change file

* snaps

* applying package updates

* fix(scripts-generators): make create-component work properly on windows and improve DX (#26569)

* fix(tools): make sure export maps always use posix paths

* fix(scripts-generators): remove empty export {} and run lint fix when create-component is invoked

* feat(eslint-plugin): turn off fluentui/max-lenght rule for v9

* generate change file

* applying package updates

* chore(react-infobutton): Making InfoButton's content focusable and update example's text (#26596)

* fix: Remove ReallyClean from CI pipelines (#26637)

Since component governance is forced, we should disable this step since
it will remove all files from the working directory and fail component
governance

* fix: New overflow items all always dispatch updates to subscriber (#26565)

* fix: New overflow items might not dispatch updates

The dispatch process is done by analyzing the tops of the visibile and
invisible queues. The update triggered after adding a new element might
not be dispatched to the subscriber because the queue tops don't
change. This can result in a desync between the visibility and the
subscriber state.

Adds a `forceDispatch` flag which is used when new items are added while
observing so that the next batched update will flush to subscribers even
if queue tops don't change.

Fixes #23555

* changefile

* Add tests

* changefile

* remoive old changefile

* refactor processOverflowItems

* make test cleaner

* fix(createPositionManager): computePosition should not apply styles after destruction (#26593)

* fix(createPositinoManager): computePosition should not apply styles
after destruction

Since `computePosition` is an async function, it can still resolve after
the instance is destroyed.

Updates the destruction mechanism to have a [flag similar to poppver v2](https://github.com/floating-ui/floating-ui/blob/2893e9a8d2ebd895eb4311a8873afac62f75123e/src/createPopper.js#L171). This flag is used both on `forceUpdate` (to avoid memory leaks) and `computePosition` (to avoid applying outdated position).

* changefile

* update changefilke

* rename destroyed to isDestroyed

* Update packages/react-components/react-positioning/src/createPositionManager.ts

* Update packages/react-components/react-positioning/src/createPositionManager.ts

* chore: export SlotRenderFunction type (#26600)

* fix: HoverCard example adjusts to viewport, add docs (#26624)

* scaffold react-skeleton components (#26640)

* fix: Dropdown/Combobox checkboxes have double swipe stops for some screen readers  (#26566)

Add aria-hidden to label text to prevent it from being a duplicate non-interactive swipe stop. Add aria-labelledby to preserve accName for the checkbox.

* fix: Using correct icon and color for away + out-of-office PresenceBadge (#26655)

* fix: Using correct icon and color for away + out-of-office PresenceBadge.

* Adding change file.

---------

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

* fix: react-button high contrast mode primary variant (#26623)

* Updated description for spin button (#26659)

* Updated description for spin button

* yarn change update

* removed disabled property from Label (#26658)

* Sankey revisit ankit (#25455)

* Sankey chart changes for the new design

* Sankey changes for updated design

* Adding change file

* Fixing build failure

* Fixing build failure

* fixing build failure

* fixing build failure

* fixing build failure

* Adding border color and reverting changes for package.json

* Adding changes for opacity changes for links,font size for text,different border for node hover

* Resolving review comments and removing the examples used for testing

* Fixing the gradient issue

* Fixing the id issues

* Fixing the tooltip position issue

* Fixing the tooltip position issue

* Adding comment for tooltip fix

* Fixing the tooltip position issue

* Fixing the tooltip position issue

* Incorporating review comments and improving code efficiency followimg the best pratices

* Adding Unit Test cases for Sankey Chart

* Resolving review comments

* Minor fixes

* Resolving review comments

* applying package updates

* Table - Column resizing (#26477)

* RFC: Styling Handbook for Fluent UI React v9 (#26148)

* RFC: Styles handbook

* Apply suggestions from code review

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>

* add a note about imports

* rename to "Performance caveat"

* add note about shorthands

* Apply suggestions from code review

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* add a link to makeResetStyles section

* update structure

* Apply suggestions from code review

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* update system colors part

* fix stats

* highlight the important phrase

* use makeResetStyles in examples

* add notes about overrides

* add order of mergeClasses to basic

* split selectors cases, add "Use structured styles"

* split and move RTL parts

* Apply suggestions from code review

Co-authored-by: Amber <yuanboxue@outlook.com>

* do not expand shorthands in makeResetStyles calls

* make comment with a problem explicit

* put a missing word

* Apply suggestions from code review

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* add an example for `shorthands` & `@noflip`

* improve base examples

* mention FluentProvider in RTL section

* update TOC

---------

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Amber <yuanboxue@outlook.com>
Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* fix(Dropdown): Allow clear on Enter/Space press (#26685)

* fix(Dropdown): Allow clear on Enter/Space press

* remove aria-hidden, add changelog

* fix

---------

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>

* Added information about `Open in CodeSandbox` button repo (#26536)

* fix(react-card): improve description for card props (#26614)

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* docs(Card): improve a11y of storybook examples (#26613)

Fixes https://github.com/microsoft/fluentui/issues/26583

* Azure Theme: toggle & commandbar style updates (#26654)

* azure theme calendar style fix

* Context menu border fix

* updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing

* Updated "today' selector to match figma

* Removing border from focused pivot

* Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json

* removing TS errors

* Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir

* Removing empty line

* Another spinbutton update to match Elixir usage

* spin button was off by a few pixels in elixir

* removed border from disabled action button per designs, reduced size of toggle per designs

* 5.5 px border

* [DatePicker] fix validationOnLoad prop is ignored (#25961)

* fix: add validateOnLoad to useErrorMessage hook

* add change file

* [DatePicker] add test for validateOnLoad false

* fix: missing variable in useEffect dependency list

* fix lint error

Co-authored-by: Karlo Sudec <karlo.sudec@gmail.com>

* feat: Bump keyborg to 2.0.0 and tabster to 4.1.1 (#26584)

* chore: Bump keyborg to 2.0.0 and tabster to 4.0.1

See title

* changefile

* update breaking change

* deal with breaking change

* bump to tabster 4.1.0

* bump 4.1.1

* revert changes to lock

* feat: react-data-grid-react-window should be complete extension package (#26627)

* feat: react-data-grid-react-window should be complete extension package

Implements `aria-rowcount` and `aria-rowindex` support for the
virtualized DataGrid.

This PR also turns the package into a 'complete' extension package so
that all DataGrid components are re-exported from it whether it is
recomposed or not. This package should never be exported from
react-components suite.

* export useDataGridContextValues_unstable

* changefile

* remove duplicate export

* remove DataGridBody tests, not a core component here

* Update packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts

* make hack nicer

* update m

* Update packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* update md

---------

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* fix: react-combobox never uses Option value as a display string (#26617)

Instead, `defaultValue` or `value` are required when setting `defaultSelectedOptions` or `selectedOptions` respectively.

* applying package updates

* feat: Initial release react-data-grid-react-window (#26731)

* feat: Initial release react-data-grid-react-window

Releases the package with `beta` tag since all functional requirements
are implemented.

* changefile

* feat(react-tabster): add `unstable_hasDefault` option on `useArrowNavigationGroup` (#26732)

* hasDefault

* unstable

* test

* Revert "test"

This reverts commit a2a1aee5f2d0cea83a5f770d96b272523afe1221.

* update

* add slash in comment

* applying package updates

* feat: TableCellLayout component now supports truncate prop (#26738)

* feat: Release `Table` and `DataGrid` as stable (#26736)

* feat: Release `Table` and `DataGrid` as stable

See title

* changefile

* merge imports

* fix

* chore(react-datepicker): Remove @fluentui/react dependencies and update Field usage (#26726)

* removing @fluentui/react

* removing mdl2 icons initialization

* adding requested changes

* updating api

* feat: DataGrid - resizable columns (#26690)

* fix(storybook): turn off mangling on production builds to provide same output as with Terser (#26757)

* fix(storybook): turn off mangling on production builds to provide same output as with Terser

* chore: bump storybook-addon-export-to-codesandbox to fix swc story exports patterns

* chore: prepare release react-northstar 0.66.1 (#26687)

* chore: prepare release react-northstar 0.66.1

---------

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>

* fix: keyboard navigation not working for select elements (#26612)

* fix: Small mistake in docs for Avatar name prop (#26747)

Fix doc comment for Avatar's name prop.

* chore: Update Field Spec and Migration guide to match current implementation (#26549)

Update the Spec and Migration guide to match the changes to make it a standalone component in PR #26430.

* chore: Add perf tests for Field (#26603)

* fix(react-utilities, react-provider): Remove colons from generated id and fix hook order error in React 18 (#26745)

* change files

* adding memo and fixing type of useId

* chore: Update Field documentation and stories (#26599)

Update Field stories and documentation for the changes to make Field a standalone component (in PR #26430), and for clarity.

* chore(deps): bump http-cache-semantics from 4.1.0 to 4.1.1 (#26602)

Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1.
- [Release notes](https://github.com/kornelski/http-cache-semantics/releases)
- [Commits](https://github.com/kornelski/http-cache-semantics/commits)

---
updated-dependencies:
- dependency-name: http-cache-semantics
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix svg-img-alt accessibility issue in vertical stacked bar chart (#26755)

* fix svg-img-alt accessibility issue in vertical stacked bar chart

* add change file

* applying package updates

* Fixing wrong link hover value (#26778)

* Fixing value to show on link hover

* Change file

* Tree Item Layout & Persona Layout stories and styles (#26630)

* stories

* laoyut

* stories update

* remove prettier edited packages

* remove changes by prettier

* handle expand collapse only

* default open tree

* expand collapse

* fix layout

* Update LineChart.base.tsx

* Update getFocusStyle.ts

* Update TreeExpandCollapseIconOnly.stories.tsx

---------

Co-authored-by: Petr Duda <petrduda@microsoft.com>

* feat: Add `overflowBoundaryPadding` positioning prop (#26730)

* feat: Add `overflowBoundaryPadding` positioning prop

Introduces the `overflowBoundaryPadding` prop that will define a padding
so that the positioned element will never hit the boundary. The prop can
be used either as a single number shorthand or an object that uses
logical sides.

* changefile

* add tests for toFloatingUIPadding

* add documentation

* revert d3 change

* don't set padding if it's not used

* put limitShift back

* update story name

* update story naming

* fix story description

* remove unstable_disableTether from public API

* docs: Styling Component (v9) now introduces shorthands (#26773)

* chore: bump storybook-addon-export-to-codesandbox to 0.8.4 (#26787)

* Restore minimum width of Details List rows to be that of the container (#24096)

* Remove override row width style to fix DetailsList layouts

* Update snapshots

* chore: better documentation for home/end behavior (#26724)

- Adds test cases for home/end hotkeys
- Updates "bounds" story with information about home/end
- Updates "default" story to include min/max props so home/end
  behavior is observable
- Changes the "keys" import for better tree-shaking

* Initialize package for storybook full source code babel preset (#26781)

* Initialize package for storybook full source code babel preset

Preparing to move storybook codesandbox code to monorepo

Addresses #26780

* api md

* fix: handle single digit text input in SpinButton (#26789)

Previously the internal state for handling SpinButton text input would
only be updated after the second value was typed by a user. This lead to
a bug where state would not be committed in some cases when a user typed
just a single value, e.g., "2".

* Coachmark reposition on page resize  (#26725)

* re-render and re-calculate bounds when page resizes

* change

* applying package updates

* applying package updates

* fix: MenuList is a single tabstop (#26803)

* fix: MenuList is a single tabstop

Since Menu needs to handle tab because it is a positionined element in a
Portal, the MenuList does not need to. Disabling tabster's default
handling for Tab in MenuList broke tabbing in that components.

Fixes this by only disabling tabster's Tab behaviour when the MenuList
is wrapped by a Menu.

* changefile

* fix snapshot

* Port babel storybook full source plugin (#26790)

* Port babel storybook full source plugin

Ports the plugin from https://github.com/microsoft/fluentui-storybook-addons/blob/main/storybook-addon-export-to-codesandbox/src/plugins/fullsource.ts

Addresses #26781

* caret for prettier

* refactor to avoid code churn

* eslint pragma

* fix syncpack

* fix deps

* Initialize react-storybook-addon-codesandbox package (#26783)

* Initialize react-storybook-addon-codesandbox package

Preparing to move storybook codesandbox code to monorepo

Addresses #26781

* Update workspace.json

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

---------

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* chore(beachball): add more ignore patterns to mitigate unwanted change file generation (#26807)

* fix(scripts-format): make prettier fail process instead of silently failing (#26806)

* fix(scripts-format): make prettier fail process instead of silently failing

* feat(scripts-format): make prettier not fail on huge file lists with --since

* chore: update prettierignore

* style: fix formatting in files that were silently passed previously

* generate change files

* fixup! style: fix formatting in files that were silently passed previously

* chore: update tooling setup for wc-3 after master update

* chore: remove change files from master

* chore(beachball): scope config only to web-components to be able to merge master udates

* fix(ci) resolve issues reported by check-packages job

* chore(stress-test): fix bad conflict resolution

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
Co-authored-by: tomi-msft <66456876+tomi-msft@users.noreply.github.com>
Co-authored-by: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Tristan Watanabe <tristan.watanabe@gmail.com>
Co-authored-by: Geoff Cox (Microsoft) <gcox@microsoft.com>
Co-authored-by: Marcos Moura <marcosvmmoura@gmail.com>
Co-authored-by: Esteban Munoz Facusse <esteban.230@hotmail.com>
Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Co-authored-by: chajun <86579954+chpalac@users.noreply.github.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>
Co-authored-by: Jiří Vyhnálek <jiri@vyhnalek.net>
Co-authored-by: Juraj Kapsiar <jurokapsiar@gmail.com>
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Sunil Surana <sunilsurana1986@gmail.com>
Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Valentina <v.kozlova13@gmail.com>
Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: Miroslav Stastny <miroslav.stastny@microsoft.com>
Co-authored-by: Silviu Alexandru Avram <silviu.avram91@gmail.com>
Co-authored-by: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com>
Co-authored-by: Javier Escobar-Avila <106849132+javierems@users.noreply.github.com>
Co-authored-by: Connie Chen <33800628+conniec218@users.noreply.github.com>
Co-authored-by: Arthur Almeida (Tuka) <94864706+arthurd-micro@users.noreply.github.com>
Co-authored-by: Martin Trobäck <martin.troback@axis.com>
Co-authored-by: Marwan Fikrat <32395961+marwan38@users.noreply.github.com>
Co-authored-by: Mason Tejera <17346018+mltejera@users.noreply.github.com>
Co-authored-by: krkshitij <110246001+krkshitij@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Hensorskyy <vovchukgensorskyy@gmail.com>
Co-authored-by: Volodymyr Hensorskyi <vhensorskyi@atlassian.com>
Co-authored-by: David Zearing <dzearing@microsoft.com>
Co-authored-by: C. Perez <caperez@microsoft.com>
Co-authored-by: Jiří Vyhnálek <jirivyhnalek@microsoft.com>
Co-authored-by: Desen Meng <m@bln.cn>
Co-authored-by: Karlo Sudec <Svudec@users.noreply.github.com>
Co-authored-by: Karlo Sudec <karlo.sudec@gmail.com>
Co-authored-by: Karan Kakroo <karan_kakroo@infosys.com>
Co-authored-by: ankityadav4 <103660888+ankityadav4@users.noreply.github.com>
Co-authored-by: Amber <yuanboxue@outlook.com>
Co-authored-by: Petr Duda <peta.duda@gmail.com>
Co-authored-by: Petr Duda <petrduda@microsoft.com>
Co-authored-by: Thomas Michon <tmichon@microsoft.com>
chrisdholt pushed a commit that referenced this pull request Apr 29, 2024
* applying package updates

* fix: Select disabled state hover style, Combobox disabled state open on chevron click (#26068)

* perf: Don't render Checkbox icon when unchecked (#26248)

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

* revert: MenuItem root slot only supports div (#26261)

* fix: Revert MenuItem root slot to support only div

Follow up of #26257

* changefile

* applying package updates

* Fix: Allow root slot refs to merge with focus refs in Slider (#26243)

* fix: allow refs passed in root slot to merge with focus refs

* change file

* cleanup

* chore: Update Switch to use griffel reset styles (#26007)

Update the styles to apply base styles with Griffe's makeResetStyles function, which combines all of the base styles into a single class.

* Update styling for contentBefore and contentAfter input slots (#26115)

* Update styling for contentBefore and contentAfter input slots

* change files

* Update styling

* Azure Theme: reduced spin button height to match TextField / DropDowns at 24px height (#26265)

* Reduced split button height to match textfields / dropdowns at 24px height.

* Typo fix

* Create @fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json

* fix: web component menu layering bug (#26260)

* fix: layering z-index issue for sub menus

* chnage file

* applying package updates

* docs: Add documentation for react-overflow (#26183)

* docs: Add documentation for react-overflow

* add more docs

* changefile

* Update packages/react-components/react-overflow/stories/Overflow/index.stories.tsx

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* Update packages/react-components/react-overflow/stories/Overflow/OverflowDescription.md

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* Update packages/react-components/react-overflow/stories/Overflow/Wrapped.stories.tsx

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* add docs for pinned

* remove gap from minimum visible

* remove redundant overflowDirection prop

* fix wrapped example styling

* use aria-pressed for selected items

* improve resizable area styling

* add non-trivial solution for priority divider overflow

* increase padding for divider examples, document utilities

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>

* fix: Tab should focus the window if trigger is the last focusable element (#26163)

* fix: Tab should focus thewindow if trigger is the last focusable element

Removes the explicit tab handling in the Menu.

We know that React effects are sync so we always focus the menu trigger
when the menu is closed. Since the browser only performs the default behaviour for Tab once
events have fully bubbled up the window, the browser will move
focus to the next tabbable element before/after the trigger if needed.
If tab was not pressed, then we simply focus the trigger as expected.

* changefile

* Update change/@fluentui-react-menu-9787aa9c-cdf8-41b8-a9d6-c8d7e1f3c502.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/react-components/react-menu/src/components/Menu/useMenu.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* chore: bump storybook to 6.5.15 (#26259)

* chore: manually dedupe prismjs

* bump storybook to 6.5.15

* bump other packages

* lock

* update html as well

* another lock

* lock

* dedup

* locked deduped for sure

* only dedup storybook

* change file

* chore: update yarn.lock again after deduping storybook

* Update Menu.cy.tsx

Co-authored-by: Tristan Watanabe <tristan.watanabe@gmail.com>

* ci: bump actions/checkout to v3 to fix node12 deprecation (#26281)

* chore: migrate whole repo to new `@fluentui/scripts-*` family of packages (#26182)

* chore(scripts/generators): update create-* generators to contain new granular script packages

* chore: migrate scripts/ sub-folders to packages

* chore: migrate apps/ to use new scripts-* packages

* chore: migrate packages/ to use new scripts-* packages

* chore(.github): update codeowners

* generate change-files

* chore: make danger work with packaged api

* Fix suggestions no results infinite loop (#26267)

* Set correct defaultRender

* yarn change

* docs: add migration guide for cards from V0 to V9 (#26186)

* fix: button semantics for Combobox chevron, and pointer styles (#26075)

* fix: button semantics for Combobox chevron, and pointer styles

* Change file

* add chevron accName and tests

* add top-level aria-label* props to be overridden by chevron

* update change file to resolve gh discussion

* update order of icon aria-label* priorities

* chore(react-datepicker): Scaffold package (#26286)

* creating react-datepicker package

* adding api file

* update to new scripts-* setup

* updating api extractor config

* chore: Re-exporting missing exports from @fluentui/react-combobox. (#26294)

* fix: react-field does not wrap SVG in inline parent (#26150)

* update to use root-level grid layout for validation icon to avoid extra wrapping node
* use named grid template areas for readability

* fix: add aria-owns to react-combobox non-inline popups (#26246)

* applying package updates

* docs: Improve a11y for Table/DataGrid examples (#26218)

Fixes #26210
Fixes #26208
Fixes #26197
Fixes #26209

* fix(TableSelectionCell): Radios should not change selection on focus (#26283)

* fix(TableSelectionCell): Radios should not change selection on focus

While native radios change selection on focus, it can be a bad
experience for keyboard users on larger widgets. If an author wants to
perform an action on row select, it won't force a keyboard user to
perform that action for every row between the one that they're on and
the one that they want.

Fixes #26196

* update tests

* changefile

* feat: Implement DataGridBody powered by react-window (#26081)

* feat: Implement DataGridBody powered by react-window

Uses hooks to recompose `DataGridBody` that uses react-window
internally. This component should be a straight replacement for the
standard `DataGridBody` that supports virtualization.

* remove useless import

* update datagrid

* refactor: render function children called in component render function

Components like `DataGridBody` and `DataGridRow` only accept render
functions as children. These render functions were always called during
the `useComponent` hook. This was unnecessary, and makes recomposition
harder because data is always processed even if the recomposed component
should render children differently.

* changefile

* updates

* remove useless story

* changefile

* update md

* changefile

* useScrollbarWidth

* update changefile entry

* remove unnecessary dependencies

* remove TODO

* expose width as prop

* fix comment typo

* fix datagrid virtualization story import

* use unknown in

* change  to

* add incrementing index to virtualization examples

* update api md

* chore: remove all package.json from v-build ownership to speed-up PR review velocity (#26285)

* Organize storybook TOC for react-theme (#26185)

* Separated different theme areas in storybook

* yarn change

* Update change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json

* chore: Simplify Checkbox style selectors using component checked/disabled state (#26247)

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.

* fix(react-infobutton): Change role of PopoverSurface to note and fix API to not require cast (#26300)

* update types to make the API more friendly for popover

* change files

* api file

* updating types to keep slots

* updating query by dialog to note

* chore: Add bundle size fixtures for react-table (#26310)

* chore: Add bundle size fixtures for react-table

* changefile

* chore(react-tree): removes BaseTreeItem premature generalization (#26302)

* fix: toolbar a11y checklist (#26275)

* fix: add missing aria label for toolbar stories

* fix: add missing role for toolbar radio

* fix: add missing aria orientation for vertical toolbar

* feat: create radio group

* chore: add aria pressed and checked

* chore: update stories aria label

* chore: fix class name var

* chore: add changes

* chore: update api

* chore: update snapshot

* chore: update unstable api

* chore: remove aria-pressed

* chore: remove aria pressed

* chore: update changes

* chore: reuse toolbar group

* chore: remove inexistent exports

* chore: update apis

* chore: add changes

* chore: update snapshots

* fix(scripts-generators): use workspace package path on callsite to mitigate plop cwd issue (#26322)

* add perf scenario for InfoButton (#26306)

* test(react-18-tests-v9): mute TS error reporting from packages/ (#26324)

* chore(react-datepicker): Create Calendar components and DatePicker component (#26325)

* add Calendar components and DatePicker component

* fix lint error

* missed one

* chore: rename react-builder index.tsx to index.ts (#26343)

* fix react-builder tsconfig path

* rename react builder index

* Revert "fix react-builder tsconfig path"

This reverts commit c6407ca2fa565ce770287b06a646a7f8bac8d69e.

* chore: fix typo in Dialog docs (#26342)

* chore: fix typo in Dialog docs

* change file

* chore: prepare release react-northstar 0.66.0 (#26217)

* chore: prepare release react-northstar 0.66.0

* @fluentui/react-northstar_v0.66.0

* chore: fix dependencies after react-northstar release

* chore: rename react-builder index.tsx to index.ts (#26343)

* fix react-builder tsconfig path

* rename react builder index

* Revert "fix react-builder tsconfig path"

This reverts commit c6407ca2fa565ce770287b06a646a7f8bac8d69e.

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>

* Update fluent 2 theme to reconcile with v9 (#26331)

* Update fluent 2 theme to reconcile with v9

* yarn change

* Update VR screenshot diff commenting flow (#26340)

* chore: Re-exporting makeResetStyles in @fluentui/react-components (#26353)

* chore: Re-exporting makeResetStyles in @fluentui/react-components.

* Adding change file.

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

* chore(react-infobutton): Add vr tests for InfoButton (#26305)

* adding vr-tests for infobutton

* updating tests to storywright

* fix border for Teams HCM

* update change files?

* updating styles to remove custom focus indicator

* applying package updates

* applying package updates

* BREAKING: rename types to be more consistent (#26304)

* BREAKING: rename types to be more consistent

* changefile

* update md

* refactor(scripts): move executors from monorepo to proper domain (#26345)

* refactor(scripts-tasks): make api-extractor one closure to avoid scope leaks (#26346)

* refactor(scripts-tasks): make api-extractor one closure to avoid scope leaks

* chore(scripts-tasks): remove unnecessary check for ts task

* chore: remove @fluentui/scripts-dependency-graph-generator (#26365)

* chore: remove unused dependency on enhanced-resolve (#26364)

* feat(PresenceBadge) Add `blocked` status (#26366)

* feat(PresenceBadge): Add blocked status

* changelog

* update api

* Update packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* BREAKING(DataGrid): render functions need to by typed (#26371)

* BREAKING(DataGrid): render functions need to by typed

* changefile

* fix dependencies

* update story

* fix(TableCellActions): Background should match rown on hover and active (#26373)

* fix(TableCellActions): Background should match rown on hover and active

* changefile

* remove unnecessary styles, inherit background color

* applying package updates

* feat(scripts-tasks): use path aliases for api-extractor only on local env (#26370)

* feat(scripts-tasks): use path aliases for api-extractor only on local env

* docs: Hoist columns above react code (#26374)

The intention of memoized columns was to make the code visible in `show
code` button of the docsite. However this can encourage bad practices
like memoizing when not necessary.

Fixes #26297

* docs: Add row memoization example (#26379)

Adds an example where selectable table rows are memoized. When a row's
selection changes, only that affected row is re-rendered.

* Release @fluentui/react-table as RC (#26381)

* Release @fluentui/react-table as RC

* changefile

* Fix/message bar remove background in hc (#26221)

* fix: added border with correct contrast ratio in HC in MessageBar

* Release `@fluentui/react-toolbar` as stable (#26384)

* Release `@fluentui/react-toolbar` as stable

see title

* changefiles

* Update packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* chore: Add bug bash to convergence checklist (#26367)

* applying package updates

* Release `@fluentui/priority-overflow` and `@fluentui/overflow` as stable (#26380)

* Release `@fluentui/priority-overflow` and `@fluentui/overflow` as stable

* changefile

* update docs

* update react-components

* changefile

* update stories imports

* update stories

* update stories

* Update packages/react-components/react-overflow/stories/Overflow/index.stories.tsx

* docs(Toolbar): Minor improvements (#26382)

* docs: Minor improvements

- Be more explicity about sizing
- Make popover examples a bit cleaner (removed Example buttons)
- Add link to overflow documentation

* Add subcomponents

* remove from preview section

* fix subtle example

* feat(react-tabster): add id to useModalAttributes options (#26387)

* add id

* chg

* api

* fix(react-northstar)(ChatMessage): action menu positioning in RTL (#26378)

* fix: Styles should be inserted on portal at render time (#26377)

* fix: Styles should be inserted on portal at render time

Fixes #25432 again

`useInsertionEffect`still runs after DOM has been mounted, which results
in the same issue where transitions are triggered due to css variables
changing.

* changefile

* remove useInsertionEffect

* different code paths for React versions

* make version check better

* add test for bug

* remove ts-expects-error

* improve vr tests

* cleanup useInsertionEffect

* fix steps

* fix vr test

* applying package updates

* Generic Virtualizer (#25451)

* Squish and rebase

* Add accessibility metrics to demos

* useCallbacks for refs and update state update methods

* feat: create migration shim packages for V0 (#26142)

* chore: create package

* chore: add api changes

* chore: remove ununsed initializeIcons

* chore: use as dev deps

* chore: fix version mismatch

* chore: use as deps

* chore: remove spec

* chore: add js docs

* chore: update lock

* chore: use V0 Input

* chore: update N* in the shims package

* chore: update package

* Update hex color codes for MS Excel product (#26339)

* chore: Simplify layout for Field (#26352)

Simplify Field's layout:
* For vertical alignment, use a single column grid with row auto flow (the default).
* For horizontal alignment, use a two-column grid with the label taking up the entire first column. All other children of the root will be placed in the second column thanks to the grid's auto-flow behavior.
  * If there is no label, the label's column is replaced with an equal amount of padding. This keeps horizontal fields with and without labels aligned with each other.
* Place the validation message icon as a child of the validation message, since it can no longer have its own grid cell in the root layout.
  * The icon is absolutely positioned in the validationMessage, and the message text is padded in by the width of the icon.
* Use `makeResetStyles` where appropriate to reduce the number of class names on slots.

The primary benefit of this change is that the `control` slot no longer needs to specify its grid area. This will allow a future change to avoid having to wrap the control in a `<div>` to position it properly.

* fix: react components version (#26406)

* update codeowners (#26307)

* chore: fix Panel Confirm Dismiss example to properly restore focus after panel closes (#26301)

* fix(scripts-tasks): unify api-extractor runs on any CI (#26411)

* chore: update browser list db (#26407)

* fix(vr-tests v8): fix flaky VR tests (#26348)

Fixes undefined

* docs: add migration guide for cards from v8 to v9 (#26347)

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Fixes https://github.com/microsoft/fluentui/issues/24020

* New min/max example (#26418)

* feat: provide `launch` and `startServer` functions as single source of truth for creating new browser/server instance within monorepo (#26375)

* feat(scripts-pupeteer): provide launch function as single source of truth for creating new browser instance

* chore: bump puppeteer to v17

* refactor(scripts): make startServer generic and used everywhere

* fix(ProgressBar): rename rectangular shape to square (#26419)

* fix(ProgressBar): rename rectangular shape to square

* change file

* fix: Update Field label padding to match spec (#26413)

Update padding of Field's label to match the visual spec.

* chore(recipes): Create initial implementation for react-recipes (#26332)

* setting up initial implementation

* updating workspace to add package

* adding blank file to register src folder

* adding requested changeS

* updating tsconfig

* updating package.json

* fix: Stretch Field components to full width (#26412)

The component within a field stretches to fill the whole width of the field. The field itself can be resized to the desired width of the component, label, hint, etc.

* chore: remove circular dependency within v0 and scripts/ and move e2e test to proper pipeline (#26410)

* chore(fluentui/e2e): make scripts task naming consistent and rename test to e2e

* refactor(fluent/perf): remove circular deps between scripts-gulp and fluent-perf and scope related tooling to the perf package

* chore(scripts): copy parseDocblock to northstar conformance test to avoid compiling tooling code within current v0 tsc setup

* fix: Field sets role="alert" on its error message so it is announced by screen readers (#26414)

Add role="alert" to the field's validation message when it is an error, so that it is read by screen readers.

* fix: react-combobox examples a11y updates (#26441)

- add a "no results found" fallback item in the filtering example
- update the freeform custom string option in the freeform example
- add better warning language for the multiselect w/ value text example
- set the Persona avatar to aria-hidden to prevent double announcement

* Hotfix/portal memory leak (#26435)

* clean virtual parent reference

* changelog

* reuse setVirtual and remove cleanVirtualParent

* docs: make unsized icons searchable (#26451)

Adds the ability to use the search engine on
the docs page even for the "Unsized" icons.

* docs: fix config for import rewrites for Storybook export (#26454)

* Added README.md for public-docsite-v9 (#26434)

* Added README.md to public-docsite-v9.

* applying package updates

* fix: make ssr-tests-v9 running on Windows (#26458)

* fix: make ssr-tests-v9 running on Windows

* Update test.ts

* fix: disable fluentui debug console messages for the server runtime (#24803)

* fix: disable fluentui debug console messages for the server runtime

* Update createFelaRenderer.tsx

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat: export TextareaOnChangeData type (#26455)

* fix: react-toolbar exports (#26462)

The React hooks useToolbarButtonStyles_unstable and
useToolbarButton_unstable were exported as Typescript types but they
are functions.

Updated to export them as functions, not types.

* SpinButton fix for chevron buttons  (#26464)

* Splitbutton fix for spin button chevrons

* Inline text centered vertically, labels on top remain same height (for Elixir)

* CSS selector clean up

* Create @fluentui-azure-themes-d4442d56-f31c-4e86-b175-7298d7d565de.json

* chore: react-combobox spec and migration docs update (#26396)

* fix: high contrast mode focus styles are applied (#26116)

* fix: react-combobox add listbox max-height and shift shadow style location (#26470)

* Adds Fluent 2 styles for v8 SpinButton (#26277)

* SplitButton styles

* Change file

* applying package updates

* feat(react-tree): create TreeItemLayout component (#26446)

* feat(react-tree): create TreeItemLayout component

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts

* chore: move tokens from contexts folder

* Azure Theme: Spinbutton CSS update (#26467)

* Splitbutton fix for spin button chevrons

* Inline text centered vertically, labels on top remain same height (for Elixir)

* CSS selector clean up

* Create @fluentui-azure-themes-d4442d56-f31c-4e86-b175-7298d7d565de.json

* Second spin button fix: Elixir

* Fixing class selector from previous PR

* Create @fluentui-azure-themes-4447b77a-6462-4e32-a60e-e4bcefb1be23.json

* fix: react-combobox story fixes and docs wording updates (#26471)

* fix: react-combobox activedescendant calculation updates (#26444)

- recalculate the active option when the children change while open
- clear activedescendant if using left or right arrows to move text cursor

* fix: Update `useId` to work correctly in React 18 and React 18 strictmode (#26465)

* updated useId to check if React has useId Available an use it

* change file

* moving replace to be specific to style tag and return providedId when provided and React.useId is available

* update ?? to ||

* change file

* minor change

* add requested changes

* adding comment

* chore(react-datepicker): Copy over files to package from personal branch (#26472)

* copy over files from local branch

* copy over stories and src

* updating deps

* adding missing dep

* adding missing dep

* fix typecheck errors

* chore: update v8 ComboBox & Dropdown docs to explicitly prohibit nested interactive content (#26466)

* feat(react-button): creates ButtonContext (#26478)

* feat(react-button): creates ButtonContext

* chore: add comments to the API

* Update packages/react-components/react-button/src/components/Button/useButton.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Add relative position to base picker (#26490)

* Add relative position to base picker

* changefile

* snaps

* Add labels to arcs in donut chart (#25967)

* add labels to arcs in donut chart

* add change file

* update snapshots

* fix overflowing arc labels

* add prop to hide arc values

* add tests

* update example

* minor

* rename functions

* Add new variant to horizontal bar chart (#26082)

* add new variant to horizontal bar chart

* add change file

* add examples

* add comments

* add tests

* rename variant

* add rtl support

* minor

* rename function

* chore: scaffolds  TreeItemPersonaLayout component (#26369)

* feat: create TreeItemPersonaLayout component

* Update packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts

Co-authored-by: ling1726 <lingfangao@hotmail.com>

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* chore: refactors Tree and TreeItem to stop using aria-owns (#26292)

* chore(deps): bump ua-parser-js from 0.7.31 to 0.7.33 (#26484)

Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 0.7.31 to 0.7.33.
- [Release notes](https://github.com/faisalman/ua-parser-js/releases)
- [Changelog](https://github.com/faisalman/ua-parser-js/blob/master/changelog.md)
- [Commits](https://github.com/faisalman/ua-parser-js/compare/0.7.31...0.7.33)

---
updated-dependencies:
- dependency-name: ua-parser-js
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add property that manages if panels should be rerendered or not (#25368)

* Add property that manages if panels should be rerendered or not

* rename variable

* Update changelog

* Update CHANGELOG.md

Co-authored-by: Volodymyr Hensorskyi <vhensorskyi@atlassian.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* fix: update elementContains() to handle circular references (#26483)

* fix: update elementContains() to handle circular references

* update options, add test

* Add overrides context to allow Input appearance overrides (#25262)

* proto: add overrides context to allow per-component overrides

* fix dependencies

* overides merging

* API files

* change files

* update change files

* fix monorepo dependencies

* api files

* address PR comments

* fix typings

* revert appearance story, add vr test

* add override to Select, SpinButton and TextArea

* change files

* fix test

* rename overrides -> overrides_unstable

* address PR comments, fix test

* feat(web-components): bump tslib to 2.1. to align with rest of monorepo packages (#26457)

* feat(web-components): bump tslib to 2.1. to align with rest of monorepo packages

* chore: remove web-components from deps sync ignore list and fix repo violations

* generate change file

* chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize (#26492)

* chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize

* chore: updates AvatarGroup components to use AvatarSize

* chore(react-tree): updates AvatarSizes for AvatarSize

* react-migration-v8-v9 moved to v9 convergence package (retry PR) (#26503)

* Deleted v8 migration package

* Added new migration package

* Add back migration shims and stories

* yarn change

* syncpack fix

* syncpack fix

* feat: Add Field component to replace InputField, ComboboxField, etc. (#26430)

* Add a new `Field` component that can render any control as its child.
  * Applies props to the child using `cloneElement`, to hook it up to the labels and validation state.
  * Update `useField_unstable` to be used by the new Field. Existing users of this function will need to update their code.
  * Add conformance and bundle-size tests for Field.
* Deprecate the `*Field` components, and replace them with shims that are implemented with the new `Field` component.
  * These will be removed in a future v9 release, as they were never released as stable.
  * `CheckboxField`, `ComboboxField`, `InputField`, `ProgressField`, `RadioGroupField`, `SelectField`, `SliderField`, `SpinButtonField`, `SwitchField`, `TextareaField`

* RFC: Field with custom components (#26338)

Implemented by #26430

* fix: update react-combobox multiselect checkbox styles to match Checkbox (#26509)

* applying package updates

* fix(Link): Handle "tabIndex" from user's input (#26456)

* fix: handle "tabIndex" from user's input

* Update packages/react-components/react-link/src/components/Link/useLinkState.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* fix(react): No pointer events on focus ring (#25088)

* fix(react): No pointer events on focus ring

* change file

* make pointerEvents configurable in getFocusStyle()

* update change files

* Update packages/style-utilities/src/interfaces/IGetFocusStyles.ts

Co-authored-by: David Zearing <dzearing@microsoft.com>

Co-authored-by: David Zearing <dzearing@microsoft.com>

* feat: add IdPrefixProvider (#26496)

* feat: add IdPrefixProvider

* Update packages/react-components/react-utilities/src/hooks/useId.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* applying package updates

* feat(react-tree): uses ButtonContext to modify default button size (#26495)

* feat(react-tree): starts using ButtonContext to modify default button size

* Update packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* feat: add combobox and dropdown vr tests (#26487)

* fix(react-persona): Reduce spacing between first and second line (#26520)

* updating spacing between second and first line

* change file

* applying package updates

* chore: properly use tokens for border radius (#26516)

* chore(scripts-puppeteer): migrate to puppeteer 19 (#26475)

* chore(scripts-puppeteer): migrate to puppeteer 19

* fix(scripts-storybook): implement proper TS module and path aliases resolution to enable build-less DX (#26489)

* fix(scripts-storybook): attempt to fix workspace addon loader

* fix(scripts-storybook): implement proper ts registration and path aliases resolution in dev mode

* feat(scripts-storybook): redo the solution to reuse storybook webpack module resolution and TS compilation

* docs(scripts-storybook): update docs

* Fix duplicate-id accessibility issue in line chart (#26486)

* fix duplicate-id accessibility issue in line chart

* add change file

* chore(react-builder): migrate to axe-core v4 (#26453)

* chore(react-builder): migrate to axe-core v4

* fix(scripts-jest): remove duplicate __mock__ violations in v00 when running test with build snaps present

* chore: Change the default value of validationState to error when a validationMessage is set (#26523)

Change Field's `validationState` to default to `error` when there is a `validationMessage`. This makes the default more useful, and makes the common case of showing an error message simpler.

* chore(react-badge): updates border-radius to use proper token value (#26531)

* filetype updates for loop, clipchamp [master branch] (#26276)

* Update CDN information for filetype icons, new icons for loop and clipchamp

* Change files

* fix package name typo in readme file

* fix: remove invalid and unnecessary DetailsRow check (#26519)

* fix: Fixing button padding to get correct sizes from design spec (#26522)

* fix: Fixing button padding + minHeight to get correct sizes from design spec.

* Adding change file.

* Cleanup.

* Changing approach to not use minHeight.

* Updating spacing constants to only use values directly instead of having some referencing tokens.

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

---------

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

* applying package updates

* chore: Bump storybook-addon-export-to-codesandbox to 0.8.1 (#26513)

* feat: re-export useFocusWithin() hook (#26533)

* fix: SSRProvider TypeScript definitions (#25582)

* fix: SSRProvider TypeScript definitions

* children prop now needs to be listed explicitly when defining props in React 18
* [How to Upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions)

* Create @fluentui-react-utilities-9259798e-d6da-420f-8da3-3bf377f4825b.json

* update API file

---------

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* fix(scripts-generators): run generate-version-files logic on node execution (#26532)

* Jackieg/azuretheme cal (#26544)

* azure theme calendar style fix

* Context menu border fix

* updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing

* Updated "today' selector to match figma

* Removing border from focused pivot

* Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json

* removing TS errors

* Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir

* Removing empty line

* fix(react-persona): Make before and after textPositions align correctly when the Avatar's size is larger than the text lines together (#26546)

* adding vr-tests and fixing centering of the text

* change files

* fix vr-tests

* fixing vr-tests

* feat: Release react-combobox as stable (#26518)

* Export react tabs context (#26552)

* Exported context for react-tabs

* API updated, yarn change

* Apply suggestions from code review

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* Remove wrong context export

* updated API

* components API update

---------

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* applying package updates

* feat: expose Typography tokens as components and create documentation for it (#26403)

* refactor: move all presets to a dedicated folder

* feat: expose all typography tokens as presets

* types: expose TextPresetProps

* docs: link typography page to react-text docs

* docs: code block not having monospace font in all elements

* docs: recreate Typography documentation with better examples

* test: add missing VR tests for text presets

* docs: force code block to have correct font-size and font-family

* test: use inline snapshots

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* docs: add description to code blocks

* docs: move text block to the top for better discoverability

---------

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* feat: Release `@fluentui/react-select` as stable (#26491)

* chore: Update Field VR tests to use new Field component (#26537)

Rewrite Field VR tests to use new standalone `Field` component.

* chore(react-infobutton): Add aria-label to InfoButton's button and add a11y guidance for using InfoButton with a label (#26557)

* updating aria-label for infobutton and adding guidance on how to use infobutton with a label

* change file

* applying package updates

* Adding fluent2-theme dependency (#26571)

* fix: v8 SplitButton should not reset focus to trigger after opening menu (#26572)

* fix: v8 Dropdown option focus should not be cut off in HCM (#26573)

* applying package updates

* [DatePicker] fix default date parser converting dates to UTC implicitly (#25962)

* [DatePicker] fix default date parser converting to UTC instead to local timezone

* add change file + better link

---------

Co-authored-by: Karlo Sudec <karlo.sudec@gmail.com>

* docs: use full source in "Show code" (#26562)

* docs: use full source in "Show code"

* Apply suggestions from code review

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* update the addon

---------

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* docs: Remove extra exports (#26567)

* docs: Remove extra exports

Doc examples should only have one export.

* revert

* feat: generate new component structure for react-drawer (#26554)

* chore(react-tree): adds TreeItemLayout to all stories (#26550)

* ci: bump gha to latest and use major for add-to-milestone to get latest fixes (#26581)

* Fix dependency mismatch (#26586)

* ci: use specific version of add-to-milestone as using v1 throws error (#26588)

* chore(public-docsite-v9): enable build-less DX for storybook (#26476)

* feat(scripts-storybook): implement createPathAliasesConfig util for creating tsconfig with whole repo path aliases

* chore(.storybook): replace babel-loader with swc in root storybook config

* feat(scripts-storybook): add registerRules helper and replace tsConfigPlugins within registerTsPaths if one already exists

* chore(scripts-storybook): move logic from monorepo root /.storybook to package boundary

* chore(public-docsite-v9): enable build-less DX for storybook with swc

* Generated empty Breadcrumb component v9 (#26529)

* Generated Breadcrumb package for FluentUI V9.
* Generated Breadcrumbs component in @fluentui/react-breadcrumb package.

* fix(ssr-tests-v9): don't open browser twice on CI to potentially mitigate TIMEOUT issues (#26587)

* fix(public-docsite-v9): add migration packages as dep to properly build those when releasing (#26589)

* remove mwf styles (#26592)

* remove mwf styles

* change file

* Fix: Contextual menu label missing overflow hidden (#26591)

* fix: ContextualMenu label was missing overflow hidden

* change file

* snaps

* applying package updates

* fix(scripts-generators): make create-component work properly on windows and improve DX (#26569)

* fix(tools): make sure export maps always use posix paths

* fix(scripts-generators): remove empty export {} and run lint fix when create-component is invoked

* feat(eslint-plugin): turn off fluentui/max-lenght rule for v9

* generate change file

* applying package updates

* chore(react-infobutton): Making InfoButton's content focusable and update example's text (#26596)

* fix: Remove ReallyClean from CI pipelines (#26637)

Since component governance is forced, we should disable this step since
it will remove all files from the working directory and fail component
governance

* fix: New overflow items all always dispatch updates to subscriber (#26565)

* fix: New overflow items might not dispatch updates

The dispatch process is done by analyzing the tops of the visibile and
invisible queues. The update triggered after adding a new element might
not be dispatched to the subscriber because the queue tops don't
change. This can result in a desync between the visibility and the
subscriber state.

Adds a `forceDispatch` flag which is used when new items are added while
observing so that the next batched update will flush to subscribers even
if queue tops don't change.

Fixes #23555

* changefile

* Add tests

* changefile

* remoive old changefile

* refactor processOverflowItems

* make test cleaner

* fix(createPositionManager): computePosition should not apply styles after destruction (#26593)

* fix(createPositinoManager): computePosition should not apply styles
after destruction

Since `computePosition` is an async function, it can still resolve after
the instance is destroyed.

Updates the destruction mechanism to have a [flag similar to poppver v2](https://github.com/floating-ui/floating-ui/blob/2893e9a8d2ebd895eb4311a8873afac62f75123e/src/createPopper.js#L171). This flag is used both on `forceUpdate` (to avoid memory leaks) and `computePosition` (to avoid applying outdated position).

* changefile

* update changefilke

* rename destroyed to isDestroyed

* Update packages/react-components/react-positioning/src/createPositionManager.ts

* Update packages/react-components/react-positioning/src/createPositionManager.ts

* chore: export SlotRenderFunction type (#26600)

* fix: HoverCard example adjusts to viewport, add docs (#26624)

* scaffold react-skeleton components (#26640)

* fix: Dropdown/Combobox checkboxes have double swipe stops for some screen readers  (#26566)

Add aria-hidden to label text to prevent it from being a duplicate non-interactive swipe stop. Add aria-labelledby to preserve accName for the checkbox.

* fix: Using correct icon and color for away + out-of-office PresenceBadge (#26655)

* fix: Using correct icon and color for away + out-of-office PresenceBadge.

* Adding change file.

---------

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>

* fix: react-button high contrast mode primary variant (#26623)

* Updated description for spin button (#26659)

* Updated description for spin button

* yarn change update

* removed disabled property from Label (#26658)

* Sankey revisit ankit (#25455)

* Sankey chart changes for the new design

* Sankey changes for updated design

* Adding change file

* Fixing build failure

* Fixing build failure

* fixing build failure

* fixing build failure

* fixing build failure

* Adding border color and reverting changes for package.json

* Adding changes for opacity changes for links,font size for text,different border for node hover

* Resolving review comments and removing the examples used for testing

* Fixing the gradient issue

* Fixing the id issues

* Fixing the tooltip position issue

* Fixing the tooltip position issue

* Adding comment for tooltip fix

* Fixing the tooltip position issue

* Fixing the tooltip position issue

* Incorporating review comments and improving code efficiency followimg the best pratices

* Adding Unit Test cases for Sankey Chart

* Resolving review comments

* Minor fixes

* Resolving review comments

* applying package updates

* Table - Column resizing (#26477)

* RFC: Styling Handbook for Fluent UI React v9 (#26148)

* RFC: Styles handbook

* Apply suggestions from code review

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>

* add a note about imports

* rename to "Performance caveat"

* add note about shorthands

* Apply suggestions from code review

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

* add a link to makeResetStyles section

* update structure

* Apply suggestions from code review

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* update system colors part

* fix stats

* highlight the important phrase

* use makeResetStyles in examples

* add notes about overrides

* add order of mergeClasses to basic

* split selectors cases, add "Use structured styles"

* split and move RTL parts

* Apply suggestions from code review

Co-authored-by: Amber <yuanboxue@outlook.com>

* do not expand shorthands in makeResetStyles calls

* make comment with a problem explicit

* put a missing word

* Apply suggestions from code review

Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* add an example for `shorthands` & `@noflip`

* improve base examples

* mention FluentProvider in RTL section

* update TOC

---------

Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Amber <yuanboxue@outlook.com>
Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* fix(Dropdown): Allow clear on Enter/Space press (#26685)

* fix(Dropdown): Allow clear on Enter/Space press

* remove aria-hidden, add changelog

* fix

---------

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>

* Added information about `Open in CodeSandbox` button repo (#26536)

* fix(react-card): improve description for card props (#26614)

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* docs(Card): improve a11y of storybook examples (#26613)

Fixes https://github.com/microsoft/fluentui/issues/26583

* Azure Theme: toggle & commandbar style updates (#26654)

* azure theme calendar style fix

* Context menu border fix

* updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing

* Updated "today' selector to match figma

* Removing border from focused pivot

* Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json

* removing TS errors

* Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir

* Removing empty line

* Another spinbutton update to match Elixir usage

* spin button was off by a few pixels in elixir

* removed border from disabled action button per designs, reduced size of toggle per designs

* 5.5 px border

* [DatePicker] fix validationOnLoad prop is ignored (#25961)

* fix: add validateOnLoad to useErrorMessage hook

* add change file

* [DatePicker] add test for validateOnLoad false

* fix: missing variable in useEffect dependency list

* fix lint error

Co-authored-by: Karlo Sudec <karlo.sudec@gmail.com>

* feat: Bump keyborg to 2.0.0 and tabster to 4.1.1 (#26584)

* chore: Bump keyborg to 2.0.0 and tabster to 4.0.1

See title

* changefile

* update breaking change

* deal with breaking change

* bump to tabster 4.1.0

* bump 4.1.1

* revert changes to lock

* feat: react-data-grid-react-window should be complete extension package (#26627)

* feat: react-data-grid-react-window should be complete extension package

Implements `aria-rowcount` and `aria-rowindex` support for the
virtualized DataGrid.

This PR also turns the package into a 'complete' extension package so
that all DataGrid components are re-exported from it whether it is
recomposed or not. This package should never be exported from
react-components suite.

* export useDataGridContextValues_unstable

* changefile

* remove duplicate export

* remove DataGridBody tests, not a core component here

* Update packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts

* make hack nicer

* update m

* Update packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* update md

---------

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* fix: react-combobox never uses Option value as a display string (#26617)

Instead, `defaultValue` or `value` are required when setting `defaultSelectedOptions` or `selectedOptions` respectively.

* applying package updates

* feat: Initial release react-data-grid-react-window (#26731)

* feat: Initial release react-data-grid-react-window

Releases the package with `beta` tag since all functional requirements
are implemented.

* changefile

* feat(react-tabster): add `unstable_hasDefault` option on `useArrowNavigationGroup` (#26732)

* hasDefault

* unstable

* test

* Revert "test"

This reverts commit a2a1aee5f2d0cea83a5f770d96b272523afe1221.

* update

* add slash in comment

* applying package updates

* feat: TableCellLayout component now supports truncate prop (#26738)

* feat: Release `Table` and `DataGrid` as stable (#26736)

* feat: Release `Table` and `DataGrid` as stable

See title

* changefile

* merge imports

* fix

* chore(react-datepicker): Remove @fluentui/react dependencies and update Field usage (#26726)

* removing @fluentui/react

* removing mdl2 icons initialization

* adding requested changes

* updating api

* feat: DataGrid - resizable columns (#26690)

* fix(storybook): turn off mangling on production builds to provide same output as with Terser (#26757)

* fix(storybook): turn off mangling on production builds to provide same output as with Terser

* chore: bump storybook-addon-export-to-codesandbox to fix swc story exports patterns

* chore: prepare release react-northstar 0.66.1 (#26687)

* chore: prepare release react-northstar 0.66.1

---------

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>

* fix: keyboard navigation not working for select elements (#26612)

* fix: Small mistake in docs for Avatar name prop (#26747)

Fix doc comment for Avatar's name prop.

* chore: Update Field Spec and Migration guide to match current implementation (#26549)

Update the Spec and Migration guide to match the changes to make it a standalone component in PR #26430.

* chore: Add perf tests for Field (#26603)

* fix(react-utilities, react-provider): Remove colons from generated id and fix hook order error in React 18 (#26745)

* change files

* adding memo and fixing type of useId

* chore: Update Field documentation and stories (#26599)

Update Field stories and documentation for the changes to make Field a standalone component (in PR #26430), and for clarity.

* chore(deps): bump http-cache-semantics from 4.1.0 to 4.1.1 (#26602)

Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1.
- [Release notes](https://github.com/kornelski/http-cache-semantics/releases)
- [Commits](https://github.com/kornelski/http-cache-semantics/commits)

---
updated-dependencies:
- dependency-name: http-cache-semantics
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix svg-img-alt accessibility issue in vertical stacked bar chart (#26755)

* fix svg-img-alt accessibility issue in vertical stacked bar chart

* add change file

* applying package updates

* Fixing wrong link hover value (#26778)

* Fixing value to show on link hover

* Change file

* Tree Item Layout & Persona Layout stories and styles (#26630)

* stories

* laoyut

* stories update

* remove prettier edited packages

* remove changes by prettier

* handle expand collapse only

* default open tree

* expand collapse

* fix layout

* Update LineChart.base.tsx

* Update getFocusStyle.ts

* Update TreeExpandCollapseIconOnly.stories.tsx

---------

Co-authored-by: Petr Duda <petrduda@microsoft.com>

* feat: Add `overflowBoundaryPadding` positioning prop (#26730)

* feat: Add `overflowBoundaryPadding` positioning prop

Introduces the `overflowBoundaryPadding` prop that will define a padding
so that the positioned element will never hit the boundary. The prop can
be used either as a single number shorthand or an object that uses
logical sides.

* changefile

* add tests for toFloatingUIPadding

* add documentation

* revert d3 change

* don't set padding if it's not used

* put limitShift back

* update story name

* update story naming

* fix story description

* remove unstable_disableTether from public API

* docs: Styling Component (v9) now introduces shorthands (#26773)

* chore: bump storybook-addon-export-to-codesandbox to 0.8.4 (#26787)

* Restore minimum width of Details List rows to be that of the container (#24096)

* Remove override row width style to fix DetailsList layouts

* Update snapshots

* chore: better documentation for home/end behavior (#26724)

- Adds test cases for home/end hotkeys
- Updates "bounds" story with information about home/end
- Updates "default" story to include min/max props so home/end
  behavior is observable
- Changes the "keys" import for better tree-shaking

* Initialize package for storybook full source code babel preset (#26781)

* Initialize package for storybook full source code babel preset

Preparing to move storybook codesandbox code to monorepo

Addresses #26780

* api md

* fix: handle single digit text input in SpinButton (#26789)

Previously the internal state for handling SpinButton text input would
only be updated after the second value was typed by a user. This lead to
a bug where state would not be committed in some cases when a user typed
just a single value, e.g., "2".

* Coachmark reposition on page resize  (#26725)

* re-render and re-calculate bounds when page resizes

* change

* applying package updates

* applying package updates

* fix: MenuList is a single tabstop (#26803)

* fix: MenuList is a single tabstop

Since Menu needs to handle tab because it is a positionined element in a
Portal, the MenuList does not need to. Disabling tabster's default
handling for Tab in MenuList broke tabbing in that components.

Fixes this by only disabling tabster's Tab behaviour when the MenuList
is wrapped by a Menu.

* changefile

* fix snapshot

* Port babel storybook full source plugin (#26790)

* Port babel storybook full source plugin

Ports the plugin from https://github.com/microsoft/fluentui-storybook-addons/blob/main/storybook-addon-export-to-codesandbox/src/plugins/fullsource.ts

Addresses #26781

* caret for prettier

* refactor to avoid code churn

* eslint pragma

* fix syncpack

* fix deps

* Initialize react-storybook-addon-codesandbox package (#26783)

* Initialize react-storybook-addon-codesandbox package

Preparing to move storybook codesandbox code to monorepo

Addresses #26781

* Update workspace.json

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

---------

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* chore(beachball): add more ignore patterns to mitigate unwanted change file generation (#26807)

* fix(scripts-format): make prettier fail process instead of silently failing (#26806)

* fix(scripts-format): make prettier fail process instead of silently failing

* feat(scripts-format): make prettier not fail on huge file lists with --since

* chore: update prettierignore

* style: fix formatting in files that were silently passed previously

* generate change files

* fixup! style: fix formatting in files that were silently passed previously

* chore: update tooling setup for wc-3 after master update

* chore: remove change files from master

* chore(beachball): scope config only to web-components to be able to merge master udates

* fix(ci) resolve issues reported by check-packages job

* chore(stress-test): fix bad conflict resolution

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
Co-authored-by: tomi-msft <66456876+tomi-msft@users.noreply.github.com>
Co-authored-by: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Tristan Watanabe <tristan.watanabe@gmail.com>
Co-authored-by: Geoff Cox (Microsoft) <gcox@microsoft.com>
Co-authored-by: Marcos Moura <marcosvmmoura@gmail.com>
Co-authored-by: Esteban Munoz Facusse <esteban.230@hotmail.com>
Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Co-authored-by: chajun <86579954+chpalac@users.noreply.github.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>
Co-authored-by: Jiří Vyhnálek <jiri@vyhnalek.net>
Co-authored-by: Juraj Kapsiar <jurokapsiar@gmail.com>
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Sunil Surana <sunilsurana1986@gmail.com>
Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Valentina <v.kozlova13@gmail.com>
Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: Miroslav Stastny <miroslav.stastny@microsoft.com>
Co-authored-by: Silviu Alexandru Avram <silviu.avram91@gmail.com>
Co-authored-by: Mitch-At-Work <99835933+Mitch-At-Work@users.noreply.github.com>
Co-authored-by: Javier Escobar-Avila <106849132+javierems@users.noreply.github.com>
Co-authored-by: Connie Chen <33800628+conniec218@users.noreply.github.com>
Co-authored-by: Arthur Almeida (Tuka) <94864706+arthurd-micro@users.noreply.github.com>
Co-authored-by: Martin Trobäck <martin.troback@axis.com>
Co-authored-by: Marwan Fikrat <32395961+marwan38@users.noreply.github.com>
Co-authored-by: Mason Tejera <17346018+mltejera@users.noreply.github.com>
Co-authored-by: krkshitij <110246001+krkshitij@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Hensorskyy <vovchukgensorskyy@gmail.com>
Co-authored-by: Volodymyr Hensorskyi <vhensorskyi@atlassian.com>
Co-authored-by: David Zearing <dzearing@microsoft.com>
Co-authored-by: C. Perez <caperez@microsoft.com>
Co-authored-by: Jiří Vyhnálek <jirivyhnalek@microsoft.com>
Co-authored-by: Desen Meng <m@bln.cn>
Co-authored-by: Karlo Sudec <Svudec@users.noreply.github.com>
Co-authored-by: Karlo Sudec <karlo.sudec@gmail.com>
Co-authored-by: Karan Kakroo <karan_kakroo@infosys.com>
Co-authored-by: ankityadav4 <103660888+ankityadav4@users.noreply.github.com>
Co-authored-by: Amber <yuanboxue@outlook.com>
Co-authored-by: Petr Duda <peta.duda@gmail.com>
Co-authored-by: Petr Duda <petrduda@microsoft.com>
Co-authored-by: Thomas Michon <tmichon@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: v9's Provider doesn’t hydrate from SSR properly in StrictMode
4 participants