Skip to content

Conversation

@miroslavstastny
Copy link
Member

@miroslavstastny miroslavstastny commented Oct 17, 2022

Previous Behavior

Without specifying appearance, <Input> defaults to appearance="outline"

New Behavior

It is possible to pass overrides to the components using react context:

// referentially stable overrides
overrides = {
  inputDefaultAppearance: 'filled-darker'
}

//...

<FluentProvider unstable_overrides={overrides}>
  <Input /> /* <- Input now defaults to appearance="filled-darker"
</FluentProvider>

The override affects the following components:

  • Input
  • TextArea
  • Select
  • SpinButton
  • Combobox
  • Dropdown

Motivation

Without specifying appearance, <Input> defaults to appearance="outline"
For one specific application, the appearance should default to appearance="filled-darker".

This customization cannot be achieved using token overrides.

Also components wrapping or recomposition cannot be used as that would not affect UI authored out of the application repo (dependencies).

Future of the work

The purpose of the PR is to:

  1. unblock the partner (temporarily)
  2. proof-of-concept of component overrides through context. Based on RFC RFC appearance migration #24181. Another (hypothetical) use case might be to override icons rendered inside a component (chevron in Accordion).

This is intentionally marked as unstable and not documented. If we decide to change the pattern, we can do so.

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 17, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Button, FluentProvider & webLightTheme
60.071 kB
16.745 kB
60.308 kB
16.821 kB
237 B
76 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
187.843 kB
52.775 kB
188.08 kB
52.847 kB
237 B
72 B
react-components
react-components: FluentProvider & webLightTheme
34.427 kB
11.354 kB
34.665 kB
11.427 kB
238 B
73 B
react-input
Input
24.673 kB
8.065 kB
24.848 kB
8.136 kB
175 B
71 B
react-input
InputField
34.634 kB
10.925 kB
34.812 kB
10.977 kB
178 B
52 B
react-provider
FluentProvider
16.494 kB
6.158 kB
16.732 kB
6.221 kB
238 B
63 B
react-select
Select
23.963 kB
8.206 kB
24.14 kB
8.271 kB
177 B
65 B
react-select
SelectField
32.961 kB
10.616 kB
33.139 kB
10.67 kB
178 B
54 B
react-spinbutton
SpinButton
44.989 kB
12.975 kB
45.161 kB
13.035 kB
172 B
60 B
react-spinbutton
SpinButtonField
54.01 kB
15.427 kB
54.183 kB
15.478 kB
173 B
51 B
react-textarea
Textarea
26.156 kB
8.508 kB
26.331 kB
8.581 kB
175 B
73 B
react-textarea
TextareaField
36.117 kB
11.328 kB
36.295 kB
11.386 kB
178 B
58 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-alert
Alert
86.068 kB
21.706 kB
react-avatar
Avatar
52.84 kB
14.703 kB
react-avatar
AvatarGroup
15.42 kB
6.167 kB
react-avatar
AvatarGroupItem
69.058 kB
19 kB
react-button
Button
33.487 kB
8.822 kB
react-button
CompoundButton
40.507 kB
10.172 kB
react-button
MenuButton
38.167 kB
10.153 kB
react-button
SplitButton
45.648 kB
11.564 kB
react-button
ToggleButton
49.45 kB
10.849 kB
react-card
Card - All
78.003 kB
22.511 kB
react-card
Card
72.92 kB
21.108 kB
react-card
CardFooter
9.04 kB
3.807 kB
react-card
CardHeader
10.833 kB
4.461 kB
react-card
CardPreview
9.847 kB
4.159 kB
react-checkbox
Checkbox
32.686 kB
10.186 kB
react-checkbox
CheckboxField
39.484 kB
12.011 kB
react-combobox
Combobox (including child components)
80.873 kB
25.955 kB
react-combobox
ComboboxField
78.755 kB
26.093 kB
react-combobox
Dropdown (including child components)
79.541 kB
25.685 kB
react-dialog
Dialog (including children components)
83.492 kB
24.931 kB
react-infobutton
InfoButton
118.572 kB
36.062 kB
react-link
Link
12.285 kB
5.063 kB
react-menu
Menu (including children components)
118.138 kB
36.54 kB
react-menu
Menu (including selectable components)
121.207 kB
37.05 kB
react-overflow
hooks only
11.061 kB
4.21 kB
react-persona
Persona
58.877 kB
16.363 kB
react-popover
Popover
105.69 kB
32.582 kB
react-portal
Portal
11.122 kB
4.102 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-progress
ProgressField
23.623 kB
8.255 kB
react-radio
Radio
32.275 kB
10.483 kB
react-radio
RadioGroup
14.746 kB
5.902 kB
react-radio
RadioGroupField
24.759 kB
8.962 kB
react-slider
Slider
32.691 kB
10.42 kB
react-slider
SliderField
42.426 kB
13.274 kB
react-switch
Switch
27.819 kB
8.622 kB
react-switch
SwitchField
34.51 kB
10.441 kB
react-table
DataGrid
129.345 kB
35.221 kB
react-table
Table (Primitives only)
42.971 kB
11.781 kB
react-table
Table as DataGrid
127.592 kB
32.876 kB
react-table
Table (Selection only)
81.028 kB
20.138 kB
react-table
Table (Sort only)
80.457 kB
19.984 kB
react-tooltip
Tooltip
43.557 kB
15.235 kB
🤖 This report was generated against 17ce027879486fa8d2a775864cb119fb194fab8b

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 17, 2022

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 6bb8935:

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

@size-auditor
Copy link

size-auditor bot commented Oct 17, 2022

Asset size changes

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

Baseline commit: 17ce027879486fa8d2a775864cb119fb194fab8b (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 17, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1213 1170 5000
Button mount 827 832 5000
FluentProvider mount 1442 1416 5000
FluentProviderWithTheme mount 558 565 10
FluentProviderWithTheme virtual-rerender 521 533 10
FluentProviderWithTheme virtual-rerender-with-unmount 563 562 10
InfoButton mount 504 495 5000
MakeStyles mount 1686 1699 50000
Persona mount 2720 2775 5000
SpinButton mount 2248 2296 5000

@miroslavstastny miroslavstastny changed the title PoC: add overrides context to allow per-component overrides Add overrides context to allow Input appearance overrides Jan 24, 2023
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 24, 2023

🕵 FluentUI-v0 No visual regressions between this PR and main

@miroslavstastny miroslavstastny marked this pull request as ready for review January 24, 2023 18:19
@miroslavstastny
Copy link
Member Author

Combobox and Dropdown would require more changes as those currently do not have VR tests. To keep this PR at reasonable number of files affected, those components will be addressed in a separate PR.

@miroslavstastny miroslavstastny merged commit 6f29c8f into microsoft:master Jan 25, 2023
@miroslavstastny miroslavstastny deleted the proto/overrides-context branch January 25, 2023 15:45
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
…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
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 <[email protected]>

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

Co-authored-by: Sean Monahan <[email protected]>

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

Co-authored-by: Sean Monahan <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Oleksandr Fediashov <[email protected]>

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

Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Fluent UI Build <[email protected]>
Co-authored-by: Amber <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

Co-authored-by: Miroslav Stastny <[email protected]>

* 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 <[email protected]>
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 <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

Co-authored-by: ling1726 <[email protected]>

* 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] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
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 <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

Co-authored-by: David Zearing <[email protected]>

* feat: add IdPrefixProvider (#26496)

* feat: add IdPrefixProvider

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

Co-authored-by: Makoto Morimoto <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Makoto Morimoto <[email protected]>

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

Co-authored-by: Makoto Morimoto <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

---------

Co-authored-by: Ben Howell <[email protected]>
Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>

* 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 <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

* Remove wrong context export

* updated API

* components API update

---------

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

* docs: add description to code blocks

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

---------

Co-authored-by: Miroslav Stastny <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* update the addon

---------

Co-authored-by: Martin Hochel <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: ling1726 <[email protected]>

* add a note about imports

* rename to "Performance caveat"

* add note about shorthands

* Apply suggestions from code review

Co-authored-by: Miroslav Stastny <[email protected]>

* add a link to makeResetStyles section

* update structure

* Apply suggestions from code review

Co-authored-by: ling1726 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

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

* improve base examples

* mention FluentProvider in RTL section

* update TOC

---------

Co-authored-by: Miroslav Stastny <[email protected]>
Co-authored-by: ling1726 <[email protected]>
Co-authored-by: Amber <[email protected]>
Co-authored-by: Sean Monahan <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

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

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

Co-authored-by: Martin Hochel <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* update md

---------

Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>
Co-authored-by: Fluent UI Build <[email protected]>

* 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] <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

---------

Co-authored-by: Martin Hochel <[email protected]>

* 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] <[email protected]>
Co-authored-by: Fluent UI Build <[email protected]>
Co-authored-by: Sarah Higley <[email protected]>
Co-authored-by: Ben Howell <[email protected]>
Co-authored-by: ling1726 <[email protected]>
Co-authored-by: Micah Godbolt <[email protected]>
Co-authored-by: tomi-msft <[email protected]>
Co-authored-by: Jacqueline Gaherity <[email protected]>
Co-authored-by: Jeff Smith <[email protected]>
Co-authored-by: Sean Monahan <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>
Co-authored-by: Tristan Watanabe <[email protected]>
Co-authored-by: Geoff Cox (Microsoft) <[email protected]>
Co-authored-by: Marcos Moura <[email protected]>
Co-authored-by: Esteban Munoz Facusse <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>
Co-authored-by: Bernardo Sunderhus <[email protected]>
Co-authored-by: chajun <[email protected]>
Co-authored-by: Amber <[email protected]>
Co-authored-by: Jiří Vyhnálek <[email protected]>
Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: Sunil Surana <[email protected]>
Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>
Co-authored-by: Valentina <[email protected]>
Co-authored-by: Miroslav Stastny <[email protected]>
Co-authored-by: Miroslav Stastny <[email protected]>
Co-authored-by: Silviu Alexandru Avram <[email protected]>
Co-authored-by: Mitch-At-Work <[email protected]>
Co-authored-by: Javier Escobar-Avila <[email protected]>
Co-authored-by: Connie Chen <[email protected]>
Co-authored-by: Arthur Almeida (Tuka) <[email protected]>
Co-authored-by: Martin Trobäck <[email protected]>
Co-authored-by: Marwan Fikrat <[email protected]>
Co-authored-by: Mason Tejera <[email protected]>
Co-authored-by: krkshitij <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Hensorskyy <[email protected]>
Co-authored-by: Volodymyr Hensorskyi <[email protected]>
Co-authored-by: David Zearing <[email protected]>
Co-authored-by: C. Perez <[email protected]>
Co-authored-by: Jiří Vyhnálek <[email protected]>
Co-authored-by: Desen Meng <[email protected]>
Co-authored-by: Karlo Sudec <[email protected]>
Co-authored-by: Karlo Sudec <[email protected]>
Co-authored-by: Karan Kakroo <[email protected]>
Co-authored-by: ankityadav4 <[email protected]>
Co-authored-by: Amber <[email protected]>
Co-authored-by: Petr Duda <[email protected]>
Co-authored-by: Petr Duda <[email protected]>
Co-authored-by: Thomas Michon <[email protected]>
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 <[email protected]>

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

Co-authored-by: Sean Monahan <[email protected]>

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

Co-authored-by: Sean Monahan <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Oleksandr Fediashov <[email protected]>

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

Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Fluent UI Build <[email protected]>
Co-authored-by: Amber <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

Co-authored-by: Miroslav Stastny <[email protected]>

* 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 <[email protected]>
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 <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

Co-authored-by: ling1726 <[email protected]>

* 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] <[email protected]>

Signed-off-by: dependabot[bot] <[email protected]>
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 <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

Co-authored-by: David Zearing <[email protected]>

* feat: add IdPrefixProvider (#26496)

* feat: add IdPrefixProvider

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

Co-authored-by: Makoto Morimoto <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Makoto Morimoto <[email protected]>

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

Co-authored-by: Makoto Morimoto <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

---------

Co-authored-by: Ben Howell <[email protected]>
Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>

* 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 <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>

* Remove wrong context export

* updated API

* components API update

---------

Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

* docs: add description to code blocks

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

---------

Co-authored-by: Miroslav Stastny <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* update the addon

---------

Co-authored-by: Martin Hochel <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: ling1726 <[email protected]>

* add a note about imports

* rename to "Performance caveat"

* add note about shorthands

* Apply suggestions from code review

Co-authored-by: Miroslav Stastny <[email protected]>

* add a link to makeResetStyles section

* update structure

* Apply suggestions from code review

Co-authored-by: ling1726 <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

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

* improve base examples

* mention FluentProvider in RTL section

* update TOC

---------

Co-authored-by: Miroslav Stastny <[email protected]>
Co-authored-by: ling1726 <[email protected]>
Co-authored-by: Amber <[email protected]>
Co-authored-by: Sean Monahan <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>

* 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 <[email protected]>

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

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

Co-authored-by: Martin Hochel <[email protected]>

* 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 <[email protected]>

* 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 <[email protected]>

* update md

---------

Co-authored-by: Oleksandr Fediashov <[email protected]>

* 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 <[email protected]>
Co-authored-by: Fluent UI Build <[email protected]>

* 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] <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

---------

Co-authored-by: Martin Hochel <[email protected]>

* 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] <[email protected]>
Co-authored-by: Fluent UI Build <[email protected]>
Co-authored-by: Sarah Higley <[email protected]>
Co-authored-by: Ben Howell <[email protected]>
Co-authored-by: ling1726 <[email protected]>
Co-authored-by: Micah Godbolt <[email protected]>
Co-authored-by: tomi-msft <[email protected]>
Co-authored-by: Jacqueline Gaherity <[email protected]>
Co-authored-by: Jeff Smith <[email protected]>
Co-authored-by: Sean Monahan <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>
Co-authored-by: Tristan Watanabe <[email protected]>
Co-authored-by: Geoff Cox (Microsoft) <[email protected]>
Co-authored-by: Marcos Moura <[email protected]>
Co-authored-by: Esteban Munoz Facusse <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>
Co-authored-by: Bernardo Sunderhus <[email protected]>
Co-authored-by: chajun <[email protected]>
Co-authored-by: Amber <[email protected]>
Co-authored-by: Jiří Vyhnálek <[email protected]>
Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: Sunil Surana <[email protected]>
Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>
Co-authored-by: Makoto Morimoto <[email protected]>
Co-authored-by: Valentina <[email protected]>
Co-authored-by: Miroslav Stastny <[email protected]>
Co-authored-by: Miroslav Stastny <[email protected]>
Co-authored-by: Silviu Alexandru Avram <[email protected]>
Co-authored-by: Mitch-At-Work <[email protected]>
Co-authored-by: Javier Escobar-Avila <[email protected]>
Co-authored-by: Connie Chen <[email protected]>
Co-authored-by: Arthur Almeida (Tuka) <[email protected]>
Co-authored-by: Martin Trobäck <[email protected]>
Co-authored-by: Marwan Fikrat <[email protected]>
Co-authored-by: Mason Tejera <[email protected]>
Co-authored-by: krkshitij <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Hensorskyy <[email protected]>
Co-authored-by: Volodymyr Hensorskyi <[email protected]>
Co-authored-by: David Zearing <[email protected]>
Co-authored-by: C. Perez <[email protected]>
Co-authored-by: Jiří Vyhnálek <[email protected]>
Co-authored-by: Desen Meng <[email protected]>
Co-authored-by: Karlo Sudec <[email protected]>
Co-authored-by: Karlo Sudec <[email protected]>
Co-authored-by: Karan Kakroo <[email protected]>
Co-authored-by: ankityadav4 <[email protected]>
Co-authored-by: Amber <[email protected]>
Co-authored-by: Petr Duda <[email protected]>
Co-authored-by: Petr Duda <[email protected]>
Co-authored-by: Thomas Michon <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants