Skip to content

feat: add helper types to assist DOM element handling#24722

Merged
bsunderhus merged 1 commit intomicrosoft:masterfrom
bsunderhus:react-aria/add-helper-types
Sep 9, 2022
Merged

feat: add helper types to assist DOM element handling#24722
bsunderhus merged 1 commit intomicrosoft:masterfrom
bsunderhus:react-aria/add-helper-types

Conversation

@bsunderhus
Copy link
Contributor

New Behavior

Adds 2 helper types to assist DOM element handling on scenarios that is required to know the element type. ARIAButtonElement and ARIAButtonElementIntersection.

ARIAButtonElement

should be used on references definition for example.It's almost equivalent to: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement

function useComponent(props, ref: React.Ref<ARIAButtonElement>) {}

ARIAButtonElementIntersection

should be used on cases that narrowing down the type is required, for example, an even handler declaration. It's almost equivalent to: HTMLButtonElement & HTMLAnchorElement & HTMLDivElement

const handleClick = (event: React.MouseEvent<ARIAButtonElementIntersection>) => {
    event.currentTarget // HTMLButtonElement & HTMLAnchorElement & HTMLDivElement
}

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 8, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
78.914 kB
24.06 kB
react-alert
Alert
83.228 kB
20.889 kB
react-avatar
Avatar
48.381 kB
13.696 kB
react-avatar
AvatarGroup
14.95 kB
5.989 kB
react-avatar
AvatarGroupItem
68.349 kB
19.039 kB
react-button
Button
35.836 kB
9.59 kB
react-button
CompoundButton
42.862 kB
10.808 kB
react-button
MenuButton
38.454 kB
10.461 kB
react-button
SplitButton
45.87 kB
11.811 kB
react-button
ToggleButton
51.017 kB
11.007 kB
react-card
Card - All
67.002 kB
19.261 kB
react-card
Card
62.684 kB
18.177 kB
react-card
CardFooter
8.561 kB
3.601 kB
react-card
CardHeader
9.604 kB
3.94 kB
react-card
CardPreview
8.662 kB
3.656 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
187.656 kB
51.96 kB
react-components
react-components: FluentProvider & webLightTheme
33.359 kB
11.004 kB
react-dialog
Dialog (including children components)
80.983 kB
24.187 kB
react-menu
Menu (including children components)
115.735 kB
35.419 kB
react-menu
Menu (including selectable components)
118.934 kB
35.916 kB
react-popover
Popover
102.938 kB
31.542 kB
react-portal-compat
PortalCompatProvider
5.851 kB
1.964 kB
🤖 This report was generated against f7a7a4c28d517b09e06f4b6887959526296290d2

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 8, 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 c7cc4c8:

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

@size-auditor
Copy link

size-auditor bot commented Sep 8, 2022

Asset size changes

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

Baseline commit: d653291a07d843930da4023e599177686a1e6e1d (build)

@bsunderhus bsunderhus force-pushed the react-aria/add-helper-types branch from d7d8133 to c7cc4c8 Compare September 8, 2022 18:12
@bsunderhus bsunderhus marked this pull request as ready for review September 8, 2022 18:12
@bsunderhus bsunderhus requested a review from a team as a code owner September 8, 2022 18:12
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
SpinButton mount 3820 2491 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1318 1285 5000
Button mount 938 951 5000
FluentProvider mount 1472 1552 5000
FluentProviderWithTheme mount 633 630 10
FluentProviderWithTheme virtual-rerender 579 590 10
FluentProviderWithTheme virtual-rerender-with-unmount 1842 626 10
MakeStyles mount 1902 1920 50000
SpinButton mount 3820 2491 5000 Possible regression

@ling1726
Copy link
Contributor

ling1726 commented Sep 8, 2022

why are normal unions/intersections not enough ?

@bsunderhus
Copy link
Contributor Author

why are normal unions/intersections not enough ?

Unfortunately it wouldn't be enough as a and div are passed as Generic parameters to ensure that, for example on react-button only a is supported and not div. For that reason some verification is required to determine the union.

@bsunderhus bsunderhus merged commit 81191d9 into microsoft:master Sep 9, 2022
@bsunderhus bsunderhus deleted the react-aria/add-helper-types branch September 9, 2022 08:56
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 9, 2022
* master: (63 commits)
  feat: add helper types to assist DOM element handling (microsoft#24722)
  applying package updates
  Textarea/hc bug (microsoft#24701)
  Fix null ref in use slider (microsoft#24728)
  Add Field unit tests, and remove snapshot tests (microsoft#24706)
  Stress Test: add build commands (microsoft#24575)
  Coachmark - useOffsetHeight should cause re-render on each set state to match v7 functionality (microsoft#24702)
  Implement screener tests for Field components (microsoft#24684)
  Update Field types to clean up react-field.api.md (microsoft#24703)
  fix(Popup): remove rotate(360deg) from PopupContent content styles (microsoft#24432)
  fix(FocusZone): should reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` (microsoft#24463)
  Fix greyed out legend key contrast ratio (microsoft#24714)
  fix: Portal compat should apply `focus-visible` ponyfill (microsoft#24712)
  Fix artifact error (microsoft#24717)
  chore(react-dialog): remove localShorthands in favor of griffel shorthands (microsoft#24715)
  Skip screener checks for draft PRs with exception of appropriately la… (microsoft#24694)
  fix: Remove provider classname from focus styles (microsoft#24710)
  feat: autocontrolled `useTable` hook (microsoft#24688)
  feat: add dialog properties to getNativeElementProps (microsoft#24698)
  Using migrate rather than upgrade term (microsoft#24695)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants