├── .browserslistrc
├── .circleci
└── config.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .github
├── CODEOWNERS
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE
│ ├── Bug_report.md
│ ├── Feature_request.md
│ └── Support_question.md
├── PULL_REQUEST_TEMPLATE.md
├── add-a-feature.md
├── config.yml
├── document-a-feature.md
├── release-a-package.md
├── setup-local-development.md
├── stale.yml
├── test-a-feature.md
└── workflows
│ └── screener.yml
├── .gitignore
├── .gulp.js
├── .nowignore
├── .prettierignore
├── .prettierrc.json
├── CHANGELOG.md
├── LICENSE.md
├── MANIFESTO.md
├── README.md
├── api-extractor.common.json
├── azure-pipelines.yml
├── babel.config.js
├── build
├── .eslintrc.json
├── babel
│ ├── index.js
│ ├── register.js
│ ├── transform-star-import-plugin.ts
│ └── types.ts
├── config.ts
├── dangerjs
│ ├── checkChangelog.ts
│ ├── checkPerfRegressions.ts
│ ├── detectChangedDependencies.ts
│ ├── detectNonApprovedDependencies
│ │ ├── approvedPackages.ts
│ │ ├── index.ts
│ │ └── utils
│ │ │ ├── getFailedPackageVersionConstraints.ts
│ │ │ ├── getRuntimeDependencies.ts
│ │ │ ├── getVersionConstrains.ts
│ │ │ ├── index.ts
│ │ │ └── packageNameUtils.ts
│ └── types.ts
├── eslint
│ └── index.js
├── gulp
│ ├── plugins
│ │ ├── gulp-component-menu-behaviors.ts
│ │ ├── gulp-component-menu.ts
│ │ ├── gulp-doctoc.ts
│ │ ├── gulp-example-menu.ts
│ │ ├── gulp-example-source.ts
│ │ ├── gulp-jest.ts
│ │ ├── gulp-react-docgen.ts
│ │ ├── gulp-webpack.ts
│ │ └── util
│ │ │ ├── docgen.ts
│ │ │ ├── getComponentInfo.ts
│ │ │ ├── getRelativePathToSourceFile.ts
│ │ │ ├── getShorthandInfo.ts
│ │ │ ├── index.ts
│ │ │ ├── parseBuffer.ts
│ │ │ ├── parseDefaultValue.ts
│ │ │ ├── parseDocSection.ts
│ │ │ ├── parseDocblock.ts
│ │ │ ├── parseType.ts
│ │ │ └── parseTypeAnnotation.ts
│ ├── serve.ts
│ ├── sh.ts
│ └── tasks
│ │ ├── bundle.ts
│ │ ├── docs.ts
│ │ ├── perf.ts
│ │ ├── screener.ts
│ │ ├── stats.ts
│ │ ├── test-circulars
│ │ ├── config.ts
│ │ ├── index.ts
│ │ └── utils.ts
│ │ ├── test-dependencies
│ │ ├── index.ts
│ │ └── utils.ts
│ │ ├── test-e2e.ts
│ │ ├── test-projects.ts
│ │ ├── test-projects
│ │ ├── .eslintrc.json
│ │ ├── cra
│ │ │ └── App.tsx
│ │ ├── nextjs
│ │ │ └── index.js
│ │ ├── rollup
│ │ │ ├── app.js
│ │ │ ├── index.html
│ │ │ └── rollup.config.js
│ │ └── typings
│ │ │ ├── index.tsx
│ │ │ └── tsconfig.json
│ │ └── test-unit.ts
├── jest
│ ├── index.js
│ └── setupTests.js
├── package.json
├── puppeteer.config.ts
├── screener
│ ├── screener.config.js
│ ├── screener.states.ts
│ └── screener.steps.ts
├── tsconfig.common.json
├── tsconfig.json
├── tslint
│ └── tslint.json
├── webpack.config.e2e.ts
├── webpack.config.perf.ts
├── webpack.config.stats.ts
├── webpack.config.ts
└── webpack.config.umd.ts
├── codecov.yml
├── dangerfile.ts
├── docs
├── .eslintignore
├── .eslintrc.json
├── package.json
├── src
│ ├── 404.html
│ ├── add-yours.png
│ ├── amazon-logo.png
│ ├── app.tsx
│ ├── bundleStats.json
│ ├── components
│ │ ├── CategoryColorSchemes.tsx
│ │ ├── ColorBox.tsx
│ │ ├── ColorSchemes.tsx
│ │ ├── ColorVariants.tsx
│ │ ├── ComponentBestPractices.tsx
│ │ ├── ComponentDoc
│ │ │ ├── BehaviorCard.tsx
│ │ │ ├── BehaviorDescription.tsx
│ │ │ ├── ComponentBestPractices.tsx
│ │ │ ├── ComponentControls
│ │ │ │ ├── ComponentControls.tsx
│ │ │ │ ├── ComponentControlsCodeSandbox
│ │ │ │ │ ├── ComponentControlsCodeSandbox.tsx
│ │ │ │ │ ├── createPackageJson.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── indexTemplates.ts
│ │ │ │ ├── ComponentControlsCopyLink.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ComponentDoc.tsx
│ │ │ ├── ComponentDocAccessibility.tsx
│ │ │ ├── ComponentDocLinks.tsx
│ │ │ ├── ComponentDocSee.tsx
│ │ │ ├── ComponentExample
│ │ │ │ ├── ComponentExample.tsx
│ │ │ │ ├── ComponentExampleColorPicker.tsx
│ │ │ │ ├── ComponentExampleTitle.tsx
│ │ │ │ ├── ComponentExampleVariable.tsx
│ │ │ │ ├── ComponentExampleVariables.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ComponentExamples.tsx
│ │ │ ├── ComponentPerfExample
│ │ │ │ ├── ComponentPerfChart.tsx
│ │ │ │ ├── ComponentPerfExample.tsx
│ │ │ │ └── index.ts
│ │ │ ├── ComponentProp
│ │ │ │ ├── ComponentPropExtra.tsx
│ │ │ │ ├── ComponentPropFunctionSignature.tsx
│ │ │ │ └── ComponentPropName.tsx
│ │ │ ├── ComponentProps
│ │ │ │ ├── ComponentPropCard.tsx
│ │ │ │ ├── ComponentProps.tsx
│ │ │ │ ├── ComponentPropsOutline.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ComponentPropsTable
│ │ │ │ ├── ComponentPropsRow.tsx
│ │ │ │ ├── ComponentPropsTable.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ComponentSidebar
│ │ │ │ ├── ComponentSidebar.tsx
│ │ │ │ ├── ComponentSidebarSection.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ComponentSourceManager
│ │ │ │ ├── ComponentSourceManager.ts
│ │ │ │ ├── componentAPIs.ts
│ │ │ │ ├── getExampeModule.ts
│ │ │ │ └── index.ts
│ │ │ ├── ContributionPrompt.tsx
│ │ │ ├── ExampleSection.tsx
│ │ │ ├── InlineMarkdown.tsx
│ │ │ ├── NonPublicSection.tsx
│ │ │ ├── PerfChart
│ │ │ │ ├── PerfChart.tsx
│ │ │ │ ├── PerfChartTooltip.tsx
│ │ │ │ ├── PerfDataContext.ts
│ │ │ │ ├── PerfDataProvider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── usePerfData.ts
│ │ │ ├── Suggestions.tsx
│ │ │ ├── index.tsx
│ │ │ ├── useAccessibilityKnob.ts
│ │ │ └── useComponentProps.ts
│ │ ├── ComponentPlayground
│ │ │ ├── ComponentPlayground.tsx
│ │ │ ├── ComponentPlaygroundSnippet.tsx
│ │ │ ├── ComponentPlaygroundTemplate.tsx
│ │ │ ├── componentGenerators.ts
│ │ │ ├── createHookGenerator.ts
│ │ │ ├── propGenerators.tsx
│ │ │ ├── typeGenerators.ts
│ │ │ └── usePlaygroundComponent.tsx
│ │ ├── DocPage
│ │ │ ├── DocPage.tsx
│ │ │ └── index.tsx
│ │ ├── DocsBehaviorRoot.tsx
│ │ ├── DocsLayout.tsx
│ │ ├── DocsRoot.tsx
│ │ ├── Editor
│ │ │ ├── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── ExampleSnippet
│ │ │ ├── ExampleSnippet.tsx
│ │ │ ├── index.ts
│ │ │ └── renderElementToJSX.ts
│ │ ├── ExternalExampleLayout.tsx
│ │ ├── Fader.tsx
│ │ ├── GuidesNavigationFooter.tsx
│ │ ├── Logo
│ │ │ └── Logo.tsx
│ │ ├── MarkdownPage.tsx
│ │ ├── Playground
│ │ │ └── renderConfig.ts
│ │ ├── Sidebar
│ │ │ └── Sidebar.tsx
│ │ └── VariableResolver
│ │ │ ├── VariableResolver.tsx
│ │ │ ├── useClassNamesListener.ts
│ │ │ └── useEnhancedRenderer.ts
│ ├── config.ts
│ ├── context
│ │ ├── ExampleContext.ts
│ │ └── ThemeContext.tsx
│ ├── examples
│ │ └── components
│ │ │ ├── Accordion
│ │ │ ├── BestPractices
│ │ │ │ └── AccordionBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── AccordionMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── AccordionExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── AccordionExample.shorthand.tsx
│ │ │ │ ├── AccordionExclusiveExample.shorthand.tsx
│ │ │ │ ├── AccordionExclusiveExpandedExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── AccordionPanelCustomContentExample.shorthand.tsx
│ │ │ │ ├── AccordionPanelCustomTitleExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Alert
│ │ │ ├── BestPractices
│ │ │ │ └── AlertBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── AlertMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── AlertExample.rtl.tsx
│ │ │ │ ├── AlertExampleChildren.rtl.tsx
│ │ │ │ ├── AlertExampleDismissAction.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Slots
│ │ │ │ ├── AlertExampleActions.shorthand.tsx
│ │ │ │ ├── AlertExampleDismissAction.shorthand.tsx
│ │ │ │ ├── AlertExampleHeader.shorthand.tsx
│ │ │ │ ├── AlertExampleHeader.tsx
│ │ │ │ ├── AlertExampleIcon.shorthand.tsx
│ │ │ │ ├── AlertExampleIcon.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── State
│ │ │ │ ├── AlertExampleVisible.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── AlertExample.shorthand.tsx
│ │ │ │ ├── AlertExample.tsx
│ │ │ │ ├── AlertExampleDismissible.shorthand.steps.ts
│ │ │ │ ├── AlertExampleDismissible.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── AlertExampleDismissActions.shorthand.tsx
│ │ │ │ ├── AlertExampleImportantMessage.shorthand.tsx
│ │ │ │ ├── AlertExampleImportantMessage.tsx
│ │ │ │ ├── AlertExampleWidth.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── AlertExampleAttached.shorthand.tsx
│ │ │ │ ├── AlertExampleAttached.tsx
│ │ │ │ ├── AlertExampleDanger.shorthand.steps.ts
│ │ │ │ ├── AlertExampleDanger.shorthand.tsx
│ │ │ │ ├── AlertExampleDanger.tsx
│ │ │ │ ├── AlertExampleFitted.shorthand.tsx
│ │ │ │ ├── AlertExampleInfo.shorthand.steps.ts
│ │ │ │ ├── AlertExampleInfo.shorthand.tsx
│ │ │ │ ├── AlertExampleInfo.tsx
│ │ │ │ ├── AlertExampleOofs.shorthand.steps.ts
│ │ │ │ ├── AlertExampleOofs.shorthand.tsx
│ │ │ │ ├── AlertExampleOofs.tsx
│ │ │ │ ├── AlertExampleSuccess.shorthand.tsx
│ │ │ │ ├── AlertExampleSuccess.tsx
│ │ │ │ ├── AlertExampleUrgent.shorthand.steps.ts
│ │ │ │ ├── AlertExampleUrgent.shorthand.tsx
│ │ │ │ ├── AlertExampleUrgent.tsx
│ │ │ │ ├── AlertExampleWarning.shorthand.tsx
│ │ │ │ ├── AlertExampleWarning.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── Animation
│ │ │ ├── Performance
│ │ │ │ └── AnimationMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── AnimationExample.tsx
│ │ │ │ ├── AnimationExampleDelay.tsx
│ │ │ │ ├── AnimationExampleDirection.tsx
│ │ │ │ ├── AnimationExampleDuration.tsx
│ │ │ │ ├── AnimationExampleFillMode.tsx
│ │ │ │ ├── AnimationExampleIterationCount.tsx
│ │ │ │ ├── AnimationExampleKeyframeParams.tsx
│ │ │ │ ├── AnimationExamplePlayState.tsx
│ │ │ │ ├── AnimationExampleTimingFunction.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── AnimationExampleVisible.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Attachment
│ │ │ ├── Performance
│ │ │ │ ├── AttachmentMinimal.perf.tsx
│ │ │ │ ├── AttachmentSlots.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── AttachmentExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Slots
│ │ │ │ ├── AttachmentActionExample.shorthand.steps.ts
│ │ │ │ ├── AttachmentActionExample.shorthand.tsx
│ │ │ │ ├── AttachmentDescriptionExample.shorthand.tsx
│ │ │ │ ├── AttachmentHeaderExample.shorthand.tsx
│ │ │ │ ├── AttachmentIconExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── AttachmentExample.shorthand.tsx
│ │ │ │ ├── AttachmentProgressExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── AttachmentActionableExample.shorthand.steps.ts
│ │ │ │ ├── AttachmentActionableExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── Avatar
│ │ │ ├── Performance
│ │ │ │ └── AvatarMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── AvatarExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── AvatarExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── AvatarUsageExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── AvatarExampleExcludedInitials.shorthand.tsx
│ │ │ │ ├── AvatarExampleGetInitials.shorthand.tsx
│ │ │ │ ├── AvatarExampleImage.shorthand.tsx
│ │ │ │ ├── AvatarExampleImageCustomization.shorthand.tsx
│ │ │ │ ├── AvatarExampleLabel.shorthand.tsx
│ │ │ │ ├── AvatarExampleName.shorthand.tsx
│ │ │ │ ├── AvatarExampleSize.shorthand.tsx
│ │ │ │ ├── AvatarExampleStatus.shorthand.tsx
│ │ │ │ ├── AvatarExampleStatusCustomization.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Box
│ │ │ ├── Performance
│ │ │ │ └── BoxMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── BoxExample.shorthand.tsx
│ │ │ │ ├── BoxExample.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Button
│ │ │ ├── BestPractices
│ │ │ │ └── ButtonBestPractices.tsx
│ │ │ ├── Groups
│ │ │ │ ├── ButtonGroupCircularExample.shorthand.steps.ts
│ │ │ │ ├── ButtonGroupCircularExample.shorthand.tsx
│ │ │ │ ├── ButtonGroupExample.shorthand.steps.ts
│ │ │ │ ├── ButtonGroupExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ ├── ButtonMinimal.perf.tsx
│ │ │ │ ├── ButtonSlots.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── ButtonExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── ButtonExampleDisabled.shorthand.steps.ts
│ │ │ │ ├── ButtonExampleDisabled.shorthand.tsx
│ │ │ │ ├── ButtonExampleDisabled.tsx
│ │ │ │ ├── ButtonExampleLoading.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ButtonExample.shorthand.steps.ts
│ │ │ │ ├── ButtonExample.shorthand.tsx
│ │ │ │ ├── ButtonExample.tsx
│ │ │ │ ├── ButtonExampleEmphasis.shorthand.tsx
│ │ │ │ ├── ButtonExampleEmphasis.tsx
│ │ │ │ ├── ButtonExampleIconOnly.shorthand.tsx
│ │ │ │ ├── ButtonExampleIconOnly.tsx
│ │ │ │ ├── ButtonExampleInverted.tsx
│ │ │ │ ├── ButtonExampleText.shorthand.steps.ts
│ │ │ │ ├── ButtonExampleText.shorthand.tsx
│ │ │ │ ├── ButtonExampleText.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── ButtonExampleContentAndIcon.shorthand.steps.ts
│ │ │ │ ├── ButtonExampleContentAndIcon.shorthand.tsx
│ │ │ │ ├── ButtonExampleContentAndIcon.tsx
│ │ │ │ ├── ButtonExampleOverflow.shorthand.tsx
│ │ │ │ ├── ButtonExampleOverflow.tsx
│ │ │ │ ├── ButtonExampleWithTooltip.shorthand.steps.ts
│ │ │ │ ├── ButtonExampleWithTooltip.shorthand.tsx
│ │ │ │ ├── ButtonUsageExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── ButtonExampleCircular.shorthand.tsx
│ │ │ │ ├── ButtonExampleCircular.tsx
│ │ │ │ ├── ButtonExampleFluid.shorthand.tsx
│ │ │ │ ├── ButtonExampleFluid.tsx
│ │ │ │ ├── ButtonExampleSize.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── Carousel
│ │ │ ├── BestPractices
│ │ │ │ └── CarouselBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── CarouselMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── CarouselExample.tsx
│ │ │ │ ├── CarouselPaginationExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── CarouselCircularExample.tsx
│ │ │ │ ├── CarouselExampleWithFocusableElements.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Chat
│ │ │ ├── Content
│ │ │ │ ├── ChatExampleActions.shorthand.steps.ts
│ │ │ │ ├── ChatExampleActions.shorthand.tsx
│ │ │ │ ├── ChatExampleReactionGroup.shorthand.tsx
│ │ │ │ ├── ChatExampleReactionGroupMeReacting.shorthand.steps.ts
│ │ │ │ ├── ChatExampleReactionGroupMeReacting.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ ├── ChatDuplicateMessages.perf.tsx
│ │ │ │ ├── ChatMinimal.perf.tsx
│ │ │ │ ├── ChatWithPopover.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── ChatExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ChatExample.shorthand.steps.ts
│ │ │ │ ├── ChatExample.shorthand.tsx
│ │ │ │ ├── ChatExampleContentPosition.shorthand.tsx
│ │ │ │ ├── ChatMessageExampleBadge.shorthand.steps.ts
│ │ │ │ ├── ChatMessageExampleBadge.shorthand.tsx
│ │ │ │ ├── ChatMessageExampleStyled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── ChatExampleInScrollable.shorthand.steps.ts
│ │ │ │ ├── ChatExampleInScrollable.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Checkbox
│ │ │ ├── Performance
│ │ │ │ └── CheckboxMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── CheckboxExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Slots
│ │ │ │ ├── CheckboxExampleLabel.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── CheckboxExampleChecked.shorthand.tsx
│ │ │ │ ├── CheckboxExampleDisabled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── CheckboxExample.shorthand.steps.ts
│ │ │ │ ├── CheckboxExample.shorthand.tsx
│ │ │ │ ├── CheckboxExampleToggle.shorthand.steps.ts
│ │ │ │ ├── CheckboxExampleToggle.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── Dialog
│ │ │ ├── BestPractices
│ │ │ │ └── DialogBestPractices.tsx
│ │ │ ├── Content
│ │ │ │ ├── DialogExampleContent.shorthand.steps.ts
│ │ │ │ ├── DialogExampleContent.shorthand.tsx
│ │ │ │ ├── DialogExampleFooter.shorthand.steps.ts
│ │ │ │ ├── DialogExampleFooter.shorthand.tsx
│ │ │ │ ├── DialogExampleFullWidth.shorthand.steps.ts
│ │ │ │ ├── DialogExampleFullWidth.shorthand.tsx
│ │ │ │ ├── DialogExampleHeaderAction.shorthand.steps.ts
│ │ │ │ ├── DialogExampleHeaderAction.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ └── DialogMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── DialogExample.rtl.steps.ts
│ │ │ │ ├── DialogExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── DialogExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── DialogExampleCallbacks.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── DialogExampleBackdrop.shorthand.steps.ts
│ │ │ │ ├── DialogExampleBackdrop.shorthand.tsx
│ │ │ │ ├── DialogExampleScroll.shorthand.steps.ts
│ │ │ │ ├── DialogExampleScroll.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── Divider
│ │ │ ├── Performance
│ │ │ │ ├── DividerMinimal.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── DividerExample.rtl.steps.ts
│ │ │ │ ├── DividerExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── DividerExample.shorthand.steps.ts
│ │ │ │ ├── DividerExample.shorthand.tsx
│ │ │ │ ├── DividerExampleContent.shorthand.steps.ts
│ │ │ │ ├── DividerExampleContent.shorthand.tsx
│ │ │ │ ├── DividerExampleContent.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── DividerExampleColor.shorthand.steps.ts
│ │ │ │ ├── DividerExampleColor.shorthand.tsx
│ │ │ │ ├── DividerExampleFitted.shorthand.steps.ts
│ │ │ │ ├── DividerExampleFitted.shorthand.tsx
│ │ │ │ ├── DividerExampleImportant.shorthand.steps.ts
│ │ │ │ ├── DividerExampleImportant.shorthand.tsx
│ │ │ │ ├── DividerExampleImportant.tsx
│ │ │ │ ├── DividerExampleSize.shorthand.steps.ts
│ │ │ │ ├── DividerExampleSize.shorthand.tsx
│ │ │ │ ├── DividerExampleSize.tsx
│ │ │ │ ├── DividerExampleVertical.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Dropdown
│ │ │ ├── BestPractices
│ │ │ │ └── DropdownBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ ├── DropdownManyItems.perf.tsx
│ │ │ │ ├── DropdownMinimal.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── DropdownExample.rtl.steps.ts
│ │ │ │ ├── DropdownExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── State
│ │ │ │ ├── DropdownExampleLoading.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── DropdownExample.shorthand.steps.ts
│ │ │ │ ├── DropdownExample.shorthand.tsx
│ │ │ │ ├── DropdownExampleClearable.shorthand.steps.ts
│ │ │ │ ├── DropdownExampleClearable.shorthand.tsx
│ │ │ │ ├── DropdownExampleInline.shorthand.tsx
│ │ │ │ ├── DropdownExampleMultiple.shorthand.steps.ts
│ │ │ │ ├── DropdownExampleMultiple.shorthand.tsx
│ │ │ │ ├── DropdownExampleSearch.shorthand.tsx
│ │ │ │ ├── DropdownExampleSearchMultiple.shorthand.steps.ts
│ │ │ │ ├── DropdownExampleSearchMultiple.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── DropdownExampleControlled.shorthand.tsx
│ │ │ │ ├── DropdownExampleRender.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── DropdownExampleOffset.shorthand.tsx
│ │ │ │ ├── DropdownExamplePosition.shorthand.tsx
│ │ │ │ ├── DropdownExampleSearchMultipleFluid.shorthand.tsx
│ │ │ │ ├── DropdownExampleSearchMultipleFrenchLanguage.shorthand.tsx
│ │ │ │ ├── DropdownExampleSearchMultipleImageAndContent.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Embed
│ │ │ ├── Performance
│ │ │ │ └── EmbedMinimal.perf.tsx
│ │ │ ├── Slots
│ │ │ │ ├── EmbedExampleVideo.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── EmbedExampleYouTube.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Flex
│ │ │ ├── Performance
│ │ │ │ └── FlexMinimal.perf.tsx
│ │ │ ├── Recipes.mdx
│ │ │ ├── Rtl
│ │ │ │ ├── FlexExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── FlexExampleColumns.shorthand.tsx
│ │ │ │ ├── FlexExampleInput.shorthand.tsx
│ │ │ │ ├── FlexExampleItemsAlignment.shorthand.tsx
│ │ │ │ ├── FlexExampleMediaCard.shorthand.tsx
│ │ │ │ ├── FlexExampleMixedAlignment.shorthand.tsx
│ │ │ │ ├── FlexExampleNavMenu.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Form
│ │ │ ├── BestPractices
│ │ │ │ └── FormBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── FormMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── FormExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── FormExample.shorthand.tsx
│ │ │ │ ├── FormExample.tsx
│ │ │ │ ├── FormExampleInline.shorthand.tsx
│ │ │ │ ├── FormExampleInline.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── FormExampleCheckbox.shorthand.tsx
│ │ │ │ ├── FormExampleCheckbox.tsx
│ │ │ │ ├── FormExampleDropdown.shorthand.tsx
│ │ │ │ ├── FormExampleDropdown.tsx
│ │ │ │ ├── FormExampleSlider.shorthand.tsx
│ │ │ │ ├── FormExampleSlider.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Grid
│ │ │ ├── BestPractices
│ │ │ │ └── GridBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── GridMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── GridExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── GridExample.shorthand.tsx
│ │ │ │ ├── GridExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── GridExampleColumns.shorthand.tsx
│ │ │ │ ├── GridExampleColumns.tsx
│ │ │ │ ├── GridExampleColumnsAndRows.shorthand.tsx
│ │ │ │ ├── GridExampleColumnsAndRows.tsx
│ │ │ │ ├── GridExampleKeyboardNavigable.shorthand.tsx
│ │ │ │ ├── GridExampleKeyboardNavigable.tsx
│ │ │ │ ├── GridExampleRows.shorthand.tsx
│ │ │ │ ├── GridExampleRows.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Header
│ │ │ ├── Performance
│ │ │ │ ├── HeaderMinimal.perf.tsx
│ │ │ │ ├── HeaderSlots.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── HeaderExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── HeaderExample.shorthand.tsx
│ │ │ │ ├── HeaderExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── HeaderExample.shorthand.tsx
│ │ │ │ ├── HeaderExampleAlign.tsx
│ │ │ │ ├── HeaderExampleColor.shorthand.tsx
│ │ │ │ ├── HeaderExampleColor.tsx
│ │ │ │ ├── HeaderExampleDescription.shorthand.tsx
│ │ │ │ ├── HeaderExampleDescription.tsx
│ │ │ │ ├── HeaderExampleDescriptionCustomization.shorthand.tsx
│ │ │ │ ├── HeaderExampleDescriptionCustomization.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── HierarchicalTree
│ │ │ ├── Performance
│ │ │ │ └── HierarchicalTreeMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── HierarchicalTreeExample.shorthand.tsx
│ │ │ │ ├── HierarchicalTreeExclusiveExample.shorthand.tsx
│ │ │ │ ├── HierarchicalTreeTitleCustomizationExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Icon
│ │ │ ├── BestPractices
│ │ │ │ └── IconBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ ├── IconMinimal.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── IconExample.rtl.tsx
│ │ │ │ ├── IconExampleRotate.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── IconExampleDisabled.shorthand.steps.ts
│ │ │ │ ├── IconExampleDisabled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── IconExample.shorthand.steps.ts
│ │ │ │ ├── IconExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── IconSetExample.shorthand.steps.ts
│ │ │ │ ├── IconSetExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── IconExampleBordered.shorthand.steps.ts
│ │ │ │ ├── IconExampleBordered.shorthand.tsx
│ │ │ │ ├── IconExampleCircular.shorthand.steps.ts
│ │ │ │ ├── IconExampleCircular.shorthand.tsx
│ │ │ │ ├── IconExampleColor.shorthand.steps.ts
│ │ │ │ ├── IconExampleColor.shorthand.tsx
│ │ │ │ ├── IconExampleRotate.shorthand.tsx
│ │ │ │ ├── IconExampleSize.shorthand.steps.ts
│ │ │ │ ├── IconExampleSize.shorthand.tsx
│ │ │ │ ├── IconExampleSpace.shorthand.steps.ts
│ │ │ │ ├── IconExampleSpace.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Image
│ │ │ ├── Performance
│ │ │ │ └── ImageMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── ImageExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ImageExample.tsx
│ │ │ │ ├── ImageExampleAvatar.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── ImageExampleCircular.tsx
│ │ │ │ ├── ImageExampleFluid.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Input
│ │ │ ├── BestPractices
│ │ │ │ └── InputBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── InputMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── InputExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── InputExample.shorthand.steps.ts
│ │ │ │ ├── InputExample.shorthand.tsx
│ │ │ │ ├── InputInvertedExample.shorthand.steps.ts
│ │ │ │ ├── InputInvertedExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── InputExampleClearable.shorthand.steps.ts
│ │ │ │ ├── InputExampleClearable.shorthand.tsx
│ │ │ │ ├── InputExampleFluid.shorthand.tsx
│ │ │ │ ├── InputExampleIcon.shorthand.tsx
│ │ │ │ ├── InputExampleIconClearable.shorthand.tsx
│ │ │ │ ├── InputExampleIconPosition.shorthand.tsx
│ │ │ │ ├── InputExampleInline.shorthand.tsx
│ │ │ │ ├── InputExampleInlineIconClearable.shorthand.tsx
│ │ │ │ ├── InputExampleInputSlot.shorthand.tsx
│ │ │ │ ├── InputExampleTargeting.shorthand.tsx
│ │ │ │ ├── InputExampleWrapperSlot.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── ItemLayout
│ │ │ ├── Content
│ │ │ │ ├── ItemLayoutExampleContent.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleContentMedia.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleEndMedia.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleHeader.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleHeaderContent.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleHeaderMedia.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleMedia.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ └── ItemLayoutMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── ItemLayoutExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ItemLayoutExample.shorthand.tsx
│ │ │ │ ├── ItemLayoutExampleSelection.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Label
│ │ │ ├── Content
│ │ │ │ ├── LabelExample.shorthand.tsx
│ │ │ │ ├── LabelExample.tsx
│ │ │ │ ├── LabelExampleContentCustomization.shorthand.tsx
│ │ │ │ ├── LabelExampleIcon.shorthand.tsx
│ │ │ │ ├── LabelExampleIconPosition.shorthand.tsx
│ │ │ │ ├── LabelExampleImage.shorthand.tsx
│ │ │ │ ├── LabelExampleImagePosition.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ └── LabelMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── LabelExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── LabelExampleCircular.shorthand.tsx
│ │ │ │ ├── LabelExampleColor.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Layout
│ │ │ ├── Performance
│ │ │ │ └── LayoutMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── LayoutExample.shorthand.tsx
│ │ │ │ ├── LayoutExampleVertical.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── LayoutExample.shorthand.tsx
│ │ │ │ ├── LayoutExampleDisappearing.shorthand.tsx
│ │ │ │ ├── LayoutExampleGap.shorthand.tsx
│ │ │ │ ├── LayoutExampleReducing.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── List
│ │ │ ├── Content
│ │ │ │ ├── ListExampleContent.shorthand.tsx
│ │ │ │ ├── ListExampleContent.tsx
│ │ │ │ ├── ListExampleContentMedia.shorthand.tsx
│ │ │ │ ├── ListExampleContentMedia.tsx
│ │ │ │ ├── ListExampleEndMedia.shorthand.tsx
│ │ │ │ ├── ListExampleEndMedia.tsx
│ │ │ │ ├── ListExampleHeader.shorthand.tsx
│ │ │ │ ├── ListExampleHeader.tsx
│ │ │ │ ├── ListExampleHeaderContent.shorthand.tsx
│ │ │ │ ├── ListExampleHeaderContent.tsx
│ │ │ │ ├── ListExampleHeaderMedia.shorthand.tsx
│ │ │ │ ├── ListExampleHeaderMedia.tsx
│ │ │ │ ├── ListExampleMedia.shorthand.tsx
│ │ │ │ ├── ListExampleMedia.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ ├── ListCommon.perf.tsx
│ │ │ │ ├── ListMinimal.perf.tsx
│ │ │ │ ├── ListNested.perf.tsx
│ │ │ │ ├── ListWith60ListItems.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── ListExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ListExample.shorthand.tsx
│ │ │ │ ├── ListExample.tsx
│ │ │ │ ├── ListExampleNavigable.shorthand.steps.ts
│ │ │ │ ├── ListExampleNavigable.shorthand.tsx
│ │ │ │ ├── ListExampleNavigable.tsx
│ │ │ │ ├── ListExampleSelectable.shorthand.steps.ts
│ │ │ │ ├── ListExampleSelectable.shorthand.tsx
│ │ │ │ ├── ListExampleSelectable.tsx
│ │ │ │ ├── ListExampleSelectableControlled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── ListExampleMemo.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── ListExampleFixedTruncate.shorthand.tsx
│ │ │ │ ├── ListExampleHorizontal.shorthand.tsx
│ │ │ │ ├── ListExampleTruncate.shorthand.tsx
│ │ │ │ ├── ListExampleTruncate.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Loader
│ │ │ ├── BestPractices
│ │ │ │ └── LoaderBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ ├── LoaderMinimal.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── LoaderExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── LoaderExample.tsx
│ │ │ │ ├── LoaderExampleLabel.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── LoaderExampleDelay.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── LoaderExampleInline.tsx
│ │ │ │ ├── LoaderExampleLabelPosition.shorthand.tsx
│ │ │ │ ├── LoaderExampleSize.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Menu
│ │ │ ├── BestPractices
│ │ │ │ └── MenuBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── MenuMinimal.perf.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── MenuExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Slots
│ │ │ │ ├── MenuExampleDivider.shorthand.tsx
│ │ │ │ ├── MenuExampleDividerHorizontal.shorthand.tsx
│ │ │ │ ├── MenuExampleIconOnly.shorthand.steps.ts
│ │ │ │ ├── MenuExampleIconOnly.shorthand.tsx
│ │ │ │ ├── MenuExampleSlot.shorthand.steps.ts
│ │ │ │ ├── MenuExampleSlot.shorthand.tsx
│ │ │ │ ├── MenuExampleWithIcons.shorthand.steps..ts
│ │ │ │ ├── MenuExampleWithIcons.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── MenuItemExampleDisabled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── MenuExample.shorthand.tsx
│ │ │ │ ├── MenuExamplePointing.shorthand.steps.ts
│ │ │ │ ├── MenuExamplePointing.shorthand.tsx
│ │ │ │ ├── MenuExampleUnderlined.shorthand.steps.ts
│ │ │ │ ├── MenuExampleUnderlined.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── MenuExampleTabList.shorthand.tsx
│ │ │ │ ├── MenuExampleToolbar.shorthand.steps.ts
│ │ │ │ ├── MenuExampleToolbar.shorthand.tsx
│ │ │ │ ├── MenuExampleWithSubmenu.shorthand.steps.ts
│ │ │ │ ├── MenuExampleWithSubmenu.shorthand.tsx
│ │ │ │ ├── MenuExampleWithSubmenuControlled.shorthand.tsx
│ │ │ │ ├── MenuExampleWithTooltip.shorthand.steps.ts
│ │ │ │ ├── MenuExampleWithTooltip.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── MenuExampleFluid.shorthand.tsx
│ │ │ │ ├── MenuExampleVertical.shorthand.steps.ts
│ │ │ │ ├── MenuExampleVertical.shorthand.tsx
│ │ │ │ ├── MenuExampleVerticalPointing.shorthand.steps.ts
│ │ │ │ ├── MenuExampleVerticalPointing.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── MenuButton
│ │ │ ├── Performance
│ │ │ │ └── MenuButtonMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── MenuButtonExample.rtl.steps.ts
│ │ │ │ ├── MenuButtonExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── State
│ │ │ │ ├── MenuButtonExampleOpen.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── MenuButtonExampleContextMenu.shorthand.tsx
│ │ │ │ ├── MenuButtonExampleOn.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Popup
│ │ │ ├── BestPractices
│ │ │ │ └── PopupBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── PopupMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── PopupExample.rtl.steps.ts
│ │ │ │ ├── PopupExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── PopupControlledExample.shorthand.steps.ts
│ │ │ │ ├── PopupControlledExample.shorthand.tsx
│ │ │ │ ├── PopupControlledExample.tsx
│ │ │ │ ├── PopupCustomTargetExample.shorthand.steps.ts
│ │ │ │ ├── PopupCustomTargetExample.shorthand.tsx
│ │ │ │ ├── PopupCustomTargetExample.tsx
│ │ │ │ ├── PopupExample.shorthand.steps.ts
│ │ │ │ ├── PopupExample.shorthand.tsx
│ │ │ │ ├── PopupExample.tsx
│ │ │ │ ├── PopupExampleInline.shorthand.tsx
│ │ │ │ ├── PopupExampleInline.tsx
│ │ │ │ ├── PopupExamplePointerMargin.shorthand.tsx
│ │ │ │ ├── PopupExamplePointerOffset.steps.ts
│ │ │ │ ├── PopupExamplePointerOffset.tsx
│ │ │ │ ├── PopupExamplePointing.shorthand.tsx
│ │ │ │ ├── PopupFocusTrapExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── PopupExampleAsync.shorthand.tsx
│ │ │ │ ├── PopupExampleCloseButton.shorthand.steps.ts
│ │ │ │ ├── PopupExampleCloseButton.shorthand.tsx
│ │ │ │ ├── PopupExampleCloseButton.tsx
│ │ │ │ ├── PopupExampleContextOnElement.tsx
│ │ │ │ ├── PopupExampleNested.shorthand.tsx
│ │ │ │ ├── PopupExampleOn.shorthand.tsx
│ │ │ │ ├── PopupExampleOnMultiple.shorthand.tsx
│ │ │ │ ├── PopupExampleOnWithFocusTrap.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── PopupExampleOffset.shorthand.tsx
│ │ │ │ ├── PopupExamplePosition.shorthand.tsx
│ │ │ │ ├── PopupExamplePosition.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Portal
│ │ │ ├── Performance
│ │ │ │ └── PortalMinimal.perf.tsx
│ │ │ ├── State
│ │ │ │ ├── PortalExampleOpen.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── PortalExample.shorthand.tsx
│ │ │ │ ├── PortalExample.tsx
│ │ │ │ ├── PortalExampleFocusTrapped.shorthand.tsx
│ │ │ │ ├── PortalExampleFocusTrapped.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Provider
│ │ │ ├── Performance
│ │ │ │ ├── ProviderMergeThemes.perf.tsx
│ │ │ │ ├── ProviderMinimal.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ProviderDisableAnimationsExample.tsx
│ │ │ │ ├── ProviderExample.shorthand.tsx
│ │ │ │ ├── ProviderExampleRendererFelaPluginFallbackValue.shorthand.tsx
│ │ │ │ ├── ProviderExampleScrollbar.tsx
│ │ │ │ ├── ProviderExampleStyles.tsx
│ │ │ │ ├── ProviderRtlExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── ProviderExampleTarget.tsx
│ │ │ │ ├── ProviderExampleTargetFrame.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── RadioGroup
│ │ │ ├── Item
│ │ │ │ ├── RadioGroupItemExample.shorthand.tsx
│ │ │ │ ├── RadioGroupItemExampleChecked.shorthand.tsx
│ │ │ │ ├── RadioGroupItemExampleDisabled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ └── RadioGroupMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── RadioGroupExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── RadioGroupColorPickerExample.shorthand.tsx
│ │ │ │ ├── RadioGroupExample.shorthand.steps.ts
│ │ │ │ ├── RadioGroupExample.shorthand.tsx
│ │ │ │ ├── RadioGroupVerticalExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Reaction
│ │ │ ├── BestPractices
│ │ │ │ └── ReactionBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── ReactionMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── ReactionExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ReactionExample.shorthand.tsx
│ │ │ │ ├── ReactionGroupExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Ref
│ │ │ ├── Performance
│ │ │ │ └── RefMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── RefExample.tsx
│ │ │ │ ├── RefForwardingExample.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Segment
│ │ │ ├── Performance
│ │ │ │ └── SegmentMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── SegmentExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── SegmentExampleDisabled.shorthand.tsx
│ │ │ │ ├── SegmentExampleDisabled.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── SegmentExample.shorthand.tsx
│ │ │ │ ├── SegmentExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── SegmentExampleColor.shorthand.tsx
│ │ │ │ ├── SegmentExampleColor.tsx
│ │ │ │ ├── SegmentExampleInverted.shorthand.tsx
│ │ │ │ ├── SegmentExampleInverted.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Slider
│ │ │ ├── BestPractices
│ │ │ │ └── SliderBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── SliderMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── SliderExample.rtl.steps.ts
│ │ │ │ ├── SliderExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── SliderExampleDisabled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── SliderExample.shorthand.steps.ts
│ │ │ │ ├── SliderExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── SliderExampleAction.shorthand.tsx
│ │ │ │ ├── SliderExampleForm.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── SliderExampleFluid.shorthand.tsx
│ │ │ │ ├── SliderExampleVertical.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── commonScreenerSteps.ts
│ │ │ └── index.tsx
│ │ │ ├── SplitButton
│ │ │ ├── BestPractices
│ │ │ │ └── SplitButtonBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── SplitButtonMinimal.perf.tsx
│ │ │ ├── Slots
│ │ │ │ ├── SplitButtonIconAndContentExample.shorthand.tsx
│ │ │ │ ├── SplitButtonToggleButtonExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── SplitButtonExampleDisabled.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── SplitButtonExample.shorthand.tsx
│ │ │ │ ├── SplitButtonExamplePrimary.shorthand.tsx
│ │ │ │ ├── SplitButtonExampleSmall.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── SplitButtonMainOptionChangeExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Status
│ │ │ ├── BestPractices
│ │ │ │ └── StatusBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── StatusMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ │ ├── StatusExample.shorthand.tsx
│ │ │ │ ├── StatusTypeExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── StatusColorExample.shorthand.tsx
│ │ │ │ ├── StatusCustomExample.shorthand.tsx
│ │ │ │ ├── StatusIconExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Table
│ │ │ ├── BestPractices
│ │ │ │ └── TableBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── TableMinimal.perf.tsx
│ │ │ ├── Usage
│ │ │ │ ├── TableExampleNavigable.shorthand.steps.ts
│ │ │ │ ├── TableExampleNavigable.shorthand.tsx
│ │ │ │ ├── TableExampleStatic.shorthand.tsx
│ │ │ │ ├── TableExampleStatic.tsx
│ │ │ │ ├── TableExampleStaticCompact.shorthand.tsx
│ │ │ │ ├── TableExampleStaticHeadless.shorthand.tsx
│ │ │ │ ├── TableExampleStaticRowless.shorthand.tsx
│ │ │ │ ├── TableExampleStaticTruncate.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Text
│ │ │ ├── BestPractices
│ │ │ │ └── TextBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── TextMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── TextExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── TextExampleDisabled.shorthand.tsx
│ │ │ │ ├── TextExampleDisabled.tsx
│ │ │ │ ├── TextExampleError.shorthand.tsx
│ │ │ │ ├── TextExampleError.tsx
│ │ │ │ ├── TextExampleSuccess.shorthand.tsx
│ │ │ │ ├── TextExampleSuccess.tsx
│ │ │ │ ├── TextExampleTemporary.shorthand.tsx
│ │ │ │ ├── TextExampleTemporary.tsx
│ │ │ │ ├── TextExampleTruncated.shorthand.tsx
│ │ │ │ ├── TextExampleTruncated.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── TextSizesExample.shorthand.tsx
│ │ │ │ ├── TextSizesExample.tsx
│ │ │ │ ├── TextWeightsExample.shorthand.tsx
│ │ │ │ ├── TextWeightsExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── TextExampleAlign.shorthand.tsx
│ │ │ │ ├── TextExampleAlign.tsx
│ │ │ │ ├── TextExampleAtMention.shorthand.tsx
│ │ │ │ ├── TextExampleAtMention.tsx
│ │ │ │ ├── TextExampleColor.shorthand.tsx
│ │ │ │ ├── TextExampleColor.tsx
│ │ │ │ ├── TextExampleImportant.shorthand.tsx
│ │ │ │ ├── TextExampleImportant.tsx
│ │ │ │ ├── TextExampleTimestamp.shorthand.tsx
│ │ │ │ ├── TextExampleTimestamp.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── TextArea
│ │ │ ├── Performance
│ │ │ │ └── TextAreaMinimal.perf.tsx
│ │ │ ├── States
│ │ │ │ ├── TextAreaDisabledExample.shorthand.tsx
│ │ │ │ ├── TextAreaValueExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── TextAreaExample.shorthand.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── textAreaExample.shorthand.steps.ts
│ │ │ ├── Usage
│ │ │ │ ├── TextAreaExampleHeight.shorthand.tsx
│ │ │ │ ├── TextAreaExampleMaxLength.shorthand.tsx
│ │ │ │ ├── TextAreaExampleResize.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── TextAreaExampleFluid.shorthand.tsx
│ │ │ │ ├── TextAreaExampleInverted.shorthand.steps.ts
│ │ │ │ ├── TextAreaExampleInverted.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Toolbar
│ │ │ ├── BestPractices
│ │ │ │ └── ToolbarBestPractices.tsx
│ │ │ ├── Content
│ │ │ │ ├── ToolbarExampleCustomContent.shorthand.tsx
│ │ │ │ ├── ToolbarExampleMenu.shorthand.steps.ts
│ │ │ │ ├── ToolbarExampleMenu.shorthand.tsx
│ │ │ │ ├── ToolbarExampleMenuItemToggle.shorthand.tsx
│ │ │ │ ├── ToolbarExampleMenuRadioGroup.shorthand.tsx
│ │ │ │ ├── ToolbarExampleMenuWithSubmenu.shorthand.steps.ts
│ │ │ │ ├── ToolbarExampleMenuWithSubmenu.shorthand.tsx
│ │ │ │ ├── ToolbarExampleOverflow.shorthand.tsx
│ │ │ │ ├── ToolbarExamplePopup.shorthand.steps.ts
│ │ │ │ ├── ToolbarExamplePopup.shorthand.tsx
│ │ │ │ ├── ToolbarExampleRadioGroup.shorthand.steps.tsx
│ │ │ │ ├── ToolbarExampleRadioGroup.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Performance
│ │ │ │ ├── CustomToolbar.perf.tsx
│ │ │ │ ├── ToolbarMinimal.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── ToolbarExampleEditor.shorthand.steps.ts
│ │ │ │ ├── ToolbarExampleEditor.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── ToolbarExampleActionPopupInMenu.shorthand.steps.ts
│ │ │ │ ├── ToolbarExampleActionPopupInMenu.shorthand.tsx
│ │ │ │ ├── ToolbarExamplePopupInMenu.shorthand.steps.ts
│ │ │ │ ├── ToolbarExamplePopupInMenu.shorthand.tsx
│ │ │ │ ├── ToolbarExampleWithTooltip.shorthand.steps.ts
│ │ │ │ ├── ToolbarExampleWithTooltip.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Tooltip
│ │ │ ├── BestPractices
│ │ │ │ └── TooltipBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ └── TooltipMinimal.perf.tsx
│ │ │ ├── Rtl
│ │ │ │ ├── TooltipExample.rtl.steps.ts
│ │ │ │ ├── TooltipExample.rtl.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── States
│ │ │ │ ├── TooltipOpenControlledExample.shorthand.tsx
│ │ │ │ ├── TooltipOpenControlledExample.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── TooltipExample.shorthand.steps.ts
│ │ │ │ ├── TooltipExample.shorthand.tsx
│ │ │ │ ├── TooltipExample.tsx
│ │ │ │ ├── TooltipExamplePointing.shorthand.steps.ts
│ │ │ │ ├── TooltipExamplePointing.shorthand.tsx
│ │ │ │ ├── TooltipExamplePointing.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── TooltipExampleDisabledTrigger.shorthand.tsx
│ │ │ │ ├── TooltipExampleTarget.shorthand.steps.ts
│ │ │ │ ├── TooltipExampleTarget.shorthand.tsx
│ │ │ │ ├── TooltipExampleTarget.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Variations
│ │ │ │ ├── TooltipExamplePosition.shorthand.tsx
│ │ │ │ ├── TooltipExamplePosition.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ ├── Tree
│ │ │ ├── BestPractices
│ │ │ │ └── TreeBestPractices.tsx
│ │ │ ├── Performance
│ │ │ │ ├── TreeMinimal.perf.tsx
│ │ │ │ ├── TreeWith60ListItems.perf.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Types
│ │ │ │ ├── TreeExample.shorthand.steps.ts
│ │ │ │ ├── TreeExample.shorthand.tsx
│ │ │ │ ├── TreeExclusiveExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Usage
│ │ │ │ ├── TreeAsListExample.shorthand.tsx
│ │ │ │ ├── TreeInitiallyOpenExample.shorthand.tsx
│ │ │ │ ├── TreeTitleCustomizationExample.shorthand.tsx
│ │ │ │ └── index.tsx
│ │ │ └── index.tsx
│ │ │ └── Video
│ │ │ ├── Performance
│ │ │ └── VideoMinimal.perf.tsx
│ │ │ ├── Types
│ │ │ ├── VideoExample.shorthand.tsx
│ │ │ └── index.tsx
│ │ │ └── index.tsx
│ ├── global.d.ts
│ ├── index.ejs
│ ├── index.tsx
│ ├── microsoft-logo.png
│ ├── netflix-logo.png
│ ├── pages
│ │ ├── ComponentArchitecture.mdx
│ │ ├── Composition.mdx
│ │ ├── Layout.mdx
│ │ ├── ShorthandProps.mdx
│ │ └── ThemingSpecification.mdx
│ ├── prototypes
│ │ ├── AsyncShorthand
│ │ │ ├── AsyncShorthand.tsx
│ │ │ └── index.ts
│ │ ├── CopyToClipboard
│ │ │ ├── CopyToClipboard.tsx
│ │ │ ├── NotificationProvider.tsx
│ │ │ ├── index.tsx
│ │ │ └── themeOverrides.ts
│ │ ├── EditorToolbar
│ │ │ ├── EditorToolbar.tsx
│ │ │ ├── EditorToolbarTable.tsx
│ │ │ ├── PortalWindow.tsx
│ │ │ ├── editorToolbarReducer.ts
│ │ │ └── index.tsx
│ │ ├── IconViewer
│ │ │ └── index.tsx
│ │ ├── NestedPopupsAndDialogs
│ │ │ └── index.tsx
│ │ ├── ParticipantsList
│ │ │ └── index.tsx
│ │ ├── Prototypes.tsx
│ │ ├── SearchPage
│ │ │ ├── SearchPage.tsx
│ │ │ └── index.ts
│ │ ├── VirtualizedTable
│ │ │ ├── VirtualizedTable.tsx
│ │ │ ├── VirtualizedTables.tsx
│ │ │ ├── index.tsx
│ │ │ └── itemsGenerator.ts
│ │ ├── VirtualizedTree
│ │ │ ├── VirtualizedTree.tsx
│ │ │ ├── index.tsx
│ │ │ └── itemsGenerator.ts
│ │ ├── alerts
│ │ │ ├── AnimatedBannerAlert.tsx
│ │ │ ├── BannerAlerts.tsx
│ │ │ └── index.tsx
│ │ ├── chatMessages
│ │ │ ├── ChatMessageWithPopover
│ │ │ │ ├── ChatWithPopover.tsx
│ │ │ │ ├── Popover.tsx
│ │ │ │ ├── ReactionPopup.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── ControlMessages
│ │ │ │ ├── ControlMessage.tsx
│ │ │ │ ├── GroupControlMessages.tsx
│ │ │ │ ├── controlMessagesGroupBehavior.ts
│ │ │ │ ├── index.tsx
│ │ │ │ └── mockData.tsx
│ │ │ ├── ImportantAndMentionMessages
│ │ │ │ └── index.tsx
│ │ │ ├── ThreadedMessages
│ │ │ │ ├── ScreenReaderHeaderText.tsx
│ │ │ │ ├── ThreadReplies.tsx
│ │ │ │ ├── ThreadReplyEditor.tsx
│ │ │ │ ├── ThreadedMessage.tsx
│ │ │ │ ├── classNames.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── mockData.tsx
│ │ │ │ ├── repliesButtonBehavior.ts
│ │ │ │ ├── theme.tsx
│ │ │ │ ├── threadChatBehavior.ts
│ │ │ │ └── threadedMessageBehavior.ts
│ │ │ └── index.tsx
│ │ ├── chatPane
│ │ │ ├── chatPaneContent.tsx
│ │ │ ├── chatPaneHeader.tsx
│ │ │ ├── chatPaneLayout.tsx
│ │ │ ├── chatProtoStyle.ts
│ │ │ ├── composeMessage.tsx
│ │ │ ├── index.tsx
│ │ │ └── services
│ │ │ │ ├── dataMock.ts
│ │ │ │ ├── dateUtils.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── messageFactoryMock.tsx
│ │ │ │ └── types.ts
│ │ ├── customScrollbar
│ │ │ └── index.tsx
│ │ ├── customToolbar
│ │ │ ├── CustomToolbar.tsx
│ │ │ ├── darkThemeOverrides.ts
│ │ │ ├── highContrastThemeOverrides.ts
│ │ │ └── index.tsx
│ │ ├── dropdowns
│ │ │ ├── AsyncDropdownSearch.tsx
│ │ │ └── index.tsx
│ │ ├── employeeCard
│ │ │ ├── AvatarEmployeeCard.tsx
│ │ │ ├── CustomText.tsx
│ │ │ ├── EmployeeCard.tsx
│ │ │ └── index.tsx
│ │ ├── hexagonalAvatar
│ │ │ ├── CustomAvatar.tsx
│ │ │ └── index.tsx
│ │ ├── meetingOptions
│ │ │ ├── components
│ │ │ │ ├── MSTeamsFooter.tsx
│ │ │ │ ├── MSTeamsHeader.tsx
│ │ │ │ ├── MSTeamsLink.tsx
│ │ │ │ ├── MSTeamsLogo.tsx
│ │ │ │ ├── MSTeamsMeetingOptions.tsx
│ │ │ │ └── TransparentDivider.tsx
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── mentions
│ │ │ ├── MentionsDropdown.tsx
│ │ │ ├── MentionsEditor.tsx
│ │ │ ├── PortalAtCursorPosition.ts
│ │ │ ├── dataMocks.ts
│ │ │ ├── index.tsx
│ │ │ └── utils.ts
│ │ ├── popups
│ │ │ ├── GridImagePicker
│ │ │ │ ├── GridImagePicker.tsx
│ │ │ │ └── GridImagePickerItem.tsx
│ │ │ ├── dataMocks.ts
│ │ │ ├── emojiPicker.tsx
│ │ │ ├── index.tsx
│ │ │ └── stickerPicker.tsx
│ │ └── table
│ │ │ ├── AdvancedTable.tsx
│ │ │ ├── InteractiveTable.tsx
│ │ │ └── index.tsx
│ ├── public
│ │ └── images
│ │ │ ├── 4by3.jpg
│ │ │ ├── avatar
│ │ │ ├── large
│ │ │ │ ├── ade.jpg
│ │ │ │ ├── chris.jpg
│ │ │ │ ├── christian.jpg
│ │ │ │ ├── daniel.jpg
│ │ │ │ ├── elliot.jpg
│ │ │ │ ├── elyse.png
│ │ │ │ ├── helen.jpg
│ │ │ │ ├── jenny.jpg
│ │ │ │ ├── jerry.png
│ │ │ │ ├── joe.jpg
│ │ │ │ ├── justen.jpg
│ │ │ │ ├── kristy.png
│ │ │ │ ├── laura.jpg
│ │ │ │ ├── matt.jpg
│ │ │ │ ├── matthew.png
│ │ │ │ ├── molly.png
│ │ │ │ ├── nan.jpg
│ │ │ │ ├── nom.jpg
│ │ │ │ ├── patrick.png
│ │ │ │ ├── rachel.png
│ │ │ │ ├── steve.jpg
│ │ │ │ ├── stevie.jpg
│ │ │ │ ├── tom.jpg
│ │ │ │ ├── veronika.jpg
│ │ │ │ └── zoe.jpg
│ │ │ └── small
│ │ │ │ ├── ade.jpg
│ │ │ │ ├── chris.jpg
│ │ │ │ ├── christian.jpg
│ │ │ │ ├── daniel.jpg
│ │ │ │ ├── elliot.jpg
│ │ │ │ ├── helen.jpg
│ │ │ │ ├── jenny.jpg
│ │ │ │ ├── joe.jpg
│ │ │ │ ├── justen.jpg
│ │ │ │ ├── laura.jpg
│ │ │ │ ├── lena.png
│ │ │ │ ├── lindsay.png
│ │ │ │ ├── mark.png
│ │ │ │ ├── matt.jpg
│ │ │ │ ├── matthew.png
│ │ │ │ ├── molly.png
│ │ │ │ ├── nan.jpg
│ │ │ │ ├── nom.jpg
│ │ │ │ ├── rachel.png
│ │ │ │ ├── steve.jpg
│ │ │ │ ├── stevie.jpg
│ │ │ │ ├── tom.jpg
│ │ │ │ ├── veronika.jpg
│ │ │ │ └── zoe.jpg
│ │ │ ├── flex-column.svg
│ │ │ ├── flex.svg
│ │ │ ├── fluent-ui-logo-black.png
│ │ │ ├── fluent-ui-logo-dev.png
│ │ │ ├── fluent-ui-logo-inverted.png
│ │ │ ├── fluent-ui-logo-white.png
│ │ │ ├── fluent-ui-logo.png
│ │ │ ├── grid-page.svg
│ │ │ ├── grid.svg
│ │ │ ├── icons
│ │ │ ├── plugin.png
│ │ │ └── school.png
│ │ │ ├── image-16by9.png
│ │ │ ├── leaves
│ │ │ ├── 1.png
│ │ │ ├── 3.png
│ │ │ ├── 4.png
│ │ │ └── 5.png
│ │ │ ├── movies
│ │ │ └── totoro-horizontal.jpg
│ │ │ ├── tears-of-steel.jpg
│ │ │ ├── vimeo-example.jpg
│ │ │ └── wireframe
│ │ │ ├── centered-paragraph.png
│ │ │ ├── image-square.png
│ │ │ ├── image-text.png
│ │ │ ├── image.png
│ │ │ ├── media-paragraph-alt.png
│ │ │ ├── media-paragraph.png
│ │ │ ├── paragraph.png
│ │ │ ├── short-paragraph.png
│ │ │ ├── square-image.png
│ │ │ ├── text-image.png
│ │ │ └── white-image.png
│ ├── routes.tsx
│ ├── types.ts
│ ├── utils
│ │ ├── componentInfoContext.ts
│ │ ├── exampleContexts.ts
│ │ ├── exampleKebabNameToSourceFilename.ts
│ │ ├── examplePathToHash.ts
│ │ ├── getComponentGroup.ts
│ │ ├── getComponentPathname.ts
│ │ ├── getFormattedHash.ts
│ │ ├── getInfoForSeeTags.ts
│ │ ├── helpers.tsx
│ │ ├── index.tsx
│ │ ├── parseExamplePath.ts
│ │ └── scrollToAnchor.ts
│ └── views
│ │ ├── Accessibility.tsx
│ │ ├── AccessibilityBehaviors.tsx
│ │ ├── AutoFocusZoneDoc.tsx
│ │ ├── CategoryColorPalette.tsx
│ │ ├── CategoryColorSchemes.tsx
│ │ ├── ColorPalette.tsx
│ │ ├── ColorSchemes.tsx
│ │ ├── Colors.tsx
│ │ ├── FAQ.tsx
│ │ ├── FocusTrapZoneDoc.tsx
│ │ ├── FocusZoneDoc.tsx
│ │ ├── IntegrateCustomComponents.tsx
│ │ ├── Introduction.tsx
│ │ ├── Layout.tsx
│ │ ├── PageNotFound.tsx
│ │ ├── Performance.tsx
│ │ ├── QuickStart.tsx
│ │ ├── Theming.tsx
│ │ └── ThemingExamples.tsx
├── tsconfig.json
└── tslint.json
├── e2e
├── .eslintignore
├── .eslintrc.json
├── README.md
├── e2eApi.ts
├── global.d.ts
├── jest.config.js
├── package.json
├── server
│ ├── E2EExample.tsx
│ ├── app.tsx
│ ├── index.html
│ └── routes.ts
├── setup.test.ts
├── tests
│ ├── dialogInDialog-example.tsx
│ ├── dialogInDialog-test.ts
│ ├── dialogInPopup-example.tsx
│ ├── dialogInPopup-test.ts
│ ├── dropdown-example.tsx
│ ├── dropdown-test.ts
│ ├── dropdownMoveFocusOnTab-example.tsx
│ ├── dropdownMoveFocusOnTab-test.ts
│ ├── hierarchicalTree-example.tsx
│ ├── hierarchicalTree-test.ts
│ ├── popupClickHandling-example.tsx
│ ├── popupClickHandling-test.ts
│ ├── popupEscHandling-example.tsx
│ ├── popupEscHandling-test.ts
│ ├── popupInMenu-example.tsx
│ ├── popupInMenu-test.ts
│ ├── popupInPopup-example.tsx
│ ├── popupInPopup-test.ts
│ ├── popupInSubmenuInToolbarMenu-example.tsx
│ ├── popupInSubmenuInToolbarMenu-test.ts
│ ├── popupInToolbarMenu-example.tsx
│ ├── popupInToolbarMenu-test.ts
│ ├── popupWithoutTrigger-example.tsx
│ ├── popupWithoutTrigger-test.ts
│ ├── submenuInToolbarMenu-example.tsx
│ ├── submenuInToolbarMenu-test.ts
│ ├── toolbarMenu-example.tsx
│ ├── toolbarMenu-test.ts
│ ├── toolbarMenuOverflow-example.tsx
│ ├── toolbarMenuOverflow-test.ts
│ ├── toolbarMenuOverflowWrapped-example.tsx
│ └── toolbarMenuOverflowWrapped-test.ts
├── tsconfig.json
└── tslint.json
├── gulpfile.ts
├── jest.config.js
├── lerna.json
├── now.json
├── package.json
├── packages
├── ability-attributes
│ ├── .gitignore
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── package.json
│ ├── schema.json
│ ├── src
│ │ └── index.ts
│ └── tsconfig.json
├── accessibility
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── attributes.ts
│ │ ├── behaviors
│ │ │ ├── Accordion
│ │ │ │ ├── accordionBehavior.ts
│ │ │ │ ├── accordionContentBehavior.ts
│ │ │ │ └── accordionTitleBehavior.ts
│ │ │ ├── Alert
│ │ │ │ ├── alertBaseBehavior.ts
│ │ │ │ ├── alertBehavior.ts
│ │ │ │ └── alertWarningBehavior.ts
│ │ │ ├── Attachment
│ │ │ │ └── attachmentBehavior.ts
│ │ │ ├── Button
│ │ │ │ ├── buttonBehavior.ts
│ │ │ │ └── toggleButtonBehavior.ts
│ │ │ ├── Carousel
│ │ │ │ ├── carouselBehavior.ts
│ │ │ │ └── carouselItemBehavior.ts
│ │ │ ├── Chat
│ │ │ │ ├── chatBehavior.ts
│ │ │ │ └── chatMessageBehavior.ts
│ │ │ ├── Checkbox
│ │ │ │ └── checkboxBehavior.ts
│ │ │ ├── Dialog
│ │ │ │ └── dialogBehavior.ts
│ │ │ ├── Embed
│ │ │ │ └── embedBehavior.ts
│ │ │ ├── Grid
│ │ │ │ ├── gridBehavior.ts
│ │ │ │ └── gridHorizontalBehavior.ts
│ │ │ ├── HierarchicalTree
│ │ │ │ ├── hierarchicalSubtreeBehavior.ts
│ │ │ │ ├── hierarchicalTreeBehavior.ts
│ │ │ │ ├── hierarchicalTreeItemBehavior.ts
│ │ │ │ └── hierarchicalTreeTitleBehavior.ts
│ │ │ ├── Icon
│ │ │ │ └── iconBehavior.ts
│ │ │ ├── Image
│ │ │ │ └── imageBehavior.ts
│ │ │ ├── Input
│ │ │ │ └── inputBehavior.ts
│ │ │ ├── List
│ │ │ │ ├── basicListBehavior.ts
│ │ │ │ ├── basicListItemBehavior.ts
│ │ │ │ ├── listBehavior.ts
│ │ │ │ ├── listItemBehavior.ts
│ │ │ │ ├── navigableListBehavior.ts
│ │ │ │ ├── navigableListItemBehavior.ts
│ │ │ │ ├── selectableListBehavior.ts
│ │ │ │ └── selectableListItemBehavior.ts
│ │ │ ├── Loader
│ │ │ │ └── loaderBehavior.ts
│ │ │ ├── Menu
│ │ │ │ ├── menuBehavior.ts
│ │ │ │ ├── menuDividerBehavior.ts
│ │ │ │ ├── menuItemBehavior.ts
│ │ │ │ └── submenuBehavior.ts
│ │ │ ├── MenuButton
│ │ │ │ └── menuButtonBehavior.ts
│ │ │ ├── Popup
│ │ │ │ └── popupBehavior.ts
│ │ │ ├── Radio
│ │ │ │ ├── radioGroupBehavior.ts
│ │ │ │ └── radioGroupItemBehavior.ts
│ │ │ ├── Slider
│ │ │ │ └── sliderBehavior.ts
│ │ │ ├── SplitButton
│ │ │ │ └── splitButtonBehavior.ts
│ │ │ ├── Status
│ │ │ │ └── statusBehavior.ts
│ │ │ ├── Tab
│ │ │ │ ├── tabBehavior.ts
│ │ │ │ └── tabListBehavior.ts
│ │ │ ├── Table
│ │ │ │ ├── gridCellBehavior.ts
│ │ │ │ ├── gridCellMultipleFocusableBehavior.ts
│ │ │ │ ├── gridCellWithFocusableElementBehavior.ts
│ │ │ │ ├── gridHeaderCellBehavior.ts
│ │ │ │ ├── gridHeaderRowBehavior.ts
│ │ │ │ ├── gridNestedBehavior.ts
│ │ │ │ ├── gridRowBehavior.ts
│ │ │ │ ├── gridRowNestedBehavior.ts
│ │ │ │ ├── tableBehavior.ts
│ │ │ │ ├── tableCellBehavior.ts
│ │ │ │ ├── tableHeaderCellBehavior.ts
│ │ │ │ └── tableRowBehavior.ts
│ │ │ ├── TextArea
│ │ │ │ └── textAreaBehavior.ts
│ │ │ ├── Toolbar
│ │ │ │ ├── menuAsToolbarBehavior.ts
│ │ │ │ ├── menuItemAsToolbarButtonBehavior.ts
│ │ │ │ ├── toolbarBehavior.ts
│ │ │ │ ├── toolbarItemBehavior.ts
│ │ │ │ ├── toolbarMenuBehavior.ts
│ │ │ │ ├── toolbarMenuItemBehavior.ts
│ │ │ │ ├── toolbarMenuItemCheckboxBehavior.ts
│ │ │ │ ├── toolbarMenuItemRadioBehavior.ts
│ │ │ │ ├── toolbarMenuRadioGroupBehavior.ts
│ │ │ │ ├── toolbarRadioGroupBehavior.ts
│ │ │ │ └── toolbarRadioGroupItemBehavior.ts
│ │ │ ├── Tooltip
│ │ │ │ ├── tooltipAsDescriptionBehavior.ts
│ │ │ │ └── tooltipAsLabelBehavior.ts
│ │ │ ├── Tree
│ │ │ │ ├── treeAsListBehavior.ts
│ │ │ │ ├── treeBehavior.ts
│ │ │ │ ├── treeItemAsListItemBehavior.ts
│ │ │ │ ├── treeItemBehavior.ts
│ │ │ │ ├── treeTitleAsListItemTitleBehavior.ts
│ │ │ │ └── treeTitleBehavior.ts
│ │ │ └── index.ts
│ │ ├── focusZone
│ │ │ └── types.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── test
│ │ └── behaviors
│ │ │ ├── accordionTitleBehavior-test.tsx
│ │ │ ├── alertBehavior-test.tsx
│ │ │ ├── behavior-test.tsx
│ │ │ ├── dialogBehavior-test.tsx
│ │ │ ├── gridRowBehavior-test.tsx
│ │ │ ├── hierarchicalTreeItemBehavior-test.tsx
│ │ │ ├── hierarchicalTreeTitleBehavior-test.tsx
│ │ │ ├── listBehavior-test.tsx
│ │ │ ├── listItemBehavior-test.tsx
│ │ │ ├── loaderBehavior-test.tsx
│ │ │ ├── menuButtonBehavior-test.tsx
│ │ │ ├── popupBehavior-test.tsx
│ │ │ ├── sliderBehavior-test.ts
│ │ │ ├── splitButtonBehavior-test.tsx
│ │ │ ├── tableRowBehavior-test.tsx
│ │ │ ├── testDefinitions.ts
│ │ │ ├── testHelper.tsx
│ │ │ ├── treeItemAsListItemBehavior-test.tsx
│ │ │ ├── treeItemBehavior-test.tsx
│ │ │ ├── treeTitleAsListItemTitleBehavior-test.tsx
│ │ │ └── treeTitleBehavior-test.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── code-sandbox
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── package.json
│ ├── src
│ │ ├── KnobsSnippet.tsx
│ │ ├── SandboxApp.tsx
│ │ ├── createCallbackLogFormatter.ts
│ │ ├── index.ts
│ │ └── knobComponents.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── digest
│ ├── README.md
│ ├── assets
│ │ └── index.html
│ ├── just.config.ts
│ ├── package.json
│ ├── src
│ │ ├── bundle
│ │ │ ├── index.digest.tsx
│ │ │ └── stories.tsx
│ │ ├── config.tsx
│ │ ├── digest.tsx
│ │ └── webpack.config.ts
│ └── tsconfig.json
├── docs-components
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── package.json
│ ├── src
│ │ ├── CodeSnippet
│ │ │ ├── CodeSnippet.tsx
│ │ │ ├── CodeSnippetLabel.tsx
│ │ │ ├── formatCode.ts
│ │ │ └── types.ts
│ │ ├── CopyToClipboard.tsx
│ │ ├── index.ts
│ │ └── knobs
│ │ │ ├── KnobContexts.ts
│ │ │ ├── KnobInspector.tsx
│ │ │ ├── KnobProvider.tsx
│ │ │ ├── LogInspector.tsx
│ │ │ ├── defaultComponents.tsx
│ │ │ ├── types.ts
│ │ │ ├── useBooleanKnob.ts
│ │ │ ├── useKnob.ts
│ │ │ ├── useKnobValues.ts
│ │ │ ├── useLogKnob.ts
│ │ │ ├── useNumberKnob.ts
│ │ │ ├── useRangeKnob.ts
│ │ │ ├── useSelectKnob.ts
│ │ │ ├── useStringKnob.ts
│ │ │ └── utils
│ │ │ └── parseRangeValue.ts
│ ├── tsconfig.json
│ └── tslint.json
├── eslint-plugin
│ ├── index.js
│ ├── package.json
│ ├── rules
│ │ └── no-visibility-modifiers
│ │ │ └── index.js
│ └── utils
│ │ └── isTypeScriptFile.js
├── local-sandbox
│ ├── .browserslistrc
│ ├── README.md
│ ├── babel.config.js
│ ├── package.json
│ ├── public
│ │ └── index.html
│ ├── server.js
│ ├── src
│ │ └── index.tsx
│ ├── tsconfig.json
│ └── webpack.config.ts
├── perf-test
│ ├── .digest
│ │ └── config.tsx
│ ├── just.config.ts
│ ├── package.json
│ ├── stories
│ │ ├── Avatar.perf.tsx
│ │ ├── Button.perf.tsx
│ │ ├── Checkbox.perf.tsx
│ │ ├── Dialog.perf.tsx
│ │ ├── Dropdown.perf.tsx
│ │ ├── Icon.perf.tsx
│ │ ├── Image.perf.tsx
│ │ ├── Slider.perf.tsx
│ │ ├── Text.perf.tsx
│ │ └── Tooltip.perf.tsx
│ ├── tasks
│ │ └── perf-test.ts
│ └── tsconfig.json
├── playground
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .storybook
│ │ ├── addons.js
│ │ ├── config.js
│ │ └── webpack.config.js
│ ├── CHANGELOG.json
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── api
│ │ └── react.api.md
│ ├── jest.config.js
│ ├── jest.puppeteer.js
│ ├── just.config.ts
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ │ ├── Button
│ │ │ │ ├── Button.base.tsx
│ │ │ │ ├── Button.stories.tsx
│ │ │ │ ├── Button.test.tsx
│ │ │ │ ├── Button.types.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── useButton.ts
│ │ │ ├── Checkbox
│ │ │ │ ├── Checkbox.base.tsx
│ │ │ │ ├── Checkbox.stories.tsx
│ │ │ │ ├── Checkbox.types.ts
│ │ │ │ ├── README.md
│ │ │ │ ├── index.ts
│ │ │ │ └── useCheckbox.ts
│ │ │ ├── Icon
│ │ │ │ └── README.md
│ │ │ ├── Link
│ │ │ │ ├── Link.base.tsx
│ │ │ │ ├── Link.stories.tsx
│ │ │ │ ├── Link.styles.ts
│ │ │ │ ├── Link.test.tsx
│ │ │ │ ├── Link.tokens.ts
│ │ │ │ ├── Link.ts
│ │ │ │ ├── Link.types.ts
│ │ │ │ ├── README.md
│ │ │ │ ├── index.ts
│ │ │ │ └── useLink.ts
│ │ │ └── Slider
│ │ │ │ ├── README.md
│ │ │ │ ├── Slider.base.tsx
│ │ │ │ ├── Slider.e2e.tsx
│ │ │ │ ├── Slider.stories.tsx
│ │ │ │ ├── Slider.styles.tsx
│ │ │ │ ├── Slider.test.tsx
│ │ │ │ ├── Slider.tokens.tsx
│ │ │ │ ├── Slider.tsx
│ │ │ │ ├── Slider.types.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── themes
│ │ │ │ └── fluent
│ │ │ │ │ └── Slider.theme.ts
│ │ │ │ └── useSlider.ts
│ │ ├── hooks
│ │ │ ├── merge.ts
│ │ │ ├── useControlledState.ts
│ │ │ └── useWindowEvent.ts
│ │ ├── index.ts
│ │ └── themes
│ │ │ └── fluent
│ │ │ ├── dark
│ │ │ └── index.ts
│ │ │ └── light
│ │ │ └── index.ts
│ └── tsconfig.json
├── react-bindings
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── README.md
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── FocusZone
│ │ │ ├── AutoFocusZone.tsx
│ │ │ ├── AutoFocusZone.types.tsx
│ │ │ ├── CHANGELOG.md
│ │ │ ├── FocusTrapZone.tsx
│ │ │ ├── FocusTrapZone.types.tsx
│ │ │ ├── FocusZone.tsx
│ │ │ ├── FocusZone.types.ts
│ │ │ └── focusUtilities.ts
│ │ ├── accessibility
│ │ │ ├── getAccessibility.ts
│ │ │ ├── getKeyDownHandlers.ts
│ │ │ ├── shouldHandleOnKeys.ts
│ │ │ └── types.ts
│ │ ├── hooks
│ │ │ ├── useAccessibility.ts
│ │ │ ├── useAutoControlled.ts
│ │ │ ├── useDispatchEffect.ts
│ │ │ ├── useIsomorphicLayoutEffect.ts
│ │ │ ├── useStateManager.ts
│ │ │ └── useStyles.ts
│ │ ├── index.ts
│ │ ├── styles
│ │ │ ├── calculateAnimationTimeout.ts
│ │ │ ├── convertCssTimeToNumber.ts
│ │ │ ├── createAnimationStyles.tsx
│ │ │ ├── getStyles.ts
│ │ │ ├── resolveStyles.ts
│ │ │ ├── resolveVariables.ts
│ │ │ └── types.ts
│ │ ├── telemetry
│ │ │ ├── types.ts
│ │ │ └── useTelemetry.ts
│ │ └── utils
│ │ │ ├── getElementType.ts
│ │ │ └── getUnhandledProps.ts
│ ├── test
│ │ ├── FocusZone
│ │ │ ├── AutoFocusZone-test.tsx
│ │ │ ├── FocusTrapZone-test.tsx
│ │ │ └── FocusZone-test.tsx
│ │ ├── accesibility
│ │ │ ├── getKeyDownHandlers-test.ts
│ │ │ └── shouldHandleOnKeys-test.ts
│ │ ├── hooks
│ │ │ ├── useAccessibility-test.tsx
│ │ │ ├── useAutoControlled-test.tsx
│ │ │ ├── useDispatchEffect-test.tsx
│ │ │ ├── useStateManager-test.tsx
│ │ │ └── useStyles-test.tsx
│ │ ├── styles
│ │ │ ├── convertCssTimeToNumber-test.ts
│ │ │ ├── createAnimationStyles-test.ts
│ │ │ ├── resolveStyles-test.ts
│ │ │ └── resolveVariables-test.ts
│ │ └── utils
│ │ │ ├── getElementType-test.ts
│ │ │ └── getUnhandledProps-test.ts
│ ├── tsconfig.json
│ └── tslint.json
├── react-component-event-listener
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── EventListener.ts
│ │ ├── index.ts
│ │ ├── types.ts
│ │ └── useEventListener.ts
│ ├── test
│ │ └── EventListener-test.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── react-component-nesting-registry
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── NestingAuto.tsx
│ │ ├── NestingChild.tsx
│ │ ├── NestingContext.ts
│ │ ├── NestingRoot.tsx
│ │ ├── hooks
│ │ │ ├── types.ts
│ │ │ ├── useNestingAuto.ts
│ │ │ ├── useNestingChild.ts
│ │ │ └── useNestingRoot.ts
│ │ ├── index.ts
│ │ ├── types.ts
│ │ └── utils
│ │ │ └── RefStack.ts
│ ├── test
│ │ └── NestingAuto-test.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── react-component-ref
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── Ref.tsx
│ │ ├── RefFindNode.tsx
│ │ ├── RefForward.tsx
│ │ ├── handleRef.ts
│ │ ├── index.ts
│ │ ├── isRefObject.ts
│ │ └── types.ts
│ ├── test
│ │ ├── Ref-test.tsx
│ │ ├── RefFindNode-test.tsx
│ │ ├── RefForward-test.tsx
│ │ ├── fixtures.tsx
│ │ ├── handleRef-test.ts
│ │ └── isRefObject-test.ts
│ ├── tsconfig.json
│ └── tslint.json
├── react-context-selector
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── README.md
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── createContext.ts
│ │ ├── index.ts
│ │ ├── types.ts
│ │ ├── useContextSelector.ts
│ │ ├── useContextSelectors.ts
│ │ └── utils.ts
│ ├── test
│ │ ├── createContext-test.tsx
│ │ ├── useContextSelector-test.tsx
│ │ └── useContextSelectors-test.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── react-proptypes
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── index.ts
│ │ └── leven.ts
│ ├── test
│ │ └── customPropTypes-test.ts
│ ├── tsconfig.json
│ └── tslint.json
├── react-theming
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── CHANGELOG.json
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── jest.config.js
│ ├── just.config.ts
│ ├── package.json
│ ├── readme.org
│ ├── src
│ │ ├── components
│ │ │ ├── Box
│ │ │ │ ├── Box.styles.tsx
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── Box.types.ts
│ │ │ │ └── Primitive.base.tsx
│ │ │ └── ThemeProvider
│ │ │ │ └── ThemeProvider.tsx
│ │ ├── compose.test.tsx
│ │ ├── compose.ts
│ │ ├── index.ts
│ │ ├── resolveTokens.test.ts
│ │ ├── resolveTokens.ts
│ │ ├── slots.types.ts
│ │ ├── theme.types.ts
│ │ ├── themeContext.ts
│ │ └── utilities
│ │ │ ├── color.contrast.ts
│ │ │ ├── color.hsl.ts
│ │ │ ├── color.test.ts
│ │ │ ├── color.ts
│ │ │ ├── color.types.ts
│ │ │ ├── color.values.ts
│ │ │ ├── createTheme.ts
│ │ │ └── mergeSlotProps.ts
│ ├── tsconfig.json
│ └── tslint.json
├── react
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ │ ├── Accordion
│ │ │ │ ├── Accordion.tsx
│ │ │ │ ├── AccordionContent.tsx
│ │ │ │ └── AccordionTitle.tsx
│ │ │ ├── Alert
│ │ │ │ └── Alert.tsx
│ │ │ ├── Animation
│ │ │ │ └── Animation.tsx
│ │ │ ├── Attachment
│ │ │ │ └── Attachment.tsx
│ │ │ ├── Avatar
│ │ │ │ └── Avatar.tsx
│ │ │ ├── Box
│ │ │ │ └── Box.tsx
│ │ │ ├── Button
│ │ │ │ ├── Button.tsx
│ │ │ │ └── ButtonGroup.tsx
│ │ │ ├── Carousel
│ │ │ │ ├── Carousel.tsx
│ │ │ │ ├── CarouselItem.tsx
│ │ │ │ ├── CarouselNavigation.tsx
│ │ │ │ └── CarouselNavigationItem.tsx
│ │ │ ├── Chat
│ │ │ │ ├── Chat.tsx
│ │ │ │ ├── ChatItem.tsx
│ │ │ │ ├── ChatMessage.tsx
│ │ │ │ └── chatItemContext.ts
│ │ │ ├── Checkbox
│ │ │ │ └── Checkbox.tsx
│ │ │ ├── Debug
│ │ │ │ ├── Debug.tsx
│ │ │ │ ├── DebugComponentViewer.tsx
│ │ │ │ ├── DebugLine.tsx
│ │ │ │ ├── DebugPanel.tsx
│ │ │ │ ├── DebugPanelData.tsx
│ │ │ │ ├── DebugPanelItem.tsx
│ │ │ │ ├── DebugRect.tsx
│ │ │ │ ├── FiberNavigator.ts
│ │ │ │ ├── ScrollToBottom.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── Design
│ │ │ │ └── Design.tsx
│ │ │ ├── Dialog
│ │ │ │ ├── Dialog.tsx
│ │ │ │ └── DialogFooter.tsx
│ │ │ ├── Divider
│ │ │ │ └── Divider.tsx
│ │ │ ├── Dropdown
│ │ │ │ ├── Dropdown.tsx
│ │ │ │ ├── DropdownItem.tsx
│ │ │ │ ├── DropdownSearchInput.tsx
│ │ │ │ └── DropdownSelectedItem.tsx
│ │ │ ├── Embed
│ │ │ │ └── Embed.tsx
│ │ │ ├── Flex
│ │ │ │ ├── Flex.tsx
│ │ │ │ └── FlexItem.tsx
│ │ │ ├── Form
│ │ │ │ ├── Form.tsx
│ │ │ │ └── FormField.tsx
│ │ │ ├── Grid
│ │ │ │ └── Grid.tsx
│ │ │ ├── Header
│ │ │ │ ├── Header.tsx
│ │ │ │ └── HeaderDescription.tsx
│ │ │ ├── HierarchicalTree
│ │ │ │ ├── HierarchicalTree.tsx
│ │ │ │ ├── HierarchicalTreeItem.tsx
│ │ │ │ └── HierarchicalTreeTitle.tsx
│ │ │ ├── Icon
│ │ │ │ └── Icon.tsx
│ │ │ ├── Image
│ │ │ │ └── Image.tsx
│ │ │ ├── Input
│ │ │ │ └── Input.tsx
│ │ │ ├── ItemLayout
│ │ │ │ └── ItemLayout.tsx
│ │ │ ├── Label
│ │ │ │ └── Label.tsx
│ │ │ ├── Layout
│ │ │ │ └── Layout.tsx
│ │ │ ├── List
│ │ │ │ ├── List.tsx
│ │ │ │ ├── ListItem.tsx
│ │ │ │ └── listContext.ts
│ │ │ ├── Loader
│ │ │ │ └── Loader.tsx
│ │ │ ├── Menu
│ │ │ │ ├── Menu.tsx
│ │ │ │ ├── MenuDivider.tsx
│ │ │ │ └── MenuItem.tsx
│ │ │ ├── MenuButton
│ │ │ │ ├── MenuButton.tsx
│ │ │ │ └── focusUtils.ts
│ │ │ ├── Popup
│ │ │ │ ├── Popup.tsx
│ │ │ │ ├── PopupContent.tsx
│ │ │ │ └── createReferenceFromContextClick.ts
│ │ │ ├── Portal
│ │ │ │ ├── Portal.tsx
│ │ │ │ └── PortalInner.tsx
│ │ │ ├── Provider
│ │ │ │ ├── Provider.tsx
│ │ │ │ ├── ProviderConsumer.tsx
│ │ │ │ └── usePortalBox.ts
│ │ │ ├── RadioGroup
│ │ │ │ ├── RadioGroup.tsx
│ │ │ │ └── RadioGroupItem.tsx
│ │ │ ├── Reaction
│ │ │ │ ├── Reaction.tsx
│ │ │ │ └── ReactionGroup.tsx
│ │ │ ├── Segment
│ │ │ │ └── Segment.tsx
│ │ │ ├── Slider
│ │ │ │ └── Slider.tsx
│ │ │ ├── SplitButton
│ │ │ │ └── SplitButton.tsx
│ │ │ ├── Status
│ │ │ │ └── Status.tsx
│ │ │ ├── Table
│ │ │ │ ├── Table.tsx
│ │ │ │ ├── TableCell.tsx
│ │ │ │ └── TableRow.tsx
│ │ │ ├── Text
│ │ │ │ └── Text.tsx
│ │ │ ├── TextArea
│ │ │ │ └── TextArea.tsx
│ │ │ ├── Toolbar
│ │ │ │ ├── Toolbar.tsx
│ │ │ │ ├── ToolbarCustomItem.tsx
│ │ │ │ ├── ToolbarDivider.tsx
│ │ │ │ ├── ToolbarItem.tsx
│ │ │ │ ├── ToolbarMenu.tsx
│ │ │ │ ├── ToolbarMenuDivider.tsx
│ │ │ │ ├── ToolbarMenuItem.tsx
│ │ │ │ ├── ToolbarMenuRadioGroup.tsx
│ │ │ │ └── ToolbarRadioGroup.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── TooltipContent.tsx
│ │ │ ├── Tree
│ │ │ │ ├── Tree.tsx
│ │ │ │ ├── TreeItem.tsx
│ │ │ │ ├── TreeTitle.tsx
│ │ │ │ └── utils
│ │ │ │ │ └── index.ts
│ │ │ └── Video
│ │ │ │ └── Video.tsx
│ │ ├── index.ts
│ │ ├── styles
│ │ │ ├── debugStyles.ts
│ │ │ └── translateAlignProp.ts
│ │ ├── themes
│ │ │ ├── colorUtils.ts
│ │ │ ├── font-awesome
│ │ │ │ ├── components
│ │ │ │ │ └── Icon
│ │ │ │ │ │ └── iconNames.ts
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── teams-dark
│ │ │ │ ├── colors.ts
│ │ │ │ ├── componentVariables.ts
│ │ │ │ ├── components
│ │ │ │ │ ├── Alert
│ │ │ │ │ │ └── alertVariables.ts
│ │ │ │ │ ├── Attachment
│ │ │ │ │ │ └── attachmentVariables.ts
│ │ │ │ │ ├── Chat
│ │ │ │ │ │ ├── chatMessageVariables.ts
│ │ │ │ │ │ └── chatVariables.ts
│ │ │ │ │ ├── Dialog
│ │ │ │ │ │ └── dialogVariables.ts
│ │ │ │ │ ├── Divider
│ │ │ │ │ │ └── dividerVariables.ts
│ │ │ │ │ ├── Dropdown
│ │ │ │ │ │ └── dropdownVariables.ts
│ │ │ │ │ ├── Header
│ │ │ │ │ │ ├── headerDescriptionVariables.ts
│ │ │ │ │ │ └── headerVariables.ts
│ │ │ │ │ ├── HierarchicalTree
│ │ │ │ │ │ └── hierarchicalTreeTitleVariables.ts
│ │ │ │ │ ├── Icon
│ │ │ │ │ │ └── iconVariables.ts
│ │ │ │ │ ├── Label
│ │ │ │ │ │ └── labelVariables.ts
│ │ │ │ │ ├── List
│ │ │ │ │ │ └── listItemVariables.ts
│ │ │ │ │ ├── Menu
│ │ │ │ │ │ └── menuVariables.ts
│ │ │ │ │ ├── Provider
│ │ │ │ │ │ └── providerVariables.ts
│ │ │ │ │ ├── RadioGroup
│ │ │ │ │ │ └── radioGroupItemVariables.ts
│ │ │ │ │ ├── Reaction
│ │ │ │ │ │ └── reactionVariables.ts
│ │ │ │ │ ├── Segment
│ │ │ │ │ │ └── segmentVariables.ts
│ │ │ │ │ └── Text
│ │ │ │ │ │ └── textVariables.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── siteVariables.ts
│ │ │ ├── teams-high-contrast
│ │ │ │ ├── colors.ts
│ │ │ │ ├── componentStyles.ts
│ │ │ │ ├── componentVariables.ts
│ │ │ │ ├── components
│ │ │ │ │ ├── Alert
│ │ │ │ │ │ ├── alertStyles.ts
│ │ │ │ │ │ └── alertVariables.ts
│ │ │ │ │ ├── Attachment
│ │ │ │ │ │ ├── attachmentStyles.ts
│ │ │ │ │ │ └── attachmentVariables.ts
│ │ │ │ │ ├── Avatar
│ │ │ │ │ │ └── avatarVariables.ts
│ │ │ │ │ ├── Button
│ │ │ │ │ │ ├── buttonStyles.ts
│ │ │ │ │ │ └── buttonVariables.ts
│ │ │ │ │ ├── Chat
│ │ │ │ │ │ ├── chatMessageVariables.ts
│ │ │ │ │ │ └── chatVariables.ts
│ │ │ │ │ ├── Checkbox
│ │ │ │ │ │ └── checkboxVariables.ts
│ │ │ │ │ ├── Dialog
│ │ │ │ │ │ ├── dialogStyles.ts
│ │ │ │ │ │ └── dialogVariables.ts
│ │ │ │ │ ├── Divider
│ │ │ │ │ │ └── dividerVariables.ts
│ │ │ │ │ ├── Dropdown
│ │ │ │ │ │ ├── dropdownStyles.ts
│ │ │ │ │ │ └── dropdownVariables.ts
│ │ │ │ │ ├── Header
│ │ │ │ │ │ └── headerVariables.ts
│ │ │ │ │ ├── HierarchicalTree
│ │ │ │ │ │ └── hierarchicalTreeTitleVariables.ts
│ │ │ │ │ ├── Input
│ │ │ │ │ │ └── inputVariables.ts
│ │ │ │ │ ├── Label
│ │ │ │ │ │ └── labelVariables.ts
│ │ │ │ │ ├── List
│ │ │ │ │ │ └── listItemVariables.ts
│ │ │ │ │ ├── Menu
│ │ │ │ │ │ ├── menuItemStyles.ts
│ │ │ │ │ │ └── menuVariables.ts
│ │ │ │ │ ├── Provider
│ │ │ │ │ │ └── providerVariables.ts
│ │ │ │ │ ├── RadioGroup
│ │ │ │ │ │ └── radioGroupItemVariables.ts
│ │ │ │ │ ├── Reaction
│ │ │ │ │ │ └── reactionVariables.ts
│ │ │ │ │ ├── Segment
│ │ │ │ │ │ └── segmentVariables.ts
│ │ │ │ │ ├── Status
│ │ │ │ │ │ └── statusVariables.ts
│ │ │ │ │ ├── Text
│ │ │ │ │ │ └── textVariables.ts
│ │ │ │ │ ├── TextArea
│ │ │ │ │ │ └── textAreaVariables.ts
│ │ │ │ │ ├── Toolbar
│ │ │ │ │ │ └── toolbarVariables.ts
│ │ │ │ │ └── Tooltip
│ │ │ │ │ │ └── tooltipContentVariables.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── siteVariables.ts
│ │ │ ├── teams
│ │ │ │ ├── animations
│ │ │ │ │ ├── fade.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── scale.ts
│ │ │ │ │ ├── slide.ts
│ │ │ │ │ └── timingFunctions.ts
│ │ │ │ ├── categoryColors.ts
│ │ │ │ ├── colors.ts
│ │ │ │ ├── componentStyles.ts
│ │ │ │ ├── componentVariables.ts
│ │ │ │ ├── components
│ │ │ │ │ ├── Accordion
│ │ │ │ │ │ ├── accordionContentStyles.ts
│ │ │ │ │ │ ├── accordionStyles.ts
│ │ │ │ │ │ └── accordionTitleStyles.ts
│ │ │ │ │ ├── Alert
│ │ │ │ │ │ ├── alertStyles.ts
│ │ │ │ │ │ └── alertVariables.ts
│ │ │ │ │ ├── Attachment
│ │ │ │ │ │ ├── attachmentStyles.ts
│ │ │ │ │ │ └── attachmentVariables.ts
│ │ │ │ │ ├── Avatar
│ │ │ │ │ │ ├── avatarStyles.ts
│ │ │ │ │ │ └── avatarVariables.ts
│ │ │ │ │ ├── Button
│ │ │ │ │ │ ├── buttonGroupStyles.ts
│ │ │ │ │ │ ├── buttonStyles.ts
│ │ │ │ │ │ └── buttonVariables.ts
│ │ │ │ │ ├── Carousel
│ │ │ │ │ │ ├── carouselItemStyles.ts
│ │ │ │ │ │ ├── carouselItemVariables.ts
│ │ │ │ │ │ ├── carouselNavigationItemStyles.ts
│ │ │ │ │ │ ├── carouselNavigationItemVariables.ts
│ │ │ │ │ │ ├── carouselNavigationStyles.ts
│ │ │ │ │ │ ├── carouselNavigationVariables.ts
│ │ │ │ │ │ ├── carouselStyles.ts
│ │ │ │ │ │ └── carouselVariables.ts
│ │ │ │ │ ├── Chat
│ │ │ │ │ │ ├── chatItemStyles.ts
│ │ │ │ │ │ ├── chatItemVariables.ts
│ │ │ │ │ │ ├── chatMessageStyles.ts
│ │ │ │ │ │ ├── chatMessageVariables.ts
│ │ │ │ │ │ ├── chatStyles.ts
│ │ │ │ │ │ └── chatVariables.ts
│ │ │ │ │ ├── Checkbox
│ │ │ │ │ │ ├── checkboxStyles.ts
│ │ │ │ │ │ └── checkboxVariables.ts
│ │ │ │ │ ├── Dialog
│ │ │ │ │ │ ├── dialogFooterStyles.ts
│ │ │ │ │ │ ├── dialogStyles.ts
│ │ │ │ │ │ └── dialogVariables.ts
│ │ │ │ │ ├── Divider
│ │ │ │ │ │ ├── dividerStyles.ts
│ │ │ │ │ │ └── dividerVariables.ts
│ │ │ │ │ ├── Dropdown
│ │ │ │ │ │ ├── dropdownItemStyles.ts
│ │ │ │ │ │ ├── dropdownItemVariables.ts
│ │ │ │ │ │ ├── dropdownSearchInputStyles.ts
│ │ │ │ │ │ ├── dropdownSearchInputVariables.ts
│ │ │ │ │ │ ├── dropdownSelectedItemStyles.ts
│ │ │ │ │ │ ├── dropdownSelectedItemVariables.ts
│ │ │ │ │ │ ├── dropdownStyles.ts
│ │ │ │ │ │ └── dropdownVariables.ts
│ │ │ │ │ ├── Embed
│ │ │ │ │ │ ├── embedStyles.ts
│ │ │ │ │ │ └── embedVariables.ts
│ │ │ │ │ ├── Flex
│ │ │ │ │ │ ├── flexItemStyles.ts
│ │ │ │ │ │ ├── flexItemVariables.ts
│ │ │ │ │ │ ├── flexStyles.ts
│ │ │ │ │ │ ├── flexVariables.ts
│ │ │ │ │ │ └── utils.ts
│ │ │ │ │ ├── Form
│ │ │ │ │ │ ├── formFieldStyles.ts
│ │ │ │ │ │ └── formStyles.ts
│ │ │ │ │ ├── Grid
│ │ │ │ │ │ ├── gridStyles.ts
│ │ │ │ │ │ └── gridVariables.ts
│ │ │ │ │ ├── Header
│ │ │ │ │ │ ├── headerDescriptionStyles.ts
│ │ │ │ │ │ ├── headerDescriptionVariables.ts
│ │ │ │ │ │ ├── headerStyles.ts
│ │ │ │ │ │ └── headerVariables.ts
│ │ │ │ │ ├── HierarchicalTree
│ │ │ │ │ │ ├── hierarchicalTreeItemStyles.ts
│ │ │ │ │ │ ├── hierarchicalTreeStyles.ts
│ │ │ │ │ │ ├── hierarchicalTreeTitleStyles.ts
│ │ │ │ │ │ └── hierarchicalTreeTitleVariables.ts
│ │ │ │ │ ├── Icon
│ │ │ │ │ │ ├── iconStyles.ts
│ │ │ │ │ │ ├── iconVariables.ts
│ │ │ │ │ │ └── svg
│ │ │ │ │ │ │ ├── ProcessedIcons
│ │ │ │ │ │ │ ├── create-index.sh
│ │ │ │ │ │ │ ├── icons-accept.tsx
│ │ │ │ │ │ │ ├── icons-add-participant.tsx
│ │ │ │ │ │ │ ├── icons-add.tsx
│ │ │ │ │ │ │ ├── icons-analytics.tsx
│ │ │ │ │ │ │ ├── icons-apps.tsx
│ │ │ │ │ │ │ ├── icons-archive.tsx
│ │ │ │ │ │ │ ├── icons-arrow-down.tsx
│ │ │ │ │ │ │ ├── icons-arrow-left.tsx
│ │ │ │ │ │ │ ├── icons-arrow-right.tsx
│ │ │ │ │ │ │ ├── icons-arrow-up-small.tsx
│ │ │ │ │ │ │ ├── icons-arrow-up.tsx
│ │ │ │ │ │ │ ├── icons-assignments.tsx
│ │ │ │ │ │ │ ├── icons-attachment.tsx
│ │ │ │ │ │ │ ├── icons-audio.tsx
│ │ │ │ │ │ │ ├── icons-backspace.tsx
│ │ │ │ │ │ │ ├── icons-badge-add.tsx
│ │ │ │ │ │ │ ├── icons-badge.tsx
│ │ │ │ │ │ │ ├── icons-bell-mute.tsx
│ │ │ │ │ │ │ ├── icons-bell.tsx
│ │ │ │ │ │ │ ├── icons-block.tsx
│ │ │ │ │ │ │ ├── icons-blur-background.tsx
│ │ │ │ │ │ │ ├── icons-bold.tsx
│ │ │ │ │ │ │ ├── icons-bookmark.tsx
│ │ │ │ │ │ │ ├── icons-bot.tsx
│ │ │ │ │ │ │ ├── icons-broadcast-view-fullscreen.tsx
│ │ │ │ │ │ │ ├── icons-broadcast-view-left.tsx
│ │ │ │ │ │ │ ├── icons-broadcast-view-right.tsx
│ │ │ │ │ │ │ ├── icons-broadcast.tsx
│ │ │ │ │ │ │ ├── icons-bullets.tsx
│ │ │ │ │ │ │ ├── icons-calendar.tsx
│ │ │ │ │ │ │ ├── icons-call-admit-all.tsx
│ │ │ │ │ │ │ ├── icons-call-alert.tsx
│ │ │ │ │ │ │ ├── icons-call-audio.tsx
│ │ │ │ │ │ │ ├── icons-call-blocked.tsx
│ │ │ │ │ │ │ ├── icons-call-control-present-new.tsx
│ │ │ │ │ │ │ ├── icons-call-control-release.tsx
│ │ │ │ │ │ │ ├── icons-call-control-request.tsx
│ │ │ │ │ │ │ ├── icons-call-control-stop-presenting-new.tsx
│ │ │ │ │ │ │ ├── icons-call-dialpad.tsx
│ │ │ │ │ │ │ ├── icons-call-end.tsx
│ │ │ │ │ │ │ ├── icons-call-hold.tsx
│ │ │ │ │ │ │ ├── icons-call-incoming-video.tsx
│ │ │ │ │ │ │ ├── icons-call-meetup-line.tsx
│ │ │ │ │ │ │ ├── icons-call-microphone-off-filled.tsx
│ │ │ │ │ │ │ ├── icons-call-microphone-unmuting.tsx
│ │ │ │ │ │ │ ├── icons-call-missed-line.tsx
│ │ │ │ │ │ │ ├── icons-call-missed.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-connected.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-connecting-line.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-connecting.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-ending.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-failed.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-incoming-line.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-incoming.tsx
│ │ │ │ │ │ │ ├── icons-call-participant-onhold.tsx
│ │ │ │ │ │ │ ├── icons-call-pstn-full.tsx
│ │ │ │ │ │ │ ├── icons-call-pstn.tsx
│ │ │ │ │ │ │ ├── icons-call-recording.tsx
│ │ │ │ │ │ │ ├── icons-call-switch-camera.tsx
│ │ │ │ │ │ │ ├── icons-call-transfer-notification.tsx
│ │ │ │ │ │ │ ├── icons-call-transfer.tsx
│ │ │ │ │ │ │ ├── icons-call-video-filled.tsx
│ │ │ │ │ │ │ ├── icons-call-video-line-off.tsx
│ │ │ │ │ │ │ ├── icons-call-video-line.tsx
│ │ │ │ │ │ │ ├── icons-call-video.tsx
│ │ │ │ │ │ │ ├── icons-call.tsx
│ │ │ │ │ │ │ ├── icons-canvas-addpage.tsx
│ │ │ │ │ │ │ ├── icons-changename.tsx
│ │ │ │ │ │ │ ├── icons-channel-icon.tsx
│ │ │ │ │ │ │ ├── icons-chat.tsx
│ │ │ │ │ │ │ ├── icons-checkbox-selected.tsx
│ │ │ │ │ │ │ ├── icons-checkbox-unselected.tsx
│ │ │ │ │ │ │ ├── icons-chevron-down.tsx
│ │ │ │ │ │ │ ├── icons-chevron-left.tsx
│ │ │ │ │ │ │ ├── icons-chevron-right.tsx
│ │ │ │ │ │ │ ├── icons-chevronmed-left.tsx
│ │ │ │ │ │ │ ├── icons-chevronmed-right.tsx
│ │ │ │ │ │ │ ├── icons-chrome-maximize.tsx
│ │ │ │ │ │ │ ├── icons-chrome-minimize.tsx
│ │ │ │ │ │ │ ├── icons-chrome-unmaximize.tsx
│ │ │ │ │ │ │ ├── icons-close.tsx
│ │ │ │ │ │ │ ├── icons-closed-caption.tsx
│ │ │ │ │ │ │ ├── icons-code.tsx
│ │ │ │ │ │ │ ├── icons-codesnippet.tsx
│ │ │ │ │ │ │ ├── icons-collapse.tsx
│ │ │ │ │ │ │ ├── icons-compose-ext-menu-item.tsx
│ │ │ │ │ │ │ ├── icons-compose-extension-pin.tsx
│ │ │ │ │ │ │ ├── icons-compose-extension-unpin.tsx
│ │ │ │ │ │ │ ├── icons-compose.tsx
│ │ │ │ │ │ │ ├── icons-connector-badge.tsx
│ │ │ │ │ │ │ ├── icons-contact-list.tsx
│ │ │ │ │ │ │ ├── icons-copy.tsx
│ │ │ │ │ │ │ ├── icons-cortana.tsx
│ │ │ │ │ │ │ ├── icons-desktop.tsx
│ │ │ │ │ │ │ ├── icons-document.tsx
│ │ │ │ │ │ │ ├── icons-download.tsx
│ │ │ │ │ │ │ ├── icons-downloaded.tsx
│ │ │ │ │ │ │ ├── icons-dropdown.tsx
│ │ │ │ │ │ │ ├── icons-edit.tsx
│ │ │ │ │ │ │ ├── icons-email.tsx
│ │ │ │ │ │ │ ├── icons-emoji.tsx
│ │ │ │ │ │ │ ├── icons-error.tsx
│ │ │ │ │ │ │ ├── icons-expand.tsx
│ │ │ │ │ │ │ ├── icons-eye-friendlier.tsx
│ │ │ │ │ │ │ ├── icons-eye-slash.tsx
│ │ │ │ │ │ │ ├── icons-eye.tsx
│ │ │ │ │ │ │ ├── icons-faq.tsx
│ │ │ │ │ │ │ ├── icons-feedback.tsx
│ │ │ │ │ │ │ ├── icons-files-aftereffects.tsx
│ │ │ │ │ │ │ ├── icons-files-document.tsx
│ │ │ │ │ │ │ ├── icons-files-error-full.tsx
│ │ │ │ │ │ │ ├── icons-files-flash.tsx
│ │ │ │ │ │ │ ├── icons-files-illustrator.tsx
│ │ │ │ │ │ │ ├── icons-files-indesign.tsx
│ │ │ │ │ │ │ ├── icons-files-link.tsx
│ │ │ │ │ │ │ ├── icons-files-missing.tsx
│ │ │ │ │ │ │ ├── icons-files-photoshop.tsx
│ │ │ │ │ │ │ ├── icons-files-sound.tsx
│ │ │ │ │ │ │ ├── icons-files-upload-small.tsx
│ │ │ │ │ │ │ ├── icons-files-upload.tsx
│ │ │ │ │ │ │ ├── icons-files.tsx
│ │ │ │ │ │ │ ├── icons-filter.tsx
│ │ │ │ │ │ │ ├── icons-folder-download.tsx
│ │ │ │ │ │ │ ├── icons-folder-new.tsx
│ │ │ │ │ │ │ ├── icons-folder-upload.tsx
│ │ │ │ │ │ │ ├── icons-folder.tsx
│ │ │ │ │ │ │ ├── icons-follow-channel.tsx
│ │ │ │ │ │ │ ├── icons-font-color.tsx
│ │ │ │ │ │ │ ├── icons-font-size.tsx
│ │ │ │ │ │ │ ├── icons-format.tsx
│ │ │ │ │ │ │ ├── icons-fullscreen.tsx
│ │ │ │ │ │ │ ├── icons-gallery.tsx
│ │ │ │ │ │ │ ├── icons-gettingstarted.tsx
│ │ │ │ │ │ │ ├── icons-gif.tsx
│ │ │ │ │ │ │ ├── icons-giphy.tsx
│ │ │ │ │ │ │ ├── icons-groups.tsx
│ │ │ │ │ │ │ ├── icons-hand.tsx
│ │ │ │ │ │ │ ├── icons-headset.tsx
│ │ │ │ │ │ │ ├── icons-helparticle.tsx
│ │ │ │ │ │ │ ├── icons-highlight.tsx
│ │ │ │ │ │ │ ├── icons-hive.tsx
│ │ │ │ │ │ │ ├── icons-home.tsx
│ │ │ │ │ │ │ ├── icons-horizontal-rule.tsx
│ │ │ │ │ │ │ ├── icons-image.tsx
│ │ │ │ │ │ │ ├── icons-indent.tsx
│ │ │ │ │ │ │ ├── icons-indicator.tsx
│ │ │ │ │ │ │ ├── icons-inferred.tsx
│ │ │ │ │ │ │ ├── icons-info.tsx
│ │ │ │ │ │ │ ├── icons-input-invalid.tsx
│ │ │ │ │ │ │ ├── icons-input-valid.tsx
│ │ │ │ │ │ │ ├── icons-invite-accepted.tsx
│ │ │ │ │ │ │ ├── icons-invite-cancelled.tsx
│ │ │ │ │ │ │ ├── icons-invite-declined.tsx
│ │ │ │ │ │ │ ├── icons-invite-not-responded.tsx
│ │ │ │ │ │ │ ├── icons-invite-person.tsx
│ │ │ │ │ │ │ ├── icons-invite-tentative.tsx
│ │ │ │ │ │ │ ├── icons-italic.tsx
│ │ │ │ │ │ │ ├── icons-keyboard.tsx
│ │ │ │ │ │ │ ├── icons-kollective.tsx
│ │ │ │ │ │ │ ├── icons-leave.tsx
│ │ │ │ │ │ │ ├── icons-like.tsx
│ │ │ │ │ │ │ ├── icons-liked.tsx
│ │ │ │ │ │ │ ├── icons-link.tsx
│ │ │ │ │ │ │ ├── icons-location-off.tsx
│ │ │ │ │ │ │ ├── icons-location.tsx
│ │ │ │ │ │ │ ├── icons-lock-14.tsx
│ │ │ │ │ │ │ ├── icons-lock-18.tsx
│ │ │ │ │ │ │ ├── icons-lock.tsx
│ │ │ │ │ │ │ ├── icons-manage-teams.tsx
│ │ │ │ │ │ │ ├── icons-mark-as-read.tsx
│ │ │ │ │ │ │ ├── icons-mark-as-unread.tsx
│ │ │ │ │ │ │ ├── icons-media-off.tsx
│ │ │ │ │ │ │ ├── icons-meeting-new.tsx
│ │ │ │ │ │ │ ├── icons-meeting-notes.tsx
│ │ │ │ │ │ │ ├── icons-megaphone.tsx
│ │ │ │ │ │ │ ├── icons-mention.tsx
│ │ │ │ │ │ │ ├── icons-menu-light.tsx
│ │ │ │ │ │ │ ├── icons-menu.tsx
│ │ │ │ │ │ │ ├── icons-message-seen.tsx
│ │ │ │ │ │ │ ├── icons-mic-off.tsx
│ │ │ │ │ │ │ ├── icons-mic.tsx
│ │ │ │ │ │ │ ├── icons-more.tsx
│ │ │ │ │ │ │ ├── icons-mov.tsx
│ │ │ │ │ │ │ ├── icons-move.tsx
│ │ │ │ │ │ │ ├── icons-msft-canvas.tsx
│ │ │ │ │ │ │ ├── icons-msft-delve.tsx
│ │ │ │ │ │ │ ├── icons-msft-exchange.tsx
│ │ │ │ │ │ │ ├── icons-msft-office.tsx
│ │ │ │ │ │ │ ├── icons-msft-onedrive.tsx
│ │ │ │ │ │ │ ├── icons-msft-onenote-online.tsx
│ │ │ │ │ │ │ ├── icons-msft-onenote.tsx
│ │ │ │ │ │ │ ├── icons-msft-outlook-colored.tsx
│ │ │ │ │ │ │ ├── icons-msft-outlook.tsx
│ │ │ │ │ │ │ ├── icons-msft-planner.tsx
│ │ │ │ │ │ │ ├── icons-msft-powerbi.tsx
│ │ │ │ │ │ │ ├── icons-msft-ppt-online.tsx
│ │ │ │ │ │ │ ├── icons-msft-ppt.tsx
│ │ │ │ │ │ │ ├── icons-msft-sharepoint.tsx
│ │ │ │ │ │ │ ├── icons-msft-sp-doc-library.tsx
│ │ │ │ │ │ │ ├── icons-msft-stream.tsx
│ │ │ │ │ │ │ ├── icons-msft-teams.tsx
│ │ │ │ │ │ │ ├── icons-msft-visio.tsx
│ │ │ │ │ │ │ ├── icons-msft-word-online.tsx
│ │ │ │ │ │ │ ├── icons-msft-word.tsx
│ │ │ │ │ │ │ ├── icons-msft-xl-online.tsx
│ │ │ │ │ │ │ ├── icons-msft-xl.tsx
│ │ │ │ │ │ │ ├── icons-mutechat.tsx
│ │ │ │ │ │ │ ├── icons-my-activity.tsx
│ │ │ │ │ │ │ ├── icons-new-contactgroup.tsx
│ │ │ │ │ │ │ ├── icons-newtab.tsx
│ │ │ │ │ │ │ ├── icons-no-chat.tsx
│ │ │ │ │ │ │ ├── icons-notes.tsx
│ │ │ │ │ │ │ ├── icons-notification-off.tsx
│ │ │ │ │ │ │ ├── icons-number-list.tsx
│ │ │ │ │ │ │ ├── icons-onenote-section.tsx
│ │ │ │ │ │ │ ├── icons-oof.tsx
│ │ │ │ │ │ │ ├── icons-open-external-link-off.tsx
│ │ │ │ │ │ │ ├── icons-open-inside-small.tsx
│ │ │ │ │ │ │ ├── icons-open-inside.tsx
│ │ │ │ │ │ │ ├── icons-open-new-window-filled.tsx
│ │ │ │ │ │ │ ├── icons-open-new-window.tsx
│ │ │ │ │ │ │ ├── icons-open-outside.tsx
│ │ │ │ │ │ │ ├── icons-org-wide.tsx
│ │ │ │ │ │ │ ├── icons-org.tsx
│ │ │ │ │ │ │ ├── icons-outdent.tsx
│ │ │ │ │ │ │ ├── icons-outline.tsx
│ │ │ │ │ │ │ ├── icons-participant-remove.tsx
│ │ │ │ │ │ │ ├── icons-paste.tsx
│ │ │ │ │ │ │ ├── icons-patharrow.tsx
│ │ │ │ │ │ │ ├── icons-pc-audio-stop.tsx
│ │ │ │ │ │ │ ├── icons-pc-audio.tsx
│ │ │ │ │ │ │ ├── icons-pdf.tsx
│ │ │ │ │ │ │ ├── icons-person.tsx
│ │ │ │ │ │ │ ├── icons-pin.tsx
│ │ │ │ │ │ │ ├── icons-play-forward.tsx
│ │ │ │ │ │ │ ├── icons-play-pause.tsx
│ │ │ │ │ │ │ ├── icons-play.tsx
│ │ │ │ │ │ │ ├── icons-plus-circled.tsx
│ │ │ │ │ │ │ ├── icons-poll.tsx
│ │ │ │ │ │ │ ├── icons-presence-available.tsx
│ │ │ │ │ │ │ ├── icons-presence-stroke.tsx
│ │ │ │ │ │ │ ├── icons-promoted.tsx
│ │ │ │ │ │ │ ├── icons-qna.tsx
│ │ │ │ │ │ │ ├── icons-quick-response.tsx
│ │ │ │ │ │ │ ├── icons-quote.tsx
│ │ │ │ │ │ │ ├── icons-read-aloud.tsx
│ │ │ │ │ │ │ ├── icons-recent.tsx
│ │ │ │ │ │ │ ├── icons-recents.tsx
│ │ │ │ │ │ │ ├── icons-recurrence.tsx
│ │ │ │ │ │ │ ├── icons-redbang.tsx
│ │ │ │ │ │ │ ├── icons-redo.tsx
│ │ │ │ │ │ │ ├── icons-refresh.tsx
│ │ │ │ │ │ │ ├── icons-remove-format.tsx
│ │ │ │ │ │ │ ├── icons-reply.tsx
│ │ │ │ │ │ │ ├── icons-reset-zoom.tsx
│ │ │ │ │ │ │ ├── icons-retry.tsx
│ │ │ │ │ │ │ ├── icons-roster.tsx
│ │ │ │ │ │ │ ├── icons-screen-zoom-in.tsx
│ │ │ │ │ │ │ ├── icons-screen-zoom-out.tsx
│ │ │ │ │ │ │ ├── icons-search.tsx
│ │ │ │ │ │ │ ├── icons-send.tsx
│ │ │ │ │ │ │ ├── icons-settings.tsx
│ │ │ │ │ │ │ ├── icons-sfb-viewbox-32.tsx
│ │ │ │ │ │ │ ├── icons-share-object.tsx
│ │ │ │ │ │ │ ├── icons-share.tsx
│ │ │ │ │ │ │ ├── icons-sketch.tsx
│ │ │ │ │ │ │ ├── icons-snooze.tsx
│ │ │ │ │ │ │ ├── icons-speaker-mute.tsx
│ │ │ │ │ │ │ ├── icons-speaker-off.tsx
│ │ │ │ │ │ │ ├── icons-speaker-slashed.tsx
│ │ │ │ │ │ │ ├── icons-star.tsx
│ │ │ │ │ │ │ ├── icons-starred.tsx
│ │ │ │ │ │ │ ├── icons-status-yo.tsx
│ │ │ │ │ │ │ ├── icons-sticker.tsx
│ │ │ │ │ │ │ ├── icons-strike.tsx
│ │ │ │ │ │ │ ├── icons-tab-badge.tsx
│ │ │ │ │ │ │ ├── icons-table-add.tsx
│ │ │ │ │ │ │ ├── icons-table-delete.tsx
│ │ │ │ │ │ │ ├── icons-table.tsx
│ │ │ │ │ │ │ ├── icons-team-create.tsx
│ │ │ │ │ │ │ ├── icons-team-discover.tsx
│ │ │ │ │ │ │ ├── icons-teams.tsx
│ │ │ │ │ │ │ ├── icons-tentative.tsx
│ │ │ │ │ │ │ ├── icons-time-zone-day.tsx
│ │ │ │ │ │ │ ├── icons-time-zone-night.tsx
│ │ │ │ │ │ │ ├── icons-to-do-list.tsx
│ │ │ │ │ │ │ ├── icons-translation.tsx
│ │ │ │ │ │ │ ├── icons-trash-can.tsx
│ │ │ │ │ │ │ ├── icons-trending.tsx
│ │ │ │ │ │ │ ├── icons-triangle-diagonal-right-small.tsx
│ │ │ │ │ │ │ ├── icons-triangle-down-small.tsx
│ │ │ │ │ │ │ ├── icons-triangle-right-small.tsx
│ │ │ │ │ │ │ ├── icons-triangle-up-small.tsx
│ │ │ │ │ │ │ ├── icons-txt.tsx
│ │ │ │ │ │ │ ├── icons-underline.tsx
│ │ │ │ │ │ │ ├── icons-undo.tsx
│ │ │ │ │ │ │ ├── icons-unfollow-channel.tsx
│ │ │ │ │ │ │ ├── icons-urgent.tsx
│ │ │ │ │ │ │ ├── icons-video-off.tsx
│ │ │ │ │ │ │ ├── icons-video.tsx
│ │ │ │ │ │ │ ├── icons-voicemail.tsx
│ │ │ │ │ │ │ ├── icons-waffle.tsx
│ │ │ │ │ │ │ ├── icons-website.tsx
│ │ │ │ │ │ │ ├── icons-whiteboard.tsx
│ │ │ │ │ │ │ ├── icons-yammer.tsx
│ │ │ │ │ │ │ ├── icons-youtube.tsx
│ │ │ │ │ │ │ ├── icons-zip.tsx
│ │ │ │ │ │ │ ├── icons-zoom-in.tsx
│ │ │ │ │ │ │ ├── icons-zoom-out.tsx
│ │ │ │ │ │ │ ├── index-new.ts
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ └── process-icons.sh
│ │ │ │ │ │ │ ├── icons
│ │ │ │ │ │ │ ├── accept.tsx
│ │ │ │ │ │ │ ├── add.tsx
│ │ │ │ │ │ │ ├── addParticipant.tsx
│ │ │ │ │ │ │ ├── arrowDown.tsx
│ │ │ │ │ │ │ ├── arrowLeft.tsx
│ │ │ │ │ │ │ ├── arrowRight.tsx
│ │ │ │ │ │ │ ├── arrowUp.tsx
│ │ │ │ │ │ │ ├── audioOff.tsx
│ │ │ │ │ │ │ ├── ban.tsx
│ │ │ │ │ │ │ ├── bell.tsx
│ │ │ │ │ │ │ ├── bellMute.tsx
│ │ │ │ │ │ │ ├── bold.tsx
│ │ │ │ │ │ │ ├── bookmark.tsx
│ │ │ │ │ │ │ ├── broadcast.tsx
│ │ │ │ │ │ │ ├── bullets.tsx
│ │ │ │ │ │ │ ├── calendar.tsx
│ │ │ │ │ │ │ ├── call.tsx
│ │ │ │ │ │ │ ├── callBlocked.tsx
│ │ │ │ │ │ │ ├── callControlCloseTray.tsx
│ │ │ │ │ │ │ ├── callControlPresentNew.tsx
│ │ │ │ │ │ │ ├── callControlRelease.tsx
│ │ │ │ │ │ │ ├── callControlRequest.tsx
│ │ │ │ │ │ │ ├── callControlShare.tsx
│ │ │ │ │ │ │ ├── callControlStopPresentingNew.tsx
│ │ │ │ │ │ │ ├── callDialpad.tsx
│ │ │ │ │ │ │ ├── callEnd.tsx
│ │ │ │ │ │ │ ├── callMissedLine.tsx
│ │ │ │ │ │ │ ├── callParking.tsx
│ │ │ │ │ │ │ ├── callPstn.tsx
│ │ │ │ │ │ │ ├── callRecording.tsx
│ │ │ │ │ │ │ ├── callVideo.tsx
│ │ │ │ │ │ │ ├── callVideoOff.tsx
│ │ │ │ │ │ │ ├── canvasAddPage.tsx
│ │ │ │ │ │ │ ├── chat.tsx
│ │ │ │ │ │ │ ├── chevronDown.tsx
│ │ │ │ │ │ │ ├── chevronDownMedium.tsx
│ │ │ │ │ │ │ ├── chevronEnd.tsx
│ │ │ │ │ │ │ ├── chevronRightMedium.tsx
│ │ │ │ │ │ │ ├── chevronStart.tsx
│ │ │ │ │ │ │ ├── clipboardCopiedTo.tsx
│ │ │ │ │ │ │ ├── close.tsx
│ │ │ │ │ │ │ ├── closedCaptions.tsx
│ │ │ │ │ │ │ ├── codeSnippet.tsx
│ │ │ │ │ │ │ ├── collapse.tsx
│ │ │ │ │ │ │ ├── companion.tsx
│ │ │ │ │ │ │ ├── download.tsx
│ │ │ │ │ │ │ ├── edit.tsx
│ │ │ │ │ │ │ ├── email.tsx
│ │ │ │ │ │ │ ├── emoji.tsx
│ │ │ │ │ │ │ ├── error.tsx
│ │ │ │ │ │ │ ├── exclamationCircle.tsx
│ │ │ │ │ │ │ ├── exclamationTriangle.tsx
│ │ │ │ │ │ │ ├── expand.tsx
│ │ │ │ │ │ │ ├── eye.tsx
│ │ │ │ │ │ │ ├── eyeFriendlier.tsx
│ │ │ │ │ │ │ ├── eyeSlash.tsx
│ │ │ │ │ │ │ ├── filesAftereffects.tsx
│ │ │ │ │ │ │ ├── filesCode.tsx
│ │ │ │ │ │ │ ├── filesEmpty.tsx
│ │ │ │ │ │ │ ├── filesExcel.tsx
│ │ │ │ │ │ │ ├── filesExcelBrand.tsx
│ │ │ │ │ │ │ ├── filesFlash.tsx
│ │ │ │ │ │ │ ├── filesGif.tsx
│ │ │ │ │ │ │ ├── filesIllustrator.tsx
│ │ │ │ │ │ │ ├── filesImage.tsx
│ │ │ │ │ │ │ ├── filesIndesign.tsx
│ │ │ │ │ │ │ ├── filesOneNote.tsx
│ │ │ │ │ │ │ ├── filesOneNoteBrand.tsx
│ │ │ │ │ │ │ ├── filesPdf.tsx
│ │ │ │ │ │ │ ├── filesPhotoshop.tsx
│ │ │ │ │ │ │ ├── filesPowerPoint.tsx
│ │ │ │ │ │ │ ├── filesPowerPointBrand.tsx
│ │ │ │ │ │ │ ├── filesSketch.tsx
│ │ │ │ │ │ │ ├── filesSound.tsx
│ │ │ │ │ │ │ ├── filesTxt.tsx
│ │ │ │ │ │ │ ├── filesUpload.tsx
│ │ │ │ │ │ │ ├── filesVideo.tsx
│ │ │ │ │ │ │ ├── filesVisio.tsx
│ │ │ │ │ │ │ ├── filesVisioBrand.tsx
│ │ │ │ │ │ │ ├── filesWord.tsx
│ │ │ │ │ │ │ ├── filesWordBrand.tsx
│ │ │ │ │ │ │ ├── filesZip.tsx
│ │ │ │ │ │ │ ├── flag.tsx
│ │ │ │ │ │ │ ├── fontColor.tsx
│ │ │ │ │ │ │ ├── fontSize.tsx
│ │ │ │ │ │ │ ├── format.tsx
│ │ │ │ │ │ │ ├── gallery.tsx
│ │ │ │ │ │ │ ├── giphy.tsx
│ │ │ │ │ │ │ ├── hand.tsx
│ │ │ │ │ │ │ ├── highlight.tsx
│ │ │ │ │ │ │ ├── horizontalRule.tsx
│ │ │ │ │ │ │ ├── iconCircle.tsx
│ │ │ │ │ │ │ ├── image-unavailable.tsx
│ │ │ │ │ │ │ ├── indent.tsx
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── info.tsx
│ │ │ │ │ │ │ ├── italic.tsx
│ │ │ │ │ │ │ ├── leave.tsx
│ │ │ │ │ │ │ ├── lightning.tsx
│ │ │ │ │ │ │ ├── like.tsx
│ │ │ │ │ │ │ ├── link.tsx
│ │ │ │ │ │ │ ├── lock.tsx
│ │ │ │ │ │ │ ├── markAsUnread.tsx
│ │ │ │ │ │ │ ├── meetingNew.tsx
│ │ │ │ │ │ │ ├── mention.tsx
│ │ │ │ │ │ │ ├── menu.tsx
│ │ │ │ │ │ │ ├── messageSeen.tsx
│ │ │ │ │ │ │ ├── mic.tsx
│ │ │ │ │ │ │ ├── micOff.tsx
│ │ │ │ │ │ │ ├── microsoftStream.tsx
│ │ │ │ │ │ │ ├── more.tsx
│ │ │ │ │ │ │ ├── noPresenter.tsx
│ │ │ │ │ │ │ ├── notes.tsx
│ │ │ │ │ │ │ ├── notificationsMuted.tsx
│ │ │ │ │ │ │ ├── numberList.tsx
│ │ │ │ │ │ │ ├── oneDrive.tsx
│ │ │ │ │ │ │ ├── openOutside.tsx
│ │ │ │ │ │ │ ├── outdent.tsx
│ │ │ │ │ │ │ ├── paperclip.tsx
│ │ │ │ │ │ │ ├── participantRemove.tsx
│ │ │ │ │ │ │ ├── pause.tsx
│ │ │ │ │ │ │ ├── pauseThick.tsx
│ │ │ │ │ │ │ ├── phoneArrow.tsx
│ │ │ │ │ │ │ ├── phoneClock.tsx
│ │ │ │ │ │ │ ├── play.tsx
│ │ │ │ │ │ │ ├── plugs.tsx
│ │ │ │ │ │ │ ├── poll.tsx
│ │ │ │ │ │ │ ├── presenceAvailable.tsx
│ │ │ │ │ │ │ ├── presenceStroke.tsx
│ │ │ │ │ │ │ ├── presenter.tsx
│ │ │ │ │ │ │ ├── qna.tsx
│ │ │ │ │ │ │ ├── questionCircle.tsx
│ │ │ │ │ │ │ ├── quote.tsx
│ │ │ │ │ │ │ ├── read-aloud.tsx
│ │ │ │ │ │ │ ├── redbang.tsx
│ │ │ │ │ │ │ ├── redo.tsx
│ │ │ │ │ │ │ ├── removeFormat.tsx
│ │ │ │ │ │ │ ├── reply.tsx
│ │ │ │ │ │ │ ├── retry.tsx
│ │ │ │ │ │ │ ├── robot.tsx
│ │ │ │ │ │ │ ├── screencast.tsx
│ │ │ │ │ │ │ ├── search.tsx
│ │ │ │ │ │ │ ├── send.tsx
│ │ │ │ │ │ │ ├── settings.tsx
│ │ │ │ │ │ │ ├── settingsAudio.tsx
│ │ │ │ │ │ │ ├── shareAlt.tsx
│ │ │ │ │ │ │ ├── shareTo.tsx
│ │ │ │ │ │ │ ├── skypeLogo.tsx
│ │ │ │ │ │ │ ├── snooze.tsx
│ │ │ │ │ │ │ ├── speakerMute.tsx
│ │ │ │ │ │ │ ├── star.tsx
│ │ │ │ │ │ │ ├── sticker.tsx
│ │ │ │ │ │ │ ├── strike.tsx
│ │ │ │ │ │ │ ├── survey.tsx
│ │ │ │ │ │ │ ├── survey20px.tsx
│ │ │ │ │ │ │ ├── sync.tsx
│ │ │ │ │ │ │ ├── table.tsx
│ │ │ │ │ │ │ ├── tableAdd.tsx
│ │ │ │ │ │ │ ├── tableDelete.tsx
│ │ │ │ │ │ │ ├── tabs.tsx
│ │ │ │ │ │ │ ├── tag.tsx
│ │ │ │ │ │ │ ├── teamCreate.tsx
│ │ │ │ │ │ │ ├── teams.tsx
│ │ │ │ │ │ │ ├── thumbtack.tsx
│ │ │ │ │ │ │ ├── thumbtackSlash.tsx
│ │ │ │ │ │ │ ├── toDoList.tsx
│ │ │ │ │ │ │ ├── translation.tsx
│ │ │ │ │ │ │ ├── trashCan.tsx
│ │ │ │ │ │ │ ├── triangleDown.tsx
│ │ │ │ │ │ │ ├── triangleRight.tsx
│ │ │ │ │ │ │ ├── triangleUp.tsx
│ │ │ │ │ │ │ ├── underline.tsx
│ │ │ │ │ │ │ ├── undo.tsx
│ │ │ │ │ │ │ ├── urgent.tsx
│ │ │ │ │ │ │ ├── userBlur.tsx
│ │ │ │ │ │ │ ├── userFriends.tsx
│ │ │ │ │ │ │ ├── userPhone.tsx
│ │ │ │ │ │ │ ├── videoCameraEmphasis.tsx
│ │ │ │ │ │ │ ├── volume.tsx
│ │ │ │ │ │ │ ├── volumeDown.tsx
│ │ │ │ │ │ │ ├── volumeUp.tsx
│ │ │ │ │ │ │ ├── windowMaximize.tsx
│ │ │ │ │ │ │ ├── windowMinimize.tsx
│ │ │ │ │ │ │ ├── windowRestore.tsx
│ │ │ │ │ │ │ └── yammer.tsx
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── processedIndex.ts
│ │ │ │ │ │ │ ├── teamsIconClassNames.ts
│ │ │ │ │ │ │ └── types.ts
│ │ │ │ │ ├── Image
│ │ │ │ │ │ ├── imageStyles.ts
│ │ │ │ │ │ └── imageVariables.ts
│ │ │ │ │ ├── Input
│ │ │ │ │ │ ├── inputStyles.ts
│ │ │ │ │ │ └── inputVariables.ts
│ │ │ │ │ ├── ItemLayout
│ │ │ │ │ │ ├── itemLayoutStyles.ts
│ │ │ │ │ │ └── itemLayoutVariables.ts
│ │ │ │ │ ├── Label
│ │ │ │ │ │ ├── labelStyles.ts
│ │ │ │ │ │ └── labelVariables.ts
│ │ │ │ │ ├── Layout
│ │ │ │ │ │ ├── layoutStyles.ts
│ │ │ │ │ │ └── layoutVariables.ts
│ │ │ │ │ ├── List
│ │ │ │ │ │ ├── listItemStyles.ts
│ │ │ │ │ │ ├── listItemVariables.ts
│ │ │ │ │ │ └── listStyles.ts
│ │ │ │ │ ├── Loader
│ │ │ │ │ │ ├── loaderStyles.ts
│ │ │ │ │ │ ├── loaderSvgDataUrl.ts
│ │ │ │ │ │ └── loaderVariables.ts
│ │ │ │ │ ├── Menu
│ │ │ │ │ │ ├── menuDividerStyles.ts
│ │ │ │ │ │ ├── menuDividerVariables.ts
│ │ │ │ │ │ ├── menuItemStyles.ts
│ │ │ │ │ │ ├── menuItemVariables.ts
│ │ │ │ │ │ ├── menuStyles.ts
│ │ │ │ │ │ └── menuVariables.ts
│ │ │ │ │ ├── MenuButton
│ │ │ │ │ │ └── menuButtonStyles.ts
│ │ │ │ │ ├── Popup
│ │ │ │ │ │ ├── popupContentStyles.ts
│ │ │ │ │ │ └── popupContentVariables.ts
│ │ │ │ │ ├── Provider
│ │ │ │ │ │ ├── providerStyles.ts
│ │ │ │ │ │ └── providerVariables.ts
│ │ │ │ │ ├── RadioGroup
│ │ │ │ │ │ ├── radioGroupItemStyles.ts
│ │ │ │ │ │ └── radioGroupItemVariables.ts
│ │ │ │ │ ├── Reaction
│ │ │ │ │ │ ├── reactionGroupStyles.ts
│ │ │ │ │ │ ├── reactionGroupVariables.ts
│ │ │ │ │ │ ├── reactionStyles.ts
│ │ │ │ │ │ └── reactionVariables.ts
│ │ │ │ │ ├── Segment
│ │ │ │ │ │ ├── segmentStyles.ts
│ │ │ │ │ │ └── segmentVariables.ts
│ │ │ │ │ ├── Slider
│ │ │ │ │ │ ├── sliderStyles.ts
│ │ │ │ │ │ └── sliderVariables.ts
│ │ │ │ │ ├── SplitButton
│ │ │ │ │ │ ├── splitButtonStyles.ts
│ │ │ │ │ │ └── splitButtonVariables.ts
│ │ │ │ │ ├── Status
│ │ │ │ │ │ ├── statusStyles.ts
│ │ │ │ │ │ └── statusVariables.ts
│ │ │ │ │ ├── Table
│ │ │ │ │ │ ├── tableCellStyles.ts
│ │ │ │ │ │ ├── tableCellVariables.ts
│ │ │ │ │ │ ├── tableRowStyles.ts
│ │ │ │ │ │ ├── tableRowVariables.ts
│ │ │ │ │ │ ├── tableStyles.ts
│ │ │ │ │ │ └── tableVariables.ts
│ │ │ │ │ ├── Text
│ │ │ │ │ │ ├── textStyles.ts
│ │ │ │ │ │ └── textVariables.ts
│ │ │ │ │ ├── TextArea
│ │ │ │ │ │ ├── textAreaStyles.ts
│ │ │ │ │ │ └── textAreaVariables.ts
│ │ │ │ │ ├── Toolbar
│ │ │ │ │ │ ├── toolbarCustomItemStyles.ts
│ │ │ │ │ │ ├── toolbarCustomItemVariables.ts
│ │ │ │ │ │ ├── toolbarDividerStyles.ts
│ │ │ │ │ │ ├── toolbarDividerVariables.ts
│ │ │ │ │ │ ├── toolbarItemStyles.ts
│ │ │ │ │ │ ├── toolbarItemVariables.ts
│ │ │ │ │ │ ├── toolbarMenuDividerStyles.ts
│ │ │ │ │ │ ├── toolbarMenuDividerVariables.ts
│ │ │ │ │ │ ├── toolbarMenuItemStyles.ts
│ │ │ │ │ │ ├── toolbarMenuItemVariables.ts
│ │ │ │ │ │ ├── toolbarMenuRadioGroupStyles.ts
│ │ │ │ │ │ ├── toolbarMenuRadioGroupVariables.ts
│ │ │ │ │ │ ├── toolbarMenuStyles.ts
│ │ │ │ │ │ ├── toolbarMenuVariables.ts
│ │ │ │ │ │ ├── toolbarRadioGroupStyles.ts
│ │ │ │ │ │ ├── toolbarStyles.ts
│ │ │ │ │ │ └── toolbarVariables.ts
│ │ │ │ │ ├── Tooltip
│ │ │ │ │ │ ├── tooltipContentStyles.ts
│ │ │ │ │ │ └── tooltipContentVariables.ts
│ │ │ │ │ ├── Tree
│ │ │ │ │ │ ├── treeItemStyles.ts
│ │ │ │ │ │ ├── treeStyles.ts
│ │ │ │ │ │ ├── treeTitleStyles.ts
│ │ │ │ │ │ └── treeTitleVariables.ts
│ │ │ │ │ └── Video
│ │ │ │ │ │ ├── videoStyles.ts
│ │ │ │ │ │ └── videoVariables.ts
│ │ │ │ ├── fontFaces.ts
│ │ │ │ ├── getBorderFocusStyles.ts
│ │ │ │ ├── getIconFillOrOutlineStyles.ts
│ │ │ │ ├── getPointerStyles.ts
│ │ │ │ ├── index.tsx
│ │ │ │ ├── pointerSvgUrl.ts
│ │ │ │ ├── siteVariables.ts
│ │ │ │ ├── staticStyles
│ │ │ │ │ ├── globalStyles.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── normalizeCSS.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── withProcessedIcons.ts
│ │ │ └── types.ts
│ │ ├── types.ts
│ │ ├── umd.ts
│ │ └── utils
│ │ │ ├── AutoControlledComponent.tsx
│ │ │ ├── UIComponent.tsx
│ │ │ ├── accessibility
│ │ │ ├── FocusHandling
│ │ │ │ └── FocusContainer.ts
│ │ │ └── Styles
│ │ │ │ └── accessibilityStyles.ts
│ │ │ ├── applyAccessibilityKeyHandlers.ts
│ │ │ ├── childrenExist.ts
│ │ │ ├── commonPropInterfaces.ts
│ │ │ ├── commonPropTypes.ts
│ │ │ ├── constants.ts
│ │ │ ├── createComponent.tsx
│ │ │ ├── createComponentInternal.ts
│ │ │ ├── doesNodeContainClick.tsx
│ │ │ ├── factories.ts
│ │ │ ├── felaDisableAnimationsPlugin.ts
│ │ │ ├── felaExpandCssShorthandsPlugin.ts
│ │ │ ├── felaFocusVisibleEnhancer.ts
│ │ │ ├── felaInvokeKeyframesPlugin.ts
│ │ │ ├── felaRenderer.tsx
│ │ │ ├── felaSanitizeCssPlugin.ts
│ │ │ ├── fontSizeUtility.ts
│ │ │ ├── getKindProp.ts
│ │ │ ├── getOrGenerateIdFromShorthand.ts
│ │ │ ├── htmlPropsUtils.tsx
│ │ │ ├── index.ts
│ │ │ ├── isBrowser.tsx
│ │ │ ├── isRightClick.ts
│ │ │ ├── mergeProviderContexts.ts
│ │ │ ├── positioner
│ │ │ ├── Popper.tsx
│ │ │ ├── getScrollParent.ts
│ │ │ ├── index.ts
│ │ │ ├── initialStyles.ts
│ │ │ ├── positioningHelper.ts
│ │ │ ├── types.internal.ts
│ │ │ └── types.ts
│ │ │ ├── providerMissingHandler.ts
│ │ │ ├── renderComponent.tsx
│ │ │ ├── rtlTextContainer.tsx
│ │ │ ├── stringLiteralsArray.ts
│ │ │ └── whatInput.ts
│ ├── test
│ │ ├── __mocks__
│ │ │ ├── lodash.ts
│ │ │ └── popper.js.ts
│ │ ├── setup.ts
│ │ ├── specs
│ │ │ ├── commonTests
│ │ │ │ ├── commonHelpers.ts
│ │ │ │ ├── eventTarget.ts
│ │ │ │ ├── handlesAccessibility.tsx
│ │ │ │ ├── htmlIsAccessibilityCompliant.ts
│ │ │ │ ├── implementsCollectionShorthandProp.tsx
│ │ │ │ ├── implementsShorthandProp.tsx
│ │ │ │ ├── implementsWrapperProp.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── isConformant.tsx
│ │ │ │ ├── isExportedAtTopLevel.tsx
│ │ │ │ └── stylesFunction-test.tsx
│ │ │ ├── components
│ │ │ │ ├── Accordion
│ │ │ │ │ ├── Accordion-test.tsx
│ │ │ │ │ ├── AccordionContent-test.tsx
│ │ │ │ │ └── AccordionTitle-test.tsx
│ │ │ │ ├── Alert
│ │ │ │ │ └── Alert-test.tsx
│ │ │ │ ├── Animation
│ │ │ │ │ └── Animation-test.tsx
│ │ │ │ ├── Attachment
│ │ │ │ │ └── Attachment-test.tsx
│ │ │ │ ├── Avatar
│ │ │ │ │ └── Avatar-test.tsx
│ │ │ │ ├── Button
│ │ │ │ │ ├── Button-test.tsx
│ │ │ │ │ └── ButtonGroup-test.tsx
│ │ │ │ ├── Carousel
│ │ │ │ │ ├── Carousel-test.tsx
│ │ │ │ │ ├── CarouselItem-test.tsx
│ │ │ │ │ ├── CarouselNavigation-test.tsx
│ │ │ │ │ └── CarouselNavigationItem-test.tsx
│ │ │ │ ├── Chat
│ │ │ │ │ ├── Chat-test.ts
│ │ │ │ │ ├── ChatItem-test.tsx
│ │ │ │ │ └── ChatMessage-test.tsx
│ │ │ │ ├── Checkbox
│ │ │ │ │ └── Checkbox-test.tsx
│ │ │ │ ├── Debug
│ │ │ │ │ └── utils-test.ts
│ │ │ │ ├── Dialog
│ │ │ │ │ ├── Dialog-test.tsx
│ │ │ │ │ └── DialogFooter-test.tsx
│ │ │ │ ├── Divider
│ │ │ │ │ └── Divider-test.tsx
│ │ │ │ ├── Dropdown
│ │ │ │ │ ├── Dropdown-test.tsx
│ │ │ │ │ ├── DropdownItem-test.tsx
│ │ │ │ │ ├── DropdownSelectedItem-test.tsx
│ │ │ │ │ └── test-utils.tsx
│ │ │ │ ├── Embed
│ │ │ │ │ └── Embed-test.tsx
│ │ │ │ ├── Form
│ │ │ │ │ ├── Form-test.tsx
│ │ │ │ │ └── FormField-test.tsx
│ │ │ │ ├── Grid
│ │ │ │ │ └── Grid-test.tsx
│ │ │ │ ├── Header
│ │ │ │ │ ├── Header-test.ts
│ │ │ │ │ └── HeaderDescription-test.ts
│ │ │ │ ├── HierarchicalTree
│ │ │ │ │ └── HierarchicalTree-test.tsx
│ │ │ │ ├── Icon
│ │ │ │ │ └── Icon-test.tsx
│ │ │ │ ├── Image
│ │ │ │ │ └── Image-test.tsx
│ │ │ │ ├── Input
│ │ │ │ │ └── Input-test.tsx
│ │ │ │ ├── ItemLayout
│ │ │ │ │ └── ItemLayout-test.ts
│ │ │ │ ├── Label
│ │ │ │ │ └── Label-test.tsx
│ │ │ │ ├── Layout
│ │ │ │ │ └── Layout-test.ts
│ │ │ │ ├── List
│ │ │ │ │ ├── List-test.tsx
│ │ │ │ │ └── ListItem-test.tsx
│ │ │ │ ├── Loader
│ │ │ │ │ └── Loader-test.tsx
│ │ │ │ ├── Menu
│ │ │ │ │ ├── Menu-test.tsx
│ │ │ │ │ ├── MenuDivider-test.ts
│ │ │ │ │ └── MenuItem-test.tsx
│ │ │ │ ├── MenuButton
│ │ │ │ │ └── MenuButton-test.tsx
│ │ │ │ ├── Popup
│ │ │ │ │ ├── Popup-test.tsx
│ │ │ │ │ └── PopupContent-test.ts
│ │ │ │ ├── Portal
│ │ │ │ │ └── Portal-test.tsx
│ │ │ │ ├── PortalInner
│ │ │ │ │ └── PortalInner-test.tsx
│ │ │ │ ├── Provider
│ │ │ │ │ ├── Provider-test.tsx
│ │ │ │ │ └── ProviderConsumer-test.tsx
│ │ │ │ ├── RadioGroup
│ │ │ │ │ ├── RadioGroup-test.tsx
│ │ │ │ │ └── RadioGroupItem-test.ts
│ │ │ │ ├── Reaction
│ │ │ │ │ ├── Reaction-test.tsx
│ │ │ │ │ └── ReactionGroup-test.tsx
│ │ │ │ ├── Segment
│ │ │ │ │ └── Segment-test.ts
│ │ │ │ ├── Slider
│ │ │ │ │ └── Slider-test.tsx
│ │ │ │ ├── SplitButton
│ │ │ │ │ └── SplitButton-test.tsx
│ │ │ │ ├── Status
│ │ │ │ │ └── Status-test.tsx
│ │ │ │ ├── Table
│ │ │ │ │ ├── Table-test.tsx
│ │ │ │ │ ├── TableCell-test.tsx
│ │ │ │ │ └── TableRow-test.tsx
│ │ │ │ ├── Text
│ │ │ │ │ └── Text-test.tsx
│ │ │ │ ├── TextArea
│ │ │ │ │ └── TextArea-test.tsx
│ │ │ │ ├── Toolbar
│ │ │ │ │ ├── Toolbar-test.tsx
│ │ │ │ │ ├── ToolbarCustomItem-test.ts
│ │ │ │ │ ├── ToolbarDivider-test.ts
│ │ │ │ │ ├── ToolbarItem-test.tsx
│ │ │ │ │ ├── ToolbarMenu-test.tsx
│ │ │ │ │ ├── ToolbarMenuDivider-test.ts
│ │ │ │ │ ├── ToolbarMenuItem-test.ts
│ │ │ │ │ ├── ToolbarMenuRadioGroup-test.ts
│ │ │ │ │ └── ToolbarRadioGroup-test.tsx
│ │ │ │ ├── Tooltip
│ │ │ │ │ ├── Tooltip-test.tsx
│ │ │ │ │ └── TooltipContent-test.ts
│ │ │ │ ├── Tree
│ │ │ │ │ ├── Tree-test.tsx
│ │ │ │ │ ├── TreeItem-test.tsx
│ │ │ │ │ └── TreeTitle-test.tsx
│ │ │ │ └── Video
│ │ │ │ │ └── Video-test.tsx
│ │ │ ├── themes
│ │ │ │ ├── colorUtils-test.ts
│ │ │ │ └── teams
│ │ │ │ │ └── components
│ │ │ │ │ └── Icon
│ │ │ │ │ └── Icon-test.tsx
│ │ │ └── utils
│ │ │ │ ├── AutoControlledComponent-test.tsx
│ │ │ │ ├── __snapshots__
│ │ │ │ ├── felaFocusVisibleEnhancer-test.ts.snap
│ │ │ │ └── felaRenderer-test.tsx.snap
│ │ │ │ ├── accessibility
│ │ │ │ └── FocusContainer-test.ts
│ │ │ │ ├── childrenExist-test.tsx
│ │ │ │ ├── createComponent-test.tsx
│ │ │ │ ├── doesNodeContainClick-test.ts
│ │ │ │ ├── factories-test.tsx
│ │ │ │ ├── felaDisableAnimationsPlugin-test.ts
│ │ │ │ ├── felaExpandCssShorthandsPlugin-test.ts
│ │ │ │ ├── felaFocusVisibleEnhancer-test.ts
│ │ │ │ ├── felaInvokeKeyframesPlugin-test.ts
│ │ │ │ ├── felaRenderer-test.tsx
│ │ │ │ ├── felaSanitizeCssPlugin-test.ts
│ │ │ │ ├── fontSizeUtility-test.ts
│ │ │ │ ├── htmlInputPropsUtils-test.ts
│ │ │ │ ├── isBrowser-test.ts
│ │ │ │ ├── mergeProviderContexts
│ │ │ │ ├── mergeBooleanValues-test.ts
│ │ │ │ └── mergeProviderContexts-test.ts
│ │ │ │ └── positioner
│ │ │ │ ├── getScrollParent-test.ts
│ │ │ │ └── positioningHelper-test.ts
│ │ └── utils
│ │ │ ├── assertNodeContains.ts
│ │ │ ├── consoleUtil.ts
│ │ │ ├── domEvent.ts
│ │ │ ├── findIntrinsicElement.ts
│ │ │ ├── getDisplayName.ts
│ │ │ ├── index.ts
│ │ │ ├── nextFrame.ts
│ │ │ ├── syntheticEvent.ts
│ │ │ └── withProvider.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── state
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── README.md
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── package.json
│ ├── src
│ │ ├── createManager.ts
│ │ ├── index.ts
│ │ ├── managers
│ │ │ ├── checkboxManager.ts
│ │ │ ├── dialogManager.ts
│ │ │ ├── dropdownManager.ts
│ │ │ └── sliderManager.ts
│ │ └── types.ts
│ ├── tsconfig.json
│ └── tslint.json
└── styles
│ ├── .eslintignore
│ ├── .eslintrc.json
│ ├── .gulp.js
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── gulpfile.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ ├── callable.ts
│ ├── createTheme.ts
│ ├── debugEnabled.ts
│ ├── deepmerge.ts
│ ├── index.ts
│ ├── mergeThemes.ts
│ ├── objectKeysToValues.ts
│ ├── toCompactArray.ts
│ ├── types.ts
│ └── withDebugId.ts
│ ├── test
│ ├── deepmerge-test.ts
│ ├── mergeThemes
│ │ ├── mergeComponentStyles-test.ts
│ │ ├── mergeComponentVariables-test.ts
│ │ ├── mergeFontFaces-test.ts
│ │ ├── mergeSiteVariables-test.ts
│ │ ├── mergeStaticStyles-test.ts
│ │ ├── mergeThemeVariables-test.ts
│ │ └── mergeThemes-test.ts
│ └── objectKeysToValues-test.ts
│ ├── tsconfig.json
│ └── tslint.json
├── perf
├── .eslintignore
├── .eslintrc.json
├── doc
│ ├── perf.md
│ └── perf_chart.png
├── package.json
├── src
│ ├── index.html
│ └── index.tsx
├── tsconfig.json
├── tslint.json
└── types.ts
├── scripts
├── bin
│ └── scripts.js
├── config
│ ├── api-extractor
│ │ └── api-extractor.common.json
│ ├── eslint
│ │ └── eslint.config.js
│ ├── jest
│ │ ├── flamegrillReporter.js
│ │ ├── jest-puppeteer.config.js
│ │ ├── jest.common.js
│ │ ├── jest.fluent-ui-react.js
│ │ ├── jest.puppeteer.js
│ │ ├── jestSetup.common.js
│ │ └── jestSetup.fluent-ui-react.js
│ ├── storybook
│ │ └── webpack.config.js
│ └── typescript
│ │ ├── tsconfig.common.json
│ │ └── tsconfig.stardust-ui.json
├── index.ts
├── just.config.ts
├── monorepo
│ ├── findGitRoot.ts
│ ├── getAllPackageDeps.ts
│ └── getAllPackageInfo.ts
├── package.json
├── tasks
│ ├── autoProjectRefsTask.ts
│ ├── e2eTask.ts
│ ├── httpServerTask.ts
│ ├── preset.ts
│ ├── publishPrepareTask.ts
│ └── storybookTask.ts
└── tsconfig.json
├── specs
├── Button.md
├── Checkbox.md
├── Icon.md
├── Link.md
├── Menu.md
└── Slider.md
├── tsconfig.json
├── tslint.json
├── types
├── jest-dom.d.ts
└── screener-runner
│ └── index.d.ts
└── yarn.lock
/.browserslistrc:
--------------------------------------------------------------------------------
1 | ### Browsers that we support
2 |
3 | >0.2%
4 | not dead
5 | not ie < 11
6 | not op_mini all
7 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["./build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # https://help.github.com/articles/about-codeowners/
2 |
3 | # Default owners
4 | * @davezuko @kuzhelov @layershifter @levithomason @miroslavstastny @mnajdova @kenotron @jdhuntington @ecraig12345 @dzearing @jasongore
5 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/.github/PULL_REQUEST_TEMPLATE.md
--------------------------------------------------------------------------------
/.gulp.js:
--------------------------------------------------------------------------------
1 | // https://github.com/gulpjs/gulp-cli#configuration
2 | module.exports = {
3 | flags: {
4 | require: '@fluentui/internal-tooling/babel/register',
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # editor configs
2 | .idea/
3 | .vscode/
4 |
5 | coverage/
6 | dist/
7 | lib/
8 | stats/
9 |
10 | package.json
11 |
12 | packages/ability-attributes/src/schema.ts
13 |
14 | CHANGELOG.md
15 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => ({
2 | ...require('@fluentui/internal-tooling/babel')(api),
3 | babelrcRoots: ['./packages/*'],
4 | })
5 |
--------------------------------------------------------------------------------
/build/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["./eslint/index.js"],
3 | "rules": {
4 | "no-console": "off"
5 | },
6 | "root": true
7 | }
8 |
--------------------------------------------------------------------------------
/build/babel/register.js:
--------------------------------------------------------------------------------
1 | require('@babel/register')({
2 | extensions: ['.js', '.ts', '.tsx'],
3 | ignore: [/node_modules/],
4 | rootMode: 'upward',
5 | })
6 |
--------------------------------------------------------------------------------
/build/dangerjs/detectNonApprovedDependencies/utils/packageNameUtils.ts:
--------------------------------------------------------------------------------
1 | export const getPackageName = (packageId: string): string => {
2 | return packageId.match(/^(.+)@[^@]+$/)[1]
3 | }
4 |
5 | export const getPackageVersion = (packageId: string): string => {
6 | return packageId.match(/@([^@]+)$/)[1]
7 | }
8 |
--------------------------------------------------------------------------------
/build/dangerjs/types.ts:
--------------------------------------------------------------------------------
1 | import { DangerDSLType } from 'danger'
2 |
3 | export type DangerJS = {
4 | danger: DangerDSLType
5 | markdown: (markdown: string) => void
6 | warn: (message: string) => void
7 | fail: (message: string) => void
8 | }
9 |
--------------------------------------------------------------------------------
/build/gulp/plugins/util/parseBuffer.ts:
--------------------------------------------------------------------------------
1 | import { parse } from '@babel/parser'
2 |
3 | const parseBuffer = buffer =>
4 | parse(buffer.toString(), {
5 | plugins: ['classProperties', 'jsx'],
6 | sourceType: 'module',
7 | })
8 |
9 | export default parseBuffer
10 |
--------------------------------------------------------------------------------
/build/gulp/plugins/util/parseDocblock.ts:
--------------------------------------------------------------------------------
1 | import * as doctrine from 'doctrine'
2 |
3 | const parseDocblock = (docblock: string) => {
4 | const { description = '', tags = [], ...rest } = doctrine.parse(docblock || '', { unwrap: true })
5 |
6 | return {
7 | ...rest,
8 | description,
9 | tags,
10 | }
11 | }
12 |
13 | export default parseDocblock
14 |
--------------------------------------------------------------------------------
/build/gulp/tasks/test-projects/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "import/no-unresolved": "off"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/build/gulp/tasks/test-projects/typings/index.tsx:
--------------------------------------------------------------------------------
1 | import * as FluentUI from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const App = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default App
11 |
--------------------------------------------------------------------------------
/build/gulp/tasks/test-projects/typings/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "target": "es5",
6 | "strict": true
7 | },
8 | "include": ["src"]
9 | }
10 |
--------------------------------------------------------------------------------
/build/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.common.json",
3 | "compilerOptions": {
4 | "allowSyntheticDefaultImports": true,
5 | "typeRoots": ["../types", "../node_modules/@types"],
6 | "types": ["node", "webpack-env", "screener-runner"]
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/codecov.yml:
--------------------------------------------------------------------------------
1 | coverage:
2 | ignore:
3 | - docs/*
4 | - packages/ability-attributes/src/*
5 | - packages/accessibility/src/behaviors/*
6 | - packages/react/src/themes/*
7 | - packages/react/src/styles/*
8 | - packages/react/test/*
9 |
--------------------------------------------------------------------------------
/docs/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/docs/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../build/eslint/index.js"],
3 | "rules": {
4 | "no-alert": "off"
5 | },
6 | "root": true
7 | }
8 |
--------------------------------------------------------------------------------
/docs/src/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/docs/src/add-yours.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/add-yours.png
--------------------------------------------------------------------------------
/docs/src/amazon-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/amazon-logo.png
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentControlsCodeSandbox'
2 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentControls/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentControls'
2 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentExample/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './ComponentExample'
2 | export { default } from './ComponentExample'
3 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentPerfExample/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentPerfExample'
2 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentProps/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentProps'
2 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentPropsTable/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentPropsTable'
2 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentSidebar/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentSidebar'
2 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts:
--------------------------------------------------------------------------------
1 | export * from './componentAPIs'
2 |
3 | export { default } from './ComponentSourceManager'
4 | export * from './ComponentSourceManager'
5 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/InlineMarkdown.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as ReactMarkdown from 'react-markdown'
3 |
4 | const InlineMarkdown: React.FunctionComponent<{ value: string }> = ({ value }) => (
5 |
6 | )
7 |
8 | export default InlineMarkdown
9 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/NonPublicSection.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import ExampleSection, { ExampleSectionProps } from './ExampleSection'
3 |
4 | const NonPublicSection: React.FC = props => {
5 | return process.env.NODE_ENV === 'development' ? : null
6 | }
7 |
8 | export default NonPublicSection
9 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/PerfChart/index.ts:
--------------------------------------------------------------------------------
1 | export { default as PerfChart } from './PerfChart'
2 | export { default as PerfDataProvider } from './PerfDataProvider'
3 | export { default as usePerfData } from './usePerfData'
4 |
--------------------------------------------------------------------------------
/docs/src/components/ComponentDoc/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './ComponentDoc'
2 |
--------------------------------------------------------------------------------
/docs/src/components/DocPage/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './DocPage'
2 |
--------------------------------------------------------------------------------
/docs/src/components/Editor/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Editor'
2 | export * from './Editor'
3 |
--------------------------------------------------------------------------------
/docs/src/components/ExampleSnippet/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './ExampleSnippet'
2 |
--------------------------------------------------------------------------------
/docs/src/config.ts:
--------------------------------------------------------------------------------
1 | const config = {
2 | getStatsUri: 'https://fluent-ui-react-stats.azurewebsites.net/api/GetPerfStats',
3 | }
4 |
5 | export default config
6 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Accordion/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Rtl from './Rtl'
4 | import Types from './Types'
5 | import Usage from './Usage'
6 |
7 | const AccordionExamples = () => (
8 | <>
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default AccordionExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Performance/AlertMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Alert } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const AlertMinimalPerf = () =>
5 |
6 | AlertMinimalPerf.iterations = 1000
7 | AlertMinimalPerf.filename = 'AlertMinimal.perf.tsx'
8 |
9 | export default AlertMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Rtl/AlertExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleRtl = () =>
5 |
6 | export default AlertExampleRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Rtl/AlertExampleChildren.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleChildrenRtl = () => مرحبا العالم
5 |
6 | export default AlertExampleChildrenRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Slots/AlertExampleDismissAction.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleDismissAction = () => (
5 |
6 | )
7 |
8 | export default AlertExampleDismissAction
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Slots/AlertExampleHeader.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleHeader = () => (
5 |
6 | )
7 |
8 | export default AlertExampleHeader
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Slots/AlertExampleHeader.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleHeader = () => (
5 |
6 | )
7 |
8 | export default AlertExampleHeader
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Slots/AlertExampleIcon.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleIcon = () => (
5 |
6 | )
7 |
8 | export default AlertExampleIcon
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Slots/AlertExampleIcon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleIcon = () => (
5 |
6 | )
7 |
8 | export default AlertExampleIcon
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Types/AlertExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExample = () =>
5 |
6 | export default AlertExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Types/AlertExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExample = () => This is a default alert
5 |
6 | export default AlertExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Types/AlertExampleDismissible.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { getScreenerSteps } from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleDanger.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleDanger = () =>
5 |
6 | export default AlertExampleDanger
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleDanger.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleDanger = () => This is a danger alert
5 |
6 | export default AlertExampleDanger
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleFitted.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import { Alert } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const AlertExampleFitted = () => (
5 |
6 | )
7 |
8 | export default AlertExampleFitted
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleInfo.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleInfo = () =>
5 |
6 | export default AlertExampleInfo
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleInfo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleInfo = () => This is an informational alert
5 |
6 | export default AlertExampleInfo
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleOofs.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { getHoverScreenerSteps } from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getHoverScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleOofs.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleOof = () => (
5 |
6 | )
7 |
8 | export default AlertExampleOof
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleOofs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleOof = () => (
5 |
6 | This is an oof alert
7 |
8 | )
9 |
10 | export default AlertExampleOof
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleSuccess = () =>
5 |
6 | export default AlertExampleSuccess
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleSuccess.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleSuccess = () => This is a success alert
5 |
6 | export default AlertExampleSuccess
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleUrgent.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { getFocusScreenerSteps } from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getFocusScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleUrgent.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleUrgent = () => (
5 |
6 | )
7 |
8 | export default AlertExampleUrgent
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleUrgent.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleUrgent = () => (
5 |
6 | This is an urgent alert
7 |
8 | )
9 |
10 | export default AlertExampleUrgent
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleWarning.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleWarning = () =>
5 |
6 | export default AlertExampleWarning
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Alert/Variations/AlertExampleWarning.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Alert } from '@fluentui/react'
3 |
4 | const AlertExampleWarning = () => This is a warning alert
5 |
6 | export default AlertExampleWarning
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Animation/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Types from './Types'
3 | import Usage from './Usage'
4 |
5 | const AnimationExamples = () => (
6 |
7 |
8 |
9 |
10 | )
11 |
12 | export default AnimationExamples
13 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Attachment/Rtl/AttachmentExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Attachment } from '@fluentui/react'
3 |
4 | const AttachmentExampleRtl = () => (
5 |
6 | )
7 |
8 | export default AttachmentExampleRtl
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Attachment } from '@fluentui/react'
3 |
4 | const AttachmentDescriptionExampleShorthand = () => (
5 |
6 | )
7 |
8 | export default AttachmentDescriptionExampleShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Attachment } from '@fluentui/react'
3 |
4 | const AttachmentHeaderExampleShorthand = () =>
5 |
6 | export default AttachmentHeaderExampleShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Attachment/Types/AttachmentExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Attachment } from '@fluentui/react'
3 |
4 | const AttachmentExampleShorthand = () =>
5 |
6 | export default AttachmentExampleShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Avatar/Performance/AvatarMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const AvatarMinimalPerf = () =>
5 |
6 | AvatarMinimalPerf.iterations = 1000
7 | AvatarMinimalPerf.filename = 'AvatarMinimal.perf.tsx'
8 |
9 | export default AvatarMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Avatar } from '@fluentui/react'
3 |
4 | const AvatarExampleRtl = () => (
5 |
12 | )
13 |
14 | export default AvatarExampleRtl
15 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Avatar/Types/AvatarExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Avatar } from '@fluentui/react'
3 |
4 | const AvatarExampleShorthand = () => (
5 |
8 | )
9 |
10 | export default AvatarExampleShorthand
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Avatar/Variations/AvatarExampleLabel.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Avatar } from '@fluentui/react'
3 |
4 | const AvatarExampleLabelShorthand = () => (
5 |
6 | )
7 |
8 | export default AvatarExampleLabelShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Box/Performance/BoxMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const BoxMinimalPerf = () =>
5 |
6 | BoxMinimalPerf.iterations = 5000
7 | BoxMinimalPerf.filename = 'BoxMinimal.perf.tsx'
8 |
9 | export default BoxMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Performance/ButtonMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const ButtonMinimalPerf = () =>
5 |
6 | ButtonMinimalPerf.iterations = 1000
7 | ButtonMinimalPerf.filename = 'ButtonMinimal.perf.tsx'
8 |
9 | export default ButtonMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Rtl/ButtonExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Flex } from '@fluentui/react'
3 |
4 | const ButtonExampleRtl = () => (
5 |
6 |
7 |
8 |
9 | )
10 |
11 | export default ButtonExampleRtl
12 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Types/ButtonExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button } from '@fluentui/react'
3 |
4 | const ButtonExample = () =>
5 |
6 | export default ButtonExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Types/ButtonExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button } from '@fluentui/react'
3 |
4 | const ButtonExample = () =>
5 |
6 | export default ButtonExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Usage/ButtonExampleOverflow.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button } from '@fluentui/react'
3 |
4 | const ButtonExampleOverflow = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleOverflow
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Usage/ButtonExampleOverflow.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button } from '@fluentui/react'
3 |
4 | const ButtonExampleOverflow = () => (
5 |
6 | )
7 |
8 | export default ButtonExampleOverflow
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: [builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip')],
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Variations/ButtonExampleFluid.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button } from '@fluentui/react'
3 |
4 | const ButtonExampleFluid = () =>
5 |
6 | export default ButtonExampleFluid
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Button/Variations/ButtonExampleFluid.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button } from '@fluentui/react'
3 |
4 | const ButtonExampleFluid = () =>
5 |
6 | export default ButtonExampleFluid
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Carousel/Performance/CarouselMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Carousel } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const CarouselMinimalPerf = () =>
5 |
6 | CarouselMinimalPerf.iterations = 500
7 | CarouselMinimalPerf.filename = 'CarouselMinimal.perf.tsx'
8 |
9 | export default CarouselMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Carousel/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Types from './Types'
4 | import Variations from './Variations'
5 |
6 | const CarouselExamples = () => (
7 | <>
8 |
9 |
10 |
11 | )
12 |
13 | export default CarouselExamples
14 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Chat/Performance/ChatMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Chat } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const ChatMinimalPerf = () =>
5 |
6 | ChatMinimalPerf.iterations = 5000
7 | ChatMinimalPerf.filename = 'ChatMinimal.perf.tsx'
8 |
9 | export default ChatMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Checkbox/Performance/CheckboxMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const CheckboxMinimalPerf = () =>
5 |
6 | CheckboxMinimalPerf.iterations = 5000
7 | CheckboxMinimalPerf.filename = 'CheckboxMinimal.perf.tsx'
8 |
9 | export default CheckboxMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | export const config: ScreenerTestsConfig = {
4 | steps: getScreenerSteps(),
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | export const config: ScreenerTestsConfig = {
4 | steps: getScreenerSteps(),
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Content/DialogExampleFooter.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: getScreenerSteps(),
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Performance/DialogMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const DialogMinimalPerf = () =>
5 |
6 | DialogMinimalPerf.iterations = 5000
7 | DialogMinimalPerf.filename = 'DialogMinimal.perf.tsx'
8 |
9 | export default DialogMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Rtl/DialogExample.rtl.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: getScreenerSteps(),
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Variations/DialogExampleBackdrop.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dialog/commonScreenerSteps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const button = `.${Button.className}`
4 |
5 | const getScreenerSteps = (): ScreenerSteps => [
6 | builder => builder.click(button).snapshot('Clicks the trigger button'),
7 | ]
8 |
9 | export default getScreenerSteps
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Performance/DividerMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Divider } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const DividerMinimalPerf = () =>
5 |
6 | DividerMinimalPerf.iterations = 5000
7 | DividerMinimalPerf.filename = 'DividerMinimal.perf.tsx'
8 |
9 | export default DividerMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Divider } from '@fluentui/react'
3 |
4 | const DividerExampleRtl = () =>
5 |
6 | export default DividerExampleRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Types/DividerExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Types/DividerExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Divider } from '@fluentui/react'
3 |
4 | const DividerExampleShorthand = () =>
5 |
6 | export default DividerExampleShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Types/DividerExampleContent.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Types/DividerExampleContent.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Divider } from '@fluentui/react'
3 |
4 | const DividerExampleContent = () =>
5 |
6 | export default DividerExampleContent
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Types/DividerExampleContent.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Divider } from '@fluentui/react'
3 |
4 | const DividerExampleContent = () => Some text
5 |
6 | export default DividerExampleContent
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Variations/DividerExampleImportant.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Variations/DividerExampleImportant.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Divider } from '@fluentui/react'
3 |
4 | const DividerExampleImportantShorthand = () =>
5 |
6 | export default DividerExampleImportantShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Variations/DividerExampleImportant.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Divider } from '@fluentui/react'
3 |
4 | const DividerExampleImportant = () => This is important
5 |
6 | export default DividerExampleImportant
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dropdown/Performance/DropdownMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Dropdown } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const DropdownMinimalPerf = () =>
5 |
6 | DropdownMinimalPerf.iterations = 1000
7 | DropdownMinimalPerf.filename = 'DropdownMinimal.perf.tsx'
8 |
9 | export default DropdownMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Dropdown/Rtl/DropdownExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Dropdown } from '@fluentui/react'
3 |
4 | const inputItems = ['ا يجلبه إلينا الأس', 'الإنسان ', 'الحكيم عليه', 'أن يمسك']
5 |
6 | const DropdownExampleRtl = () =>
7 |
8 | export default DropdownExampleRtl
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Embed/Performance/EmbedMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Embed } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const EmbedMinimalPerf = () =>
5 |
6 | EmbedMinimalPerf.iterations = 5000
7 | EmbedMinimalPerf.filename = 'EmbedMinimal.perf.tsx'
8 |
9 | export default EmbedMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Embed/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Slots from './Slots'
4 | import Usage from './Usage'
5 |
6 | const EmbedExamples = () => (
7 | <>
8 |
9 |
10 |
11 | )
12 |
13 | export default EmbedExamples
14 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Flex/Performance/FlexMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Flex } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const FlexMinimalPerf = () =>
5 |
6 | FlexMinimalPerf.iterations = 5000
7 | FlexMinimalPerf.filename = 'FlexMinimal.perf.tsx'
8 |
9 | export default FlexMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Flex/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Recipes from './Recipes.mdx'
4 | import Rtl from './Rtl'
5 | import Types from './Types'
6 |
7 | const FlexExamples = () => (
8 | <>
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default FlexExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Form/Performance/FormMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Form } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const FormMinimalPerf = () =>
5 |
6 | FormMinimalPerf.iterations = 5000
7 | FormMinimalPerf.filename = 'FormMinimal.perf.tsx'
8 |
9 | export default FormMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Form/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Rtl from './Rtl'
4 | import Types from './Types'
5 | import Usage from './Usage'
6 |
7 | const FormExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default FormExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Grid/Performance/GridMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Grid } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const GridMinimalPerf = () =>
5 |
6 | GridMinimalPerf.iterations = 5000
7 | GridMinimalPerf.filename = 'GridMinimal.perf.tsx'
8 |
9 | export default GridMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Header/Performance/HeaderMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Header } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const HeaderMinimalPerf = () =>
5 |
6 | HeaderMinimalPerf.iterations = 5000
7 | HeaderMinimalPerf.filename = 'HeaderMinimal.perf.tsx'
8 |
9 | export default HeaderMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Header/Variations/HeaderExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Header } from '@fluentui/react'
3 |
4 | const HeaderExampleAlign = () =>
5 |
6 | export default HeaderExampleAlign
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Header/Variations/HeaderExampleAlign.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Header } from '@fluentui/react'
3 |
4 | const HeaderExampleAlign = () => (
5 |
6 | Header aligned to end
7 |
8 | )
9 |
10 | export default HeaderExampleAlign
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/HierarchicalTree/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Types from './Types'
3 |
4 | const HierarchicalTreeExamples = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default HierarchicalTreeExamples
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Performance/IconMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const IconMinimalPerf = () =>
5 |
6 | IconMinimalPerf.iterations = 5000
7 | IconMinimalPerf.filename = 'IconMinimal.perf.tsx'
8 |
9 | export default IconMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Icon } from '@fluentui/react'
3 |
4 | const IconExampleDisabled = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default IconExampleDisabled
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Types/IconExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Image/Performance/ImageMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Image } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const ImageMinimalPerf = () =>
5 |
6 | ImageMinimalPerf.iterations = 5000
7 | ImageMinimalPerf.filename = 'ImageMinimal.perf.tsx'
8 |
9 | export default ImageMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Image/Rtl/ImageExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Image } from '@fluentui/react'
3 |
4 | const ImageExampleRtl = () =>
5 |
6 | export default ImageExampleRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Image/Types/ImageExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Image } from '@fluentui/react'
3 |
4 | const ImageExample = () =>
5 |
6 | export default ImageExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Image/Variations/ImageExampleCircular.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Image } from '@fluentui/react'
3 |
4 | const ImageExampleCircular = () =>
5 |
6 | export default ImageExampleCircular
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Image/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Rtl from './Rtl'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const ImageExamples = () => (
8 | <>
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default ImageExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Performance/InputMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const InputMinimalPerf = () =>
5 |
6 | InputMinimalPerf.iterations = 1000
7 | InputMinimalPerf.filename = 'InputMinimal.perf.tsx'
8 |
9 | export default InputMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Rtl/InputExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleRtl = () =>
5 |
6 | export default InputExampleRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Types/InputExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { Input } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.focus(`.${Input.className} input`).snapshot('Can be focused')],
5 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Types/InputExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExample = () =>
5 |
6 | export default InputExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Types/InputInvertedExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleClearable = () =>
5 |
6 | export default InputExampleClearable
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Variations/InputExampleFluid.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleFluid = () =>
5 |
6 | export default InputExampleFluid
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Variations/InputExampleIcon.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleIcon = () =>
5 |
6 | export default InputExampleIcon
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Variations/InputExampleIconClearable.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleIconClearableShorthand = () => (
5 |
6 | )
7 |
8 | export default InputExampleIconClearableShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Variations/InputExampleIconPosition.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleIconPosition = () => (
5 |
6 | )
7 |
8 | export default InputExampleIconPosition
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/Variations/InputExampleInline.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Input } from '@fluentui/react'
3 |
4 | const InputExampleInline = () => (
5 |
6 | Some text inline with the and more text.
7 |
8 | )
9 |
10 | export default InputExampleInline
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Input/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Rtl from './Rtl'
4 | import Types from './Types'
5 | import Variations from './Variations'
6 |
7 | const InputExamples = () => (
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default InputExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { ItemLayout } from '@fluentui/react'
3 |
4 | const ItemLayoutExampleContent = () => (
5 |
6 | )
7 |
8 | export default ItemLayoutExampleContent
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { ItemLayout } from '@fluentui/react'
3 |
4 | const ItemLayoutExampleHeader = () =>
5 |
6 | export default ItemLayoutExampleHeader
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { ItemLayout } from '@fluentui/react'
3 |
4 | const ItemLayoutExampleHeaderMediaShorthand = () => (
5 |
6 | )
7 |
8 | export default ItemLayoutExampleHeaderMediaShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExampleShorthand = () =>
5 |
6 | export default LabelExampleShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Content/LabelExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExample = () =>
5 |
6 | export default LabelExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExampleIconShorthand = () =>
5 |
6 | export default LabelExampleIconShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExampleIconPositionShorthand = () => (
5 |
6 | )
7 |
8 | export default LabelExampleIconPositionShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExampleImageShorthand = () => (
5 |
6 | )
7 |
8 | export default LabelExampleImageShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExampleImageShorthand = () => (
5 |
6 | )
7 |
8 | export default LabelExampleImageShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Performance/LabelMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const LabelMinimalPerf = () =>
5 |
6 | LabelMinimalPerf.iterations = 5000
7 | LabelMinimalPerf.filename = 'LabelMinimal.perf.tsx'
8 |
9 | export default LabelMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/Variations/LabelExampleCircular.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Label } from '@fluentui/react'
3 |
4 | const LabelExampleCircularShorthand = () =>
5 |
6 | export default LabelExampleCircularShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Label/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Content from './Content'
4 | import Rtl from './Rtl'
5 | import Variations from './Variations'
6 |
7 | const LabelExamples = () => (
8 | <>
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default LabelExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Layout/Performance/LayoutMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Layout } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const LayoutMinimalPerf = () =>
5 |
6 | LayoutMinimalPerf.iterations = 5000
7 | LayoutMinimalPerf.filename = 'LayoutMinimal.perf.tsx'
8 |
9 | export default LayoutMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Layout/Types/LayoutExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Layout } from '@fluentui/react'
3 |
4 | const LayoutExample = () => (
5 |
6 | )
7 |
8 | export default LayoutExample
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Layout/Types/LayoutExampleVertical.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Layout } from '@fluentui/react'
3 |
4 | const LayoutExampleVertical = () => (
5 |
6 | )
7 |
8 | export default LayoutExampleVertical
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Layout/Variations/LayoutExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Layout } from '@fluentui/react'
3 |
4 | const LayoutExample = () => (
5 |
6 | )
7 |
8 | export default LayoutExample
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/List/Performance/ListMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { List } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const ListMinimalPerf = () =>
5 |
6 | ListMinimalPerf.iterations = 5000
7 | ListMinimalPerf.filename = 'ListMinimal.perf.tsx'
8 |
9 | export default ListMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Loader/Performance/LoaderMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const LoaderMinimalPerf = () =>
5 |
6 | LoaderMinimalPerf.iterations = 1000
7 | LoaderMinimalPerf.filename = 'LoaderMinimal.perf.tsx'
8 |
9 | export default LoaderMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Loader/Types/LoaderExample.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const LoaderExample: React.FC = () =>
5 |
6 | export default LoaderExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Loader/Types/LoaderExampleLabel.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const LoaderExampleLabel: React.FC = () =>
5 |
6 | export default LoaderExampleLabel
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Loader/Variations/LoaderExampleInline.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const LoaderExampleInline: React.FC = () =>
5 |
6 | export default LoaderExampleInline
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Performance/MenuMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Menu } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const MenuMinimalPerf = () =>
5 |
6 | MenuMinimalPerf.iterations = 5000
7 | MenuMinimalPerf.filename = 'MenuMinimal.perf.tsx'
8 |
9 | export default MenuMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Slots/MenuExampleIconOnly.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Slots/MenuExampleSlot.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Slots/MenuExampleWithIcons.shorthand.steps..ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = { steps: getScreenerSteps() }
4 |
5 | export default config
6 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Types/MenuExamplePointing.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = { steps: getScreenerSteps() }
4 |
5 | export default config
6 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Types/MenuExampleUnderlined.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = { steps: getScreenerSteps() }
4 |
5 | export default config
6 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = { steps: getScreenerSteps() }
4 |
5 | export default config
6 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Variations/MenuExampleVertical.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps({ vertical: true }),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = { steps: getScreenerSteps({ vertical: true }) }
4 |
5 | export default config
6 |
--------------------------------------------------------------------------------
/docs/src/examples/components/MenuButton/Rtl/MenuButtonExample.rtl.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.click(`.${Button.className}`).snapshot('RTL: Shows menuButton')],
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/MenuButton/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Rtl from './Rtl'
4 | import State from './State'
5 | import Usage from './Usage'
6 |
7 | const MenuButtonExamples = () => (
8 | <>
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default MenuButtonExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Performance/PopupMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Popup } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const PopupMinimalPerf = () =>
5 |
6 | PopupMinimalPerf.iterations = 5000
7 | PopupMinimalPerf.filename = 'PopupMinimal.perf.tsx'
8 |
9 | export default PopupMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Rtl/PopupExample.rtl.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.click(`.${Button.className}`).snapshot('RTL: Shows popup')],
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Types/PopupExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Popup } from '@fluentui/react'
3 |
4 | const PopupExample = () => (
5 | } content="Hello from popup!" />
6 | )
7 |
8 | export default PopupExample
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Types/PopupExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Popup } from '@fluentui/react'
3 |
4 | const PopupExample = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default PopupExample
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Portal/Performance/PortalMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Portal } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const PortalMinimalPerf = () =>
5 |
6 | PortalMinimalPerf.iterations = 5000
7 | PortalMinimalPerf.filename = 'PortalMinimal.perf.tsx'
8 |
9 | export default PortalMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Portal/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Types from './Types'
4 | import State from './State'
5 |
6 | const PortalExamples = () => (
7 | <>
8 |
9 |
10 |
11 | )
12 |
13 | export default PortalExamples
14 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Provider/Performance/ProviderMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Provider } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const ProviderMinimalPerf = () =>
5 |
6 | ProviderMinimalPerf.iterations = 100
7 | ProviderMinimalPerf.filename = 'ProviderMinimal.perf.tsx'
8 |
9 | export default ProviderMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Provider/Types/ProviderRtlExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Provider } from '@fluentui/react'
3 |
4 | const ProviderRtlExample = () => (
5 |
6 | {'مثال النص'}
7 |
8 | )
9 |
10 | export default ProviderRtlExample
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/RadioGroup/Types/RadioGroupExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = {
2 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
3 | steps: [(builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses item')],
4 | }
5 |
6 | export default config
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/RadioGroup/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Rtl from './Rtl'
4 | import Types from './Types'
5 | import Item from './Item'
6 |
7 | const RadioGroupExamples = () => (
8 | <>
9 |
10 |
6 |
7 |
8 | )
9 |
10 | export default RefExamples
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Segment/Performance/SegmentMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Segment } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const SegmentMinimalPerf = () =>
5 |
6 | SegmentMinimalPerf.iterations = 5000
7 | SegmentMinimalPerf.filename = 'SegmentMinimal.perf.tsx'
8 |
9 | export default SegmentMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Segment/Rtl/SegmentExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Segment } from '@fluentui/react'
3 |
4 | const SegmentExampleRtl = () =>
5 |
6 | export default SegmentExampleRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Segment/States/SegmentExampleDisabled.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Segment } from '@fluentui/react'
3 |
4 | const SegmentExampleDisabledShorthand = () =>
5 |
6 | export default SegmentExampleDisabledShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Segment/States/SegmentExampleDisabled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Segment } from '@fluentui/react'
3 |
4 | const SegmentExampleDisabled = () => Disabled segment.
5 |
6 | export default SegmentExampleDisabled
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Segment/Types/SegmentExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Segment } from '@fluentui/react'
3 |
4 | const SegmentExampleShorthand = () => (
5 |
6 | )
7 |
8 | export default SegmentExampleShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Segment/Types/SegmentExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Segment } from '@fluentui/react'
3 |
4 | const SegmentExample = () => (
5 | The elevator to success is out of order. You’ll have to use the stairs.
6 | )
7 |
8 | export default SegmentExample
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Performance/SliderMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Slider } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const SliderMinimalPerf = () =>
5 |
6 | SliderMinimalPerf.iterations = 1000
7 | SliderMinimalPerf.filename = 'SliderMinimal.perf.tsx'
8 |
9 | export default SliderMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Rtl/SliderExample.rtl.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slider } from '@fluentui/react'
3 |
4 | const SliderExampleRtl = () =>
5 |
6 | export default SliderExampleRtl
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/States/SliderExampleDisabled.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slider } from '@fluentui/react'
3 |
4 | const SliderExampleDisabledShorthand = () =>
5 |
6 | export default SliderExampleDisabledShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Types/SliderExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import getScreenerSteps from '../commonScreenerSteps'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: getScreenerSteps(),
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Types/SliderExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slider } from '@fluentui/react'
3 |
4 | const SliderExampleShorthand = () =>
5 |
6 | export default SliderExampleShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Variations/SliderExampleFluid.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slider } from '@fluentui/react'
3 |
4 | const SliderExampleFluidShorthand = () =>
5 |
6 | export default SliderExampleFluidShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Slider/Variations/SliderExampleVertical.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slider } from '@fluentui/react'
3 |
4 | const SliderExampleVerticalShorthand = () =>
5 |
6 | export default SliderExampleVerticalShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/SplitButton/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Types from './Types'
4 | import States from './States'
5 | import Slots from './Slots'
6 |
7 | const SplitButtonExamples = () => (
8 | <>
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default SplitButtonExamples
16 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Status/Performance/StatusMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Status } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const StatusMinimalPerf = () =>
5 |
6 | StatusMinimalPerf.iterations = 5000
7 | StatusMinimalPerf.filename = 'StatusMinimal.perf.tsx'
8 |
9 | export default StatusMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Status/Types/StatusExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Status } from '@fluentui/react'
3 |
4 | const StatusExampleShorthand = () =>
5 |
6 | export default StatusExampleShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Status/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Types from './Types'
4 | import Variations from './Variations'
5 |
6 | const StatusExamples = () => (
7 |
8 |
9 |
10 |
11 | )
12 |
13 | export default StatusExamples
14 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Table/Performance/TableMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Table } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const TableMinimalPerf = () =>
5 |
6 | TableMinimalPerf.iterations = 5000
7 | TableMinimalPerf.filename = 'TableMinimal.perf.tsx'
8 |
9 | export default TableMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Table/Usage/TableExampleNavigable.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Table/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Usage from './Usage'
4 |
5 | const TableExamples = () => (
6 | <>
7 |
8 |
9 | )
10 |
11 | export default TableExamples
12 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Performance/TextMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Text } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const TextMinimalPerf = () =>
5 |
6 | TextMinimalPerf.iterations = 5000
7 | TextMinimalPerf.filename = 'TextMinimal.perf.tsx'
8 |
9 | export default TextMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleDisabled.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleDisabledShorthand = () => (
5 |
6 | )
7 |
8 | export default TextExampleDisabledShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleDisabled.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleDisabled = () => This feature has been disabled.
5 |
6 | export default TextExampleDisabled
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleError.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleErrorShorthand = () =>
5 |
6 | export default TextExampleErrorShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleError.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleError = () => There has been an error.
5 |
6 | export default TextExampleError
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleSuccess.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleSuccessShorthand = () => (
5 |
6 | )
7 |
8 | export default TextExampleSuccessShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleSuccess.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleSuccess = () => Your action has completed successfully.
5 |
6 | export default TextExampleSuccess
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleTemporary.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleTemporaryShorthand = () =>
5 |
6 | export default TextExampleTemporaryShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/States/TextExampleTemporary.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleTemporary = () => Lorem ipsum dolor
5 |
6 | export default TextExampleTemporary
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleAlign.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const HeaderExampleAlign = () =>
5 |
6 | export default HeaderExampleAlign
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleAlign.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const HeaderExampleAlign = () => Text aligned to end
5 |
6 | export default HeaderExampleAlign
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleAtMention.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleAtMention = () => (
5 |
6 | @someone
7 |
8 | @me
9 |
10 | )
11 |
12 | export default TextExampleAtMention
13 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleImportant.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleImportantShorthand = () =>
5 |
6 | export default TextExampleImportantShorthand
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleImportant.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleImportant = () => This text is important!
5 |
6 | export default TextExampleImportant
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleTimestamp.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleTimestampShorthand = () => (
5 |
6 | )
7 |
8 | export default TextExampleTimestampShorthand
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Text/Variations/TextExampleTimestamp.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const TextExampleTimestamp = () => (
5 |
6 | Yesterday 11:16PM
7 |
8 | )
9 |
10 | export default TextExampleTimestamp
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Performance/TextAreaMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { TextArea } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const TextAreaMinimalPerf = () =>
5 |
6 | TextAreaMinimalPerf.iterations = 5000
7 | TextAreaMinimalPerf.filename = 'TextAreaMinimal.perf.tsx'
8 |
9 | export default TextAreaMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/States/TextAreaDisabledExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { TextArea } from '@fluentui/react'
3 |
4 | const TextAreaDisabledExample = () =>
5 |
6 | export default TextAreaDisabledExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Types/TextAreaExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { TextArea } from '@fluentui/react'
3 |
4 | const TextAreaExample = () =>
5 |
6 | export default TextAreaExample
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Types/textAreaExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { TextArea } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.focus(`.${TextArea.className}`).snapshot('Can be focused')],
5 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Usage/TextAreaExampleMaxLength.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { TextArea } from '@fluentui/react'
3 |
4 | const TextAreaExampleMaxLength = () => (
5 |
6 | )
7 |
8 | export default TextAreaExampleMaxLength
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Usage/TextAreaExampleResize.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { TextArea } from '@fluentui/react'
3 |
4 | const TextAreaExampleResize = () =>
5 |
6 | export default TextAreaExampleResize
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Variations/TextAreaExampleFluid.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { TextArea } from '@fluentui/react'
3 |
4 | const TextAreaExampleFluid = () =>
5 |
6 | export default TextAreaExampleFluid
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Toolbar/Content/ToolbarExampleRadioGroup.shorthand.steps.tsx:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
2 |
3 | export default config
4 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Toolbar/Performance/ToolbarMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Toolbar } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const ToolbarMinimalPerf = () =>
5 |
6 | ToolbarMinimalPerf.iterations = 5000
7 | ToolbarMinimalPerf.filename = 'ToolbarMinimal.perf.tsx'
8 |
9 | export default ToolbarMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Toolbar/Types/ToolbarExampleEditor.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | const config: ScreenerTestsConfig = {
2 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
3 | steps: [(builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses item')],
4 | }
5 |
6 | export default config
7 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [builder => builder.hover(`.${Button.className}`).snapshot('RTL: Shows tooltip')],
5 | }
6 |
7 | export default config
8 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tooltip/Types/TooltipExample.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | themes: ['teams', 'teamsDark', 'teamsHighContrast'],
5 | steps: [builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip')],
6 | }
7 |
8 | export default config
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tooltip/Types/TooltipExample.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Tooltip } from '@fluentui/react'
3 |
4 | const TooltipExample = () => (
5 | } content="Hello from tooltip!" />
6 | )
7 |
8 | export default TooltipExample
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tooltip/Types/TooltipExample.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Tooltip } from '@fluentui/react'
3 |
4 | const TooltipExample = () => (
5 |
6 |
7 |
8 | )
9 |
10 | export default TooltipExample
11 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Button, Tooltip } from '@fluentui/react'
3 |
4 | const TooltipExamplePointing = () => (
5 | } content="The tooltip is pointing." />
6 | )
7 |
8 | export default TooltipExamplePointing
9 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.steps.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '@fluentui/react'
2 |
3 | const config: ScreenerTestsConfig = {
4 | steps: [
5 | builder => builder.hover(`.${Button.className}`).snapshot('Custom target: Shows tooltip'),
6 | ],
7 | }
8 |
9 | export default config
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tree/Performance/TreeMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Tree } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const TreeMinimalPerf = () =>
5 |
6 | TreeMinimalPerf.iterations = 5000
7 | TreeMinimalPerf.filename = 'TreeMinimal.perf.tsx'
8 |
9 | export default TreeMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Tree/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Types from './Types'
3 | import Usage from './Usage'
4 | import Performance from './Performance'
5 |
6 | const TreeExamples = () => (
7 | <>
8 |
9 |
10 |
11 |
12 | )
13 |
14 | export default TreeExamples
15 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Video/Performance/VideoMinimal.perf.tsx:
--------------------------------------------------------------------------------
1 | import { Video } from '@fluentui/react'
2 | import * as React from 'react'
3 |
4 | const VideoMinimalPerf = () =>
5 |
6 | VideoMinimalPerf.iterations = 5000
7 | VideoMinimalPerf.filename = 'VideoMinimal.perf.tsx'
8 |
9 | export default VideoMinimalPerf
10 |
--------------------------------------------------------------------------------
/docs/src/examples/components/Video/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Types from './Types'
4 |
5 | const VideoExamples = () => (
6 | <>
7 |
8 |
9 | )
10 |
11 | export default VideoExamples
12 |
--------------------------------------------------------------------------------
/docs/src/microsoft-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/microsoft-logo.png
--------------------------------------------------------------------------------
/docs/src/netflix-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/netflix-logo.png
--------------------------------------------------------------------------------
/docs/src/prototypes/AsyncShorthand/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './AsyncShorthand'
2 |
--------------------------------------------------------------------------------
/docs/src/prototypes/SearchPage/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './SearchPage'
2 |
--------------------------------------------------------------------------------
/docs/src/prototypes/chatMessages/ChatMessageWithPopover/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './ChatWithPopover'
2 |
--------------------------------------------------------------------------------
/docs/src/prototypes/chatPane/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import ChatPaneLayout from './chatPaneLayout'
4 | import { getChatMock } from './services'
5 |
6 | const chatMock = getChatMock({ msgCount: 40, userCount: 6 })
7 |
8 | export default () =>
9 |
--------------------------------------------------------------------------------
/docs/src/prototypes/chatPane/services/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dataMock'
2 | export * from './dateUtils'
3 | export * from './types'
4 | export * from './messageFactoryMock'
5 |
--------------------------------------------------------------------------------
/docs/src/prototypes/employeeCard/CustomText.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | const CustomText = props => {
5 | const { muted, ...restProps } = props
6 | return
7 | }
8 |
9 | export default CustomText
10 |
--------------------------------------------------------------------------------
/docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text } from '@fluentui/react'
3 |
4 | export default props => {
5 | const { content, children } = props
6 | return (
7 |
8 | {children}
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/docs/src/prototypes/meetingOptions/components/TransparentDivider.tsx:
--------------------------------------------------------------------------------
1 | import { Divider } from '@fluentui/react'
2 |
3 | export default props => {
4 | return Divider.create(props, {
5 | defaultProps: () => ({
6 | variables: { dividerColor: 'transparent' },
7 | }),
8 | })
9 | }
10 |
--------------------------------------------------------------------------------
/docs/src/prototypes/meetingOptions/styles.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from 'react'
2 |
3 | export const middleColumnStyles = {
4 | width: '40%',
5 | margin: '0 auto',
6 | }
7 |
8 | export const mainStyle: CSSProperties = {
9 | backgroundColor: '#f3f2f1',
10 | width: 'calc(100% - 250px)',
11 | height: '100%',
12 | position: 'fixed',
13 | }
14 |
--------------------------------------------------------------------------------
/docs/src/public/images/4by3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/4by3.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/ade.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/ade.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/chris.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/chris.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/christian.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/christian.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/daniel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/daniel.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/elliot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/elliot.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/elyse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/elyse.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/helen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/helen.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/jenny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/jenny.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/jerry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/jerry.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/joe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/joe.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/justen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/justen.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/kristy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/kristy.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/laura.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/laura.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/matt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/matt.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/matthew.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/matthew.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/molly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/molly.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/nan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/nan.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/nom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/nom.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/patrick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/patrick.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/rachel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/rachel.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/steve.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/steve.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/stevie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/stevie.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/tom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/tom.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/veronika.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/veronika.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/large/zoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/large/zoe.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/ade.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/ade.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/chris.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/chris.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/christian.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/christian.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/daniel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/daniel.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/elliot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/elliot.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/helen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/helen.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/jenny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/jenny.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/joe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/joe.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/justen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/justen.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/laura.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/laura.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/lena.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/lena.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/lindsay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/lindsay.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/mark.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/matt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/matt.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/matthew.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/matthew.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/molly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/molly.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/nan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/nan.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/nom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/nom.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/rachel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/rachel.png
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/steve.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/steve.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/stevie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/stevie.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/tom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/tom.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/veronika.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/veronika.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/avatar/small/zoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/avatar/small/zoe.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/fluent-ui-logo-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/fluent-ui-logo-black.png
--------------------------------------------------------------------------------
/docs/src/public/images/fluent-ui-logo-dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/fluent-ui-logo-dev.png
--------------------------------------------------------------------------------
/docs/src/public/images/fluent-ui-logo-inverted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/fluent-ui-logo-inverted.png
--------------------------------------------------------------------------------
/docs/src/public/images/fluent-ui-logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/fluent-ui-logo-white.png
--------------------------------------------------------------------------------
/docs/src/public/images/fluent-ui-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/fluent-ui-logo.png
--------------------------------------------------------------------------------
/docs/src/public/images/icons/plugin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/icons/plugin.png
--------------------------------------------------------------------------------
/docs/src/public/images/icons/school.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/icons/school.png
--------------------------------------------------------------------------------
/docs/src/public/images/image-16by9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/image-16by9.png
--------------------------------------------------------------------------------
/docs/src/public/images/leaves/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/leaves/1.png
--------------------------------------------------------------------------------
/docs/src/public/images/leaves/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/leaves/3.png
--------------------------------------------------------------------------------
/docs/src/public/images/leaves/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/leaves/4.png
--------------------------------------------------------------------------------
/docs/src/public/images/leaves/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/leaves/5.png
--------------------------------------------------------------------------------
/docs/src/public/images/movies/totoro-horizontal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/movies/totoro-horizontal.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/tears-of-steel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/tears-of-steel.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/vimeo-example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/vimeo-example.jpg
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/centered-paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/centered-paragraph.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/image-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/image-square.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/image-text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/image-text.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/image.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/media-paragraph-alt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/media-paragraph-alt.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/media-paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/media-paragraph.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/paragraph.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/short-paragraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/short-paragraph.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/square-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/square-image.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/text-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/text-image.png
--------------------------------------------------------------------------------
/docs/src/public/images/wireframe/white-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/docs/src/public/images/wireframe/white-image.png
--------------------------------------------------------------------------------
/docs/src/utils/getFormattedHash.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieve hash string from location path
3 | */
4 | const getFormattedHash = (hash: string): string => (hash || '').replace('#', '')
5 |
6 | export default getFormattedHash
7 |
--------------------------------------------------------------------------------
/docs/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/e2e/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/e2e/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/e2e/global.d.ts:
--------------------------------------------------------------------------------
1 | import { E2EApi } from './e2eApi'
2 |
3 | declare global {
4 | const e2e: E2EApi
5 | }
6 |
--------------------------------------------------------------------------------
/e2e/jest.config.js:
--------------------------------------------------------------------------------
1 | const commonConfig = require('@fluentui/internal-tooling/jest')
2 |
3 | module.exports = {
4 | ...commonConfig,
5 | moduleNameMapper: {
6 | ...require('lerna-alias').jest(),
7 | },
8 | name: 'e2e',
9 | testRegex: '.*-test\\.tsx?$',
10 | setupFilesAfterEnv: ['./setup.test.ts'],
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/server/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | E2E Tests
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../build/tsconfig.common.json",
3 | "compilerOptions": {
4 | "module": "esnext",
5 | "allowSyntheticDefaultImports": true,
6 | "types": ["node", "jest", "webpack-env"]
7 | },
8 | "include": ["."]
9 | }
10 |
--------------------------------------------------------------------------------
/e2e/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "packages": ["packages/*", "scripts", "build", "docs", "e2e", "perf"],
3 | "version": "0.44.0",
4 | "npmClient": "yarn",
5 | "useWorkspaces": true
6 | }
7 |
--------------------------------------------------------------------------------
/packages/ability-attributes/.gitignore:
--------------------------------------------------------------------------------
1 | /src/schema.ts
2 |
--------------------------------------------------------------------------------
/packages/ability-attributes/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/ability-attributes/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/ability-attributes/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/accessibility/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/accessibility/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/accessibility/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/accessibility/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/accessibility/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'accessibility',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/accessibility/src/attributes.ts:
--------------------------------------------------------------------------------
1 | export const IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable'
2 |
--------------------------------------------------------------------------------
/packages/accessibility/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './focusZone/types'
2 |
3 | export * from './attributes'
4 | export * from './behaviors'
5 | export * from './types'
6 |
--------------------------------------------------------------------------------
/packages/accessibility/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../build/tsconfig.common",
3 | "compilerOptions": {
4 | "composite": true,
5 | "outDir": "dist/dts"
6 | },
7 | "include": ["src", "test"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/accessibility/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/code-sandbox/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/code-sandbox/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/code-sandbox/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/code-sandbox/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/code-sandbox/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/code-sandbox/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as createCallbackLogFormatter } from './createCallbackLogFormatter'
2 | export { default as knobComponents } from './knobComponents'
3 |
4 | export { default as KnobsSnippet } from './KnobsSnippet'
5 | export { default as SandboxApp } from './SandboxApp'
6 |
--------------------------------------------------------------------------------
/packages/code-sandbox/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../build/tsconfig.common",
3 | "compilerOptions": {
4 | "composite": true,
5 | "outDir": "dist/dts"
6 | },
7 | "include": ["src"],
8 | "references": [{ "path": "../docs-components" }, { "path": "../react" }]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/code-sandbox/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/digest/README.md:
--------------------------------------------------------------------------------
1 | # `digest`
2 |
3 | > Digest your stories into a lean and mean digest for e2e and perf testing.
4 |
5 |
--------------------------------------------------------------------------------
/packages/digest/just.config.ts:
--------------------------------------------------------------------------------
1 | import { taskPresets } from 'just-scripts'
2 |
3 | taskPresets.webapp()
4 |
--------------------------------------------------------------------------------
/packages/digest/src/bundle/stories.tsx:
--------------------------------------------------------------------------------
1 | import config from 'stories/config'
2 |
3 | // TODO: story formats should use/coexist with storybook's:
4 | // https://storybook.js.org/docs/formats/component-story-format/
5 |
6 | // TODO: follow typing similar to:
7 | // https://storybook.js.org/docs/basics/writing-stories/#parameters
8 |
9 | export default config
10 |
--------------------------------------------------------------------------------
/packages/docs-components/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/docs-components/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/docs-components/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/docs-components/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/docs-components/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/docs-components/src/knobs/useNumberKnob.ts:
--------------------------------------------------------------------------------
1 | import { UseKnobOptions } from './types'
2 | import useKnob from './useKnob'
3 |
4 | const useStringKnob = (options: UseKnobOptions) =>
5 | useKnob({
6 | initialValue: 0,
7 | type: 'number',
8 | ...options,
9 | })
10 |
11 | export default useStringKnob
12 |
--------------------------------------------------------------------------------
/packages/docs-components/src/knobs/useStringKnob.ts:
--------------------------------------------------------------------------------
1 | import { UseKnobOptions } from './types'
2 | import useKnob from './useKnob'
3 |
4 | const useStringKnob = (options: UseKnobOptions) =>
5 | useKnob({
6 | initialValue: '',
7 | type: 'string',
8 | ...options,
9 | })
10 |
11 | export default useStringKnob
12 |
--------------------------------------------------------------------------------
/packages/docs-components/src/knobs/utils/parseRangeValue.ts:
--------------------------------------------------------------------------------
1 | const parseValue = (parseValue: number | string): number => {
2 | const stringified = parseValue.toString()
3 | const hasDecimal = /\.\d/.test(stringified)
4 |
5 | return hasDecimal ? parseFloat(stringified) : parseInt(stringified, 10)
6 | }
7 |
8 | export default parseValue
9 |
--------------------------------------------------------------------------------
/packages/docs-components/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../build/tsconfig.common",
3 | "compilerOptions": {
4 | "composite": true,
5 | "outDir": "dist/dts"
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/docs-components/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/eslint-plugin/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | rules: {
3 | 'no-visibility-modifiers': require('./rules/no-visibility-modifiers'),
4 | },
5 | }
6 |
--------------------------------------------------------------------------------
/packages/eslint-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@fluentui/eslint-plugin",
3 | "version": "0.44.0",
4 | "dependencies": {
5 | "@typescript-eslint/eslint-plugin": "^2.5.0",
6 | "@typescript-eslint/experimental-utils": "^2.5.0"
7 | },
8 | "files": [
9 | "rules"
10 | ],
11 | "publishConfig": {
12 | "access": "public"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/eslint-plugin/utils/isTypeScriptFile.js:
--------------------------------------------------------------------------------
1 | module.exports = function isTypeScriptFile(fileName) {
2 | return /\.tsx?$/i.test(fileName || '')
3 | }
4 |
--------------------------------------------------------------------------------
/packages/local-sandbox/.browserslistrc:
--------------------------------------------------------------------------------
1 | chrome >= 79
2 |
--------------------------------------------------------------------------------
/packages/local-sandbox/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/local-sandbox/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/packages/perf-test/stories/Dialog.perf.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Dialog as DialogFabric } from 'office-ui-fabric-react'
3 | import { Dialog as DialogFluent } from '@fluentui/react'
4 |
5 | export default {
6 | iterations: 5000,
7 | }
8 |
9 | export const Fabric = () =>
10 | export const Fluent = () =>
11 |
--------------------------------------------------------------------------------
/packages/perf-test/stories/Image.perf.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Image as ImageFabric } from 'office-ui-fabric-react'
3 | import { Image as ImageFluent } from '@fluentui/react'
4 |
5 | export default {
6 | iterations: 5000,
7 | }
8 |
9 | export const Fabric = () =>
10 | export const Fluent = () =>
11 |
--------------------------------------------------------------------------------
/packages/perf-test/stories/Slider.perf.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slider as SliderFabric } from 'office-ui-fabric-react'
3 | import { Slider as SliderFluent } from '@fluentui/react'
4 |
5 | export default {
6 | iterations: 1000,
7 | }
8 |
9 | export const Fabric = () =>
10 | export const Fluent = () =>
11 |
--------------------------------------------------------------------------------
/packages/perf-test/stories/Text.perf.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Text as TextFabric } from 'office-ui-fabric-react'
3 | import { Text as TextFluent } from '@fluentui/react'
4 |
5 | export default {
6 | iterations: 5000,
7 | }
8 |
9 | export const Fabric = () =>
10 | export const Fluent = () =>
11 |
--------------------------------------------------------------------------------
/packages/perf-test/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../docs/tsconfig.json",
3 | "compilerOptions": {
4 | "rootDir": "src",
5 | "outDir": "lib",
6 | "types": ["node", "jest", "expect-puppeteer", "jest-environment-puppeteer", "webpack-env"]
7 | },
8 | "include": ["src"],
9 | "references": []
10 | }
11 |
--------------------------------------------------------------------------------
/packages/playground/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 | jest.config.js
6 | scripts/config
7 | *.d.ts
8 | **/*.js
9 |
--------------------------------------------------------------------------------
/packages/playground/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "rules": {
4 | "semi": ["error", "always"]
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/playground/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-a11y/register';
2 |
--------------------------------------------------------------------------------
/packages/playground/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpackConfig = require('@fluentui/scripts/config/storybook/webpack.config');
2 | module.exports = webpackConfig;
3 |
--------------------------------------------------------------------------------
/packages/playground/README.md:
--------------------------------------------------------------------------------
1 | # `react-mybrand`
2 |
3 | > TODO: description
4 |
5 | ## Usage
6 |
7 | ```
8 | const reactMybrand = require('react-mybrand');
9 |
10 | // TODO: DEMONSTRATE API
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/playground/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@fluentui/scripts/config/api-extractor/api-extractor.common.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/playground/jest.config.js:
--------------------------------------------------------------------------------
1 | const config = require('@fluentui/scripts/config/jest/jest.common');
2 |
3 | module.exports = config;
4 |
--------------------------------------------------------------------------------
/packages/playground/jest.puppeteer.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@fluentui/scripts/config/jest/jest.puppeteer');
2 |
--------------------------------------------------------------------------------
/packages/playground/just.config.ts:
--------------------------------------------------------------------------------
1 | import '@fluentui/scripts/tasks/preset';
2 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Button/index.ts:
--------------------------------------------------------------------------------
1 | export { ButtonBase } from './Button.base';
2 | export { IButtonProps, IButtonSlotProps, IButtonSlots } from './Button.types';
3 | export { useButton } from './useButton';
4 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Checkbox/README.md:
--------------------------------------------------------------------------------
1 | Most updated spec for the new Fluent Checkbox is in the specs [folder](https://github.com/microsoft/fluent-ui-react/blob/master/specs/Checkbox.md).
2 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Checkbox/index.ts:
--------------------------------------------------------------------------------
1 | export { CheckboxBase } from './Checkbox.base';
2 | export { ICheckboxProps, ICheckboxSlotProps, ICheckboxSlots } from './Checkbox.types';
3 | export { useCheckbox } from './useCheckbox';
4 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Link/Link.ts:
--------------------------------------------------------------------------------
1 | import { compose } from '@fluentui/react-theming';
2 | import { LinkBase } from './Link.base';
3 | import styles from './Link.styles';
4 | import tokens from './Link.tokens';
5 |
6 | export const Link = compose(LinkBase, {
7 | name: 'Link',
8 | styles,
9 | tokens,
10 | });
11 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Link/index.ts:
--------------------------------------------------------------------------------
1 | export { LinkBase } from './Link.base';
2 | export { ILinkProps, ILinkSlotProps, ILinkSlots } from './Link.types';
3 | export { useLink } from './useLink';
4 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Slider/Slider.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { compose } from '@fluentui/react-theming';
3 |
4 | describe('Fluent Slider', () => {
5 | it('can slide', () => {
6 | const Button = () => hi
;
7 | compose(Button, {});
8 | expect(true).toBeTruthy();
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Slider/index.ts:
--------------------------------------------------------------------------------
1 | export { SliderBase } from './Slider.base';
2 | export { ISliderProps, ISliderSlotProps, ISliderSlots } from './Slider.types';
3 | export { useSlider } from './useSlider';
4 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Slider/themes/fluent/Slider.theme.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * The Slider Fluent theme system can be applied to the slider:
3 | *
4 | * import { applyDefaultTheme } from '@fluentui/theming';
5 | * import {FluentLightTheme, Fluent}
6 | *
7 | * applyDefaultTheme(FluentSlider);
8 | *
9 | * {
4 | const [value, setValue] = useState(defaultValue);
5 | return [controlledValue === undefined ? value : controlledValue, setValue];
6 | };
7 |
--------------------------------------------------------------------------------
/packages/playground/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/Button/Button.base';
2 | export * from './components/Link/Link.base';
3 | export * from './components/Link/Link';
4 | export * from './components/Slider/Slider.base';
5 | export * from './components/Slider/Slider';
6 |
--------------------------------------------------------------------------------
/packages/playground/src/themes/fluent/dark/index.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/packages/playground/src/themes/fluent/dark/index.ts
--------------------------------------------------------------------------------
/packages/playground/src/themes/fluent/light/index.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/packages/playground/src/themes/fluent/light/index.ts
--------------------------------------------------------------------------------
/packages/react-bindings/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/react-bindings/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-bindings/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react-bindings/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../api-extractor.common.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-bindings/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react-bindings/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/react-bindings/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'react-bindings',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-bindings/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'react-component-event-listener',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-component-event-listener/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'react-component-nesting-registry',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/src/NestingContext.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { NestingContextValue } from './types'
3 |
4 | const NestingContext = React.createContext(null)
5 |
6 | export default NestingContext
7 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Unstable_NestingAuto } from './NestingAuto'
2 | export * from './types'
3 |
--------------------------------------------------------------------------------
/packages/react-component-nesting-registry/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-component-ref/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/react-component-ref/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-component-ref/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react-component-ref/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react-component-ref/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/react-component-ref/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'react-component-ref',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-component-ref/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as handleRef } from './handleRef'
2 | export { default as isRefObject } from './isRefObject'
3 |
4 | export { default as Ref } from './Ref'
5 | export { default as RefFindNode } from './RefFindNode'
6 | export { default as RefForward } from './RefForward'
7 |
8 | export * from './types'
9 |
--------------------------------------------------------------------------------
/packages/react-component-ref/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-context-selector/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/react-context-selector/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-context-selector/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react-context-selector/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react-context-selector/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/react-context-selector/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'react-context-selector',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-context-selector/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as createContext } from './createContext'
2 | export { default as useContextSelector } from './useContextSelector'
3 | export { default as useContextSelectors } from './useContextSelectors'
4 | export * from './types'
5 |
--------------------------------------------------------------------------------
/packages/react-context-selector/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-proptypes/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/react-proptypes/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-proptypes/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react-proptypes/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react-proptypes/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/react-proptypes/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'react-component-nesting-registry',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-proptypes/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../build/tsconfig.common",
3 | "compilerOptions": {
4 | "composite": true,
5 | "outDir": "dist/dts"
6 | },
7 | "include": ["src", "test"],
8 | "references": []
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react-proptypes/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-theming/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 | jest.config.js
6 | scripts/config
7 | *.d.ts
8 | **/*.js
9 |
--------------------------------------------------------------------------------
/packages/react-theming/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "rules": {
4 | "semi": ["error", "always"]
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/packages/react-theming/.gitignore:
--------------------------------------------------------------------------------
1 | lib
2 |
--------------------------------------------------------------------------------
/packages/react-theming/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@fluentui/scripts/config/api-extractor/api-extractor.common.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react-theming/jest.config.js:
--------------------------------------------------------------------------------
1 | const config = require('@fluentui/scripts/config/jest/jest.common');
2 |
3 | module.exports = config;
4 |
--------------------------------------------------------------------------------
/packages/react-theming/just.config.ts:
--------------------------------------------------------------------------------
1 | import '@fluentui/scripts/tasks/preset';
2 |
--------------------------------------------------------------------------------
/packages/react-theming/src/components/Box/Box.tsx:
--------------------------------------------------------------------------------
1 | import { PrimitiveBase } from './Primitive.base';
2 | import styles from './Box.styles';
3 | import { compose } from '../../compose';
4 |
5 | export const Box = compose(PrimitiveBase, { name: 'Box', styles });
6 |
--------------------------------------------------------------------------------
/packages/react-theming/src/components/Box/Box.types.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/packages/react-theming/src/components/Box/Box.types.ts
--------------------------------------------------------------------------------
/packages/react-theming/src/themeContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 |
3 | import { ITheme } from './theme.types';
4 |
5 | export const ThemeContext = createContext(undefined);
6 |
7 | export const useTheme = () => useContext(ThemeContext);
8 |
--------------------------------------------------------------------------------
/packages/react-theming/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@fluentui/scripts/config/typescript/tsconfig.common.json",
3 | "compilerOptions": {
4 | "composite": true,
5 | "rootDir": "src",
6 | "outDir": "lib"
7 | },
8 | "include": ["src"]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react-theming/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react/.eslintignore:
--------------------------------------------------------------------------------
1 | src/themes/teams/components/Icon/svg/ProcessedIcons
2 | coverage/
3 | dist/
4 | lib/
5 | node_modules/
6 |
--------------------------------------------------------------------------------
/packages/react/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/react/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../api-extractor.common.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/react/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/react/src/themes/font-awesome/index.ts:
--------------------------------------------------------------------------------
1 | import { ThemeInput } from '@fluentui/styles'
2 | import { default as icons } from './components/Icon/iconNames'
3 |
4 | export default {
5 | icons,
6 | } as ThemeInput
7 |
--------------------------------------------------------------------------------
/packages/react/src/themes/index.ts:
--------------------------------------------------------------------------------
1 | // Themes
2 | export { default as fontAwesome } from './font-awesome'
3 | export { default as teams } from './teams'
4 | export { default as teamsDark } from './teams-dark'
5 | export { default as teamsHighContrast } from './teams-high-contrast'
6 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/Chat/chatVariables.ts:
--------------------------------------------------------------------------------
1 | import { ChatVariables } from '../../../teams/components/Chat/chatVariables'
2 |
3 | export default (siteVars: any): Partial => {
4 | return {
5 | backgroundColor: siteVars.colors.grey[800],
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/Dialog/dialogVariables.ts:
--------------------------------------------------------------------------------
1 | import { DialogVariables } from '../../../teams/components/Dialog/dialogVariables'
2 |
3 | export default (siteVars: any): Partial => {
4 | return {
5 | rootBackground: siteVars.colors.grey[650],
6 | foregroundColor: siteVars.colors.white,
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/Header/headerDescriptionVariables.ts:
--------------------------------------------------------------------------------
1 | import { HeaderDescriptionVariables } from '../../../teams/components/Header/headerDescriptionVariables'
2 |
3 | export default (siteVariables: any): Partial => ({
4 | color: siteVariables.colors.grey[250],
5 | })
6 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts:
--------------------------------------------------------------------------------
1 | import { HeaderVariables } from '../../../teams/components/Header/headerVariables'
2 |
3 | export default (siteVars: any): Partial => {
4 | return {
5 | color: siteVars.colors.white,
6 | descriptionColor: siteVars.colors.grey[250],
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/HierarchicalTree/hierarchicalTreeTitleVariables.ts:
--------------------------------------------------------------------------------
1 | import { HierarchicalTreeTitleVariables } from '../../../teams/components/HierarchicalTree/hierarchicalTreeTitleVariables'
2 |
3 | export default (siteVars: any): HierarchicalTreeTitleVariables => {
4 | return {
5 | defaultColor: siteVars.colors.white,
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts:
--------------------------------------------------------------------------------
1 | import { IconVariables } from '../../../teams/components/Icon/iconVariables'
2 |
3 | export default (siteVars): Partial => ({
4 | disabledColor: siteVars.colors.grey[450],
5 | })
6 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts:
--------------------------------------------------------------------------------
1 | import { ListItemVariables } from '../../../teams/components/List/listItemVariables'
2 |
3 | export default (siteVars: any): Partial => ({
4 | selectableFocusHoverBackgroundColor: siteVars.colors.grey[500],
5 | selectedBackgroundColor: siteVars.colors.grey[500],
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-dark/components/Segment/segmentVariables.ts:
--------------------------------------------------------------------------------
1 | import { SegmentVariables } from '../../../teams/components/Segment/segmentVariables'
2 |
3 | export default (siteVars: any): Partial => ({
4 | disabledColor: siteVars.colors.grey[450],
5 | disabledBackgroundColor: siteVars.colors.grey[550],
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-high-contrast/components/Chat/chatVariables.ts:
--------------------------------------------------------------------------------
1 | import { ChatVariables } from '../../../teams/components/Chat/chatVariables'
2 |
3 | export default (siteVars: any): Partial => {
4 | return {
5 | backgroundColor: siteVars.colors.black,
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-high-contrast/components/Dialog/dialogStyles.ts:
--------------------------------------------------------------------------------
1 | import { ICSSInJSStyle } from '@fluentui/styles'
2 |
3 | export default {
4 | root: ({ variables: v }): ICSSInJSStyle => ({
5 | border: `1px solid ${v.foregroundColor}`,
6 | }),
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts:
--------------------------------------------------------------------------------
1 | import { DividerVariables } from '../../../teams/components/Divider/dividerVariables'
2 |
3 | export default (siteVars: any): Partial => ({
4 | dividerColor: siteVars.colors.white,
5 | textColor: siteVars.colors.white,
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-high-contrast/components/Header/headerVariables.ts:
--------------------------------------------------------------------------------
1 | import { HeaderVariables } from '../../../teams/components/Header/headerVariables'
2 |
3 | export default (siteVars: any): Partial => {
4 | return {
5 | color: siteVars.colors.white,
6 | descriptionColor: siteVars.colors.white,
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams-high-contrast/components/Segment/segmentVariables.ts:
--------------------------------------------------------------------------------
1 | import { SegmentVariables } from '../../../teams/components/Segment/segmentVariables'
2 |
3 | export default (siteVars: any): Partial => ({
4 | disabledColor: siteVars.colors.black,
5 | disabledBackgroundColor: siteVars.accessibleGreen,
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Carousel/carouselItemVariables.ts:
--------------------------------------------------------------------------------
1 | import carouselVariables from './carouselVariables'
2 |
3 | export default carouselVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Carousel/carouselNavigationItemVariables.ts:
--------------------------------------------------------------------------------
1 | import carouselNavigationVariables from './carouselNavigationVariables'
2 |
3 | export default carouselNavigationVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Chat/chatVariables.ts:
--------------------------------------------------------------------------------
1 | export interface ChatVariables {
2 | backgroundColor: string
3 | }
4 |
5 | export default (siteVars): ChatVariables => ({
6 | backgroundColor: siteVars.colors.grey[100],
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Dialog/dialogFooterStyles.ts:
--------------------------------------------------------------------------------
1 | import { ICSSInJSStyle } from '@fluentui/styles'
2 |
3 | export default {
4 | root: (): ICSSInJSStyle => ({
5 | textAlign: 'right',
6 | }),
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Dropdown/dropdownItemVariables.ts:
--------------------------------------------------------------------------------
1 | import dropdownVariables from './dropdownVariables'
2 |
3 | export default dropdownVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputVariables.ts:
--------------------------------------------------------------------------------
1 | import dropdownVariables from './dropdownVariables'
2 |
3 | export default dropdownVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Dropdown/dropdownSelectedItemVariables.ts:
--------------------------------------------------------------------------------
1 | import dropdownVariables from './dropdownVariables'
2 |
3 | export default dropdownVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeTitleVariables.ts:
--------------------------------------------------------------------------------
1 | export interface HierarchicalTreeTitleVariables {
2 | defaultColor: string
3 | }
4 |
5 | export default (siteVars: any): HierarchicalTreeTitleVariables => {
6 | return {
7 | defaultColor: siteVars.colors.grey[750],
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Icon/svg/processedIndex.ts:
--------------------------------------------------------------------------------
1 | import svgIconsAndStyles from './ProcessedIcons'
2 | import { TeamsProcessedSvgIconSpec } from './types'
3 |
4 | export default svgIconsAndStyles as { [iconName: string]: TeamsProcessedSvgIconSpec }
5 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Icon/svg/teamsIconClassNames.ts:
--------------------------------------------------------------------------------
1 | export interface TeamsIconClassNames {
2 | filled: string
3 | outline: string
4 | }
5 |
6 | export const teamsIconClassNames: TeamsIconClassNames = {
7 | filled: 'ui-icon__filled',
8 | outline: 'ui-icon__outline',
9 | }
10 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/ItemLayout/itemLayoutVariables.ts:
--------------------------------------------------------------------------------
1 | import { pxToRem } from '../../../../utils'
2 |
3 | export default () => {
4 | const vars: any = {}
5 |
6 | vars.paddingLeft = pxToRem(20)
7 | vars.paddingRight = pxToRem(18)
8 | vars.columnGap = pxToRem(8)
9 |
10 | vars.height = pxToRem(48)
11 |
12 | return vars
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Layout/layoutVariables.ts:
--------------------------------------------------------------------------------
1 | export default () => ({})
2 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Menu/menuDividerVariables.ts:
--------------------------------------------------------------------------------
1 | import menuVariables from './menuVariables'
2 |
3 | export default menuVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Menu/menuItemVariables.ts:
--------------------------------------------------------------------------------
1 | import menuVariables from './menuVariables'
2 |
3 | export default menuVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Reaction/reactionGroupVariables.ts:
--------------------------------------------------------------------------------
1 | import { pxToRem } from '../../../../utils'
2 |
3 | export interface ReactionGroupVariables {
4 | reactionSpacing: string
5 | }
6 |
7 | export default (): ReactionGroupVariables => ({
8 | reactionSpacing: pxToRem(8),
9 | })
10 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Table/tableCellVariables.ts:
--------------------------------------------------------------------------------
1 | import tableVariables from './tableVariables'
2 |
3 | export default tableVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Table/tableRowVariables.ts:
--------------------------------------------------------------------------------
1 | import tableVariables from './tableVariables'
2 |
3 | export default tableVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarCustomItemVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarDividerVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarItemVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarMenuDividerVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarMenuRadioGroupStyles.ts:
--------------------------------------------------------------------------------
1 | import { ICSSInJSStyle } from '@fluentui/styles'
2 |
3 | const toolbarMenuRadioGroupStyles = {
4 | root: (): ICSSInJSStyle => ({
5 | padding: 0,
6 | }),
7 | }
8 |
9 | export default toolbarMenuRadioGroupStyles
10 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarMenuRadioGroupVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarMenuVariables.ts:
--------------------------------------------------------------------------------
1 | import toolbarVariables from './toolbarVariables'
2 |
3 | export default toolbarVariables
4 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Toolbar/toolbarRadioGroupStyles.ts:
--------------------------------------------------------------------------------
1 | import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
2 |
3 | const toolbarRadioGroupStyles: ComponentSlotStylesPrepared = {
4 | root: (): ICSSInJSStyle => ({
5 | whiteSpace: 'nowrap',
6 | }),
7 | }
8 |
9 | export default toolbarRadioGroupStyles
10 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Tree/treeStyles.ts:
--------------------------------------------------------------------------------
1 | import { ICSSInJSStyle } from '@fluentui/styles'
2 | import { pxToRem } from '../../../../utils'
3 |
4 | const treeStyles = {
5 | root: (): ICSSInJSStyle => ({
6 | display: 'block',
7 | paddingLeft: `${pxToRem(10)}`,
8 | }),
9 | }
10 |
11 | export default treeStyles
12 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/components/Video/videoVariables.ts:
--------------------------------------------------------------------------------
1 | export interface VideoVariables {
2 | width: string
3 | height: string
4 | }
5 |
6 | export default (): VideoVariables => ({
7 | width: undefined,
8 | height: undefined,
9 | })
10 |
--------------------------------------------------------------------------------
/packages/react/src/themes/teams/staticStyles/index.ts:
--------------------------------------------------------------------------------
1 | import { StaticStyles } from '@fluentui/styles'
2 |
3 | import globalStyles from './globalStyles'
4 | import normalizeCSS from './normalizeCSS'
5 |
6 | const staticStyles: StaticStyles = [normalizeCSS, globalStyles]
7 |
8 | export default staticStyles
9 |
--------------------------------------------------------------------------------
/packages/react/src/umd.ts:
--------------------------------------------------------------------------------
1 | import * as FluentUI from './index'
2 |
3 | module.exports = FluentUI
4 |
--------------------------------------------------------------------------------
/packages/react/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | const docSiteUrl = 'https://microsoft.github.io/fluent-ui-react'
2 |
3 | const constants = {
4 | docSiteUrl,
5 | quickStartUrl: `${docSiteUrl}/quick-start`,
6 | repoURL: 'https://github.com/microsoft/fluent-ui-react',
7 | typeOrder: ['component', 'behavior'],
8 | }
9 |
10 | export default constants
11 |
--------------------------------------------------------------------------------
/packages/react/src/utils/getKindProp.ts:
--------------------------------------------------------------------------------
1 | import { Props, ShorthandValue } from '../types'
2 |
3 | export const getKindProp = (item: ShorthandValue, defaultValue: string) => {
4 | return typeof item === 'object' && (item as any).kind ? (item as any).kind : defaultValue
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react/src/utils/isBrowser.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | const hasDocument = typeof document === 'object' && document !== null
3 | const hasWindow = typeof window === 'object' && window !== null && window.self === window
4 | /* eslint-enable no-undef */
5 |
6 | const isBrowser = () => hasDocument && hasWindow
7 |
8 | export default isBrowser
9 |
--------------------------------------------------------------------------------
/packages/react/src/utils/isRightClick.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | const isRightClick = (eventArgs: React.MouseEvent) => {
4 | return eventArgs.nativeEvent && eventArgs.nativeEvent.which === 3
5 | }
6 |
7 | export default isRightClick
8 |
--------------------------------------------------------------------------------
/packages/react/src/utils/positioner/index.ts:
--------------------------------------------------------------------------------
1 | export * from './types'
2 | export * from './types.internal'
3 | export { default as Popper } from './Popper'
4 |
--------------------------------------------------------------------------------
/packages/react/src/utils/positioner/types.internal.ts:
--------------------------------------------------------------------------------
1 | import { Alignment, Position } from './types'
2 |
3 | export const ALIGNMENTS: Alignment[] = ['top', 'bottom', 'start', 'end', 'center']
4 | export const POSITIONS: Position[] = ['above', 'below', 'before', 'after']
5 |
--------------------------------------------------------------------------------
/packages/react/src/utils/stringLiteralsArray.ts:
--------------------------------------------------------------------------------
1 | const stringLiteralsArray = (...args: T[]): T[] => {
2 | const tuple = (...args: T[]) => args
3 | return tuple(...args)
4 | }
5 |
6 | export default stringLiteralsArray
7 |
--------------------------------------------------------------------------------
/packages/react/test/setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Carousel/CarouselNavigation-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 | import CarouselNavigation from 'src/components/Carousel/CarouselNavigation'
3 |
4 | describe('CarouselNavigation', () => {
5 | isConformant(CarouselNavigation)
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Carousel/CarouselNavigationItem-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 | import CarouselNavigationItem from 'src/components/Carousel/CarouselNavigationItem'
3 |
4 | describe('CarouselNavigationItem', () => {
5 | isConformant(CarouselNavigationItem)
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Dialog/DialogFooter-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import DialogFooter from 'src/components/Dialog/DialogFooter'
4 |
5 | describe('DialogFooter', () => {
6 | isConformant(DialogFooter)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Divider/Divider-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Divider from 'src/components/Divider/Divider'
4 |
5 | describe('Divider', () => {
6 | isConformant(Divider)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Dropdown/DropdownItem-test.tsx:
--------------------------------------------------------------------------------
1 | import DropdownItem from 'src/components/Dropdown/DropdownItem'
2 | import { isConformant } from 'test/specs/commonTests'
3 |
4 | describe('DropdownItem', () => {
5 | isConformant(DropdownItem, {
6 | constructorName: 'DropdownItem',
7 | hasAccessibilityProp: false,
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Grid/Grid-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Grid from 'src/components/Grid/Grid'
4 |
5 | describe('Grid', () => {
6 | isConformant(Grid)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Header/Header-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Header from 'src/components/Header/Header'
4 |
5 | describe('Header', () => {
6 | isConformant(Header)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Header/HeaderDescription-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import HeaderDescription from 'src/components/Header/HeaderDescription'
4 |
5 | describe('HeaderDescription', () => {
6 | isConformant(HeaderDescription)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/ItemLayout/ItemLayout-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import ItemLayout from 'src/components/ItemLayout/ItemLayout'
4 |
5 | describe('ItemLayout', () => {
6 | isConformant(ItemLayout, { hasAccessibilityProp: false })
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Layout/Layout-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Layout from 'src/components/Layout/Layout'
4 |
5 | describe('Layout', () => {
6 | isConformant(Layout, { hasAccessibilityProp: false })
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Menu/MenuDivider-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import MenuDivider from 'src/components/Menu/MenuDivider'
4 |
5 | describe('MenuDivider', () => {
6 | isConformant(MenuDivider)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Popup/PopupContent-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 | import PopupContent from 'src/components/Popup/PopupContent'
3 |
4 | describe('PopupContent', () => {
5 | isConformant(PopupContent, { rendersPortal: true })
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Reaction/Reaction-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Reaction from 'src/components/Reaction/Reaction'
4 |
5 | describe('Reaction', () => {
6 | isConformant(Reaction)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Segment/Segment-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Segment from 'src/components/Segment/Segment'
4 |
5 | describe('Segment', () => {
6 | isConformant(Segment)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Status/Status-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Status from 'src/components/Status/Status'
4 |
5 | describe('Status', () => {
6 | isConformant(Status, { constructorName: 'Status' })
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Toolbar/ToolbarCustomItem-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import ToolbarCustomItem from 'src/components/Toolbar/ToolbarCustomItem'
4 |
5 | describe('ToolbarCustomItem', () => {
6 | isConformant(ToolbarCustomItem, {
7 | requiredProps: { focusable: true },
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Toolbar/ToolbarDivider-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import ToolbarDivider from 'src/components/Toolbar/ToolbarDivider'
4 |
5 | describe('ToolbarDivider', () => {
6 | isConformant(ToolbarDivider)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Toolbar/ToolbarMenuDivider-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import ToolbarMenuDivider from 'src/components/Toolbar/ToolbarMenuDivider'
4 |
5 | describe('ToolbarMenuDivider', () => {
6 | isConformant(ToolbarMenuDivider)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import TooltipContent from 'src/components/Tooltip/TooltipContent'
4 |
5 | describe('TooltipContent', () => {
6 | isConformant(TooltipContent, {
7 | constructorName: 'TooltipContent',
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Tree/TreeItem-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 | import TreeItem from 'src/components/Tree/TreeItem'
3 |
4 | describe('TreeItem', () => {
5 | isConformant(TreeItem, { requiredProps: { id: 'my-id' } })
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Tree/TreeTitle-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 | import TreeTitle from 'src/components/Tree/TreeTitle'
3 |
4 | describe('TreeTitle', () => {
5 | isConformant(TreeTitle)
6 | })
7 |
--------------------------------------------------------------------------------
/packages/react/test/specs/components/Video/Video-test.tsx:
--------------------------------------------------------------------------------
1 | import { isConformant } from 'test/specs/commonTests'
2 |
3 | import Video from 'src/components/Video/Video'
4 |
5 | describe('Video', () => {
6 | isConformant(Video)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/react/test/specs/utils/__snapshots__/felaFocusVisibleEnhancer-test.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`felaFocusVisibleEnhancer replaces :focus-visible 1`] = `".a{border-color:green}.b:focus{border-color:yellow}html[data-whatinput=\\"keyboard\\"] .c:focus{border-color:red}"`;
4 |
--------------------------------------------------------------------------------
/packages/react/test/specs/utils/isBrowser-test.ts:
--------------------------------------------------------------------------------
1 | import isBrowser from 'src/utils/isBrowser'
2 |
3 | describe('isBrowser', () => {
4 | describe('browser', () => {
5 | test('should return true in a browser', () => {
6 | expect(isBrowser()).toBe(true)
7 | })
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/packages/react/test/utils/findIntrinsicElement.ts:
--------------------------------------------------------------------------------
1 | import { CommonWrapper, ReactWrapper } from 'enzyme'
2 |
3 | const findIntrinsicElement = (wrapper: ReactWrapper, selector: string): CommonWrapper =>
4 | wrapper.find(selector).filterWhere(n => typeof n.type() === 'string')
5 |
6 | export default findIntrinsicElement
7 |
--------------------------------------------------------------------------------
/packages/react/test/utils/nextFrame.ts:
--------------------------------------------------------------------------------
1 | export default () =>
2 | new Promise(resolve =>
3 | setTimeout(() => {
4 | resolve()
5 | }),
6 | )
7 |
--------------------------------------------------------------------------------
/packages/react/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/state/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/state/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/state/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/state/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/state/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/state/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './managers/checkboxManager'
2 | export * from './managers/dialogManager'
3 | export * from './managers/dropdownManager'
4 | export * from './managers/sliderManager'
5 |
6 | export { default as createManager } from './createManager'
7 | export * from './types'
8 |
--------------------------------------------------------------------------------
/packages/state/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/packages/styles/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/packages/styles/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/eslint/index.js"],
3 | "root": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/styles/.gulp.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../.gulp')
2 |
--------------------------------------------------------------------------------
/packages/styles/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../api-extractor.common.json"
3 | }
4 |
--------------------------------------------------------------------------------
/packages/styles/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => require('@fluentui/internal-tooling/babel')(api)
2 |
--------------------------------------------------------------------------------
/packages/styles/gulpfile.ts:
--------------------------------------------------------------------------------
1 | import '../../gulpfile'
2 |
--------------------------------------------------------------------------------
/packages/styles/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ...require('@fluentui/internal-tooling/jest'),
3 | name: 'styles',
4 | moduleNameMapper: require('lerna-alias').jest(),
5 | }
6 |
--------------------------------------------------------------------------------
/packages/styles/src/callable.ts:
--------------------------------------------------------------------------------
1 | const callable = (possibleFunction: any) => (...args: any[]) => {
2 | return typeof possibleFunction === 'function' ? possibleFunction(...args) : possibleFunction
3 | }
4 |
5 | export default callable
6 |
--------------------------------------------------------------------------------
/packages/styles/src/createTheme.ts:
--------------------------------------------------------------------------------
1 | import { ThemeInput, ThemePrepared } from './types'
2 | import withDebugId from './withDebugId'
3 |
4 | const createTheme = (themeInput: T, debugId): T => {
5 | return withDebugId(themeInput, debugId)
6 | }
7 |
8 | export default createTheme
9 |
--------------------------------------------------------------------------------
/packages/styles/src/toCompactArray.ts:
--------------------------------------------------------------------------------
1 | const toCompactArray = (...values: T[]): T[] => {
2 | return ([] as T[]).concat(...values).filter(Boolean)
3 | }
4 |
5 | export default toCompactArray
6 |
--------------------------------------------------------------------------------
/packages/styles/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../build/tsconfig.common",
3 | "compilerOptions": {
4 | "composite": true,
5 | "outDir": "dist/dts"
6 | },
7 | "include": ["src", "test"],
8 | "references": []
9 | }
10 |
--------------------------------------------------------------------------------
/packages/styles/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/perf/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | dist/
3 | lib/
4 | node_modules/
5 |
--------------------------------------------------------------------------------
/perf/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../build/eslint/index.js"],
3 | "rules": {
4 | "no-console": "off"
5 | },
6 | "root": true
7 | }
8 |
--------------------------------------------------------------------------------
/perf/doc/perf_chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/fluent-ui-react/3fa9cbca5cde7a5da98b3c71bfc4bed7a56c743d/perf/doc/perf_chart.png
--------------------------------------------------------------------------------
/perf/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../build/tsconfig.common.json",
3 | "compilerOptions": {
4 | "module": "esnext",
5 | "types": ["node", "webpack-env"]
6 | },
7 | "include": ["./src"]
8 | }
9 |
--------------------------------------------------------------------------------
/perf/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../build/tslint/tslint.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/scripts/bin/scripts.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | const { addResolvePath } = require('just-scripts')
3 | const path = require('path')
4 |
5 | addResolvePath(path.dirname(__dirname))
6 |
7 | require('just-scripts/lib/cli.js')
8 |
--------------------------------------------------------------------------------
/scripts/config/jest/jestSetup.common.js:
--------------------------------------------------------------------------------
1 | const enzyme = require('enzyme')
2 | const Adapter = require('enzyme-adapter-react-16')
3 |
4 | enzyme.configure({ adapter: new Adapter() })
5 |
--------------------------------------------------------------------------------
/scripts/index.ts:
--------------------------------------------------------------------------------
1 | export * from 'just-scripts'
2 |
--------------------------------------------------------------------------------
/scripts/just.config.ts:
--------------------------------------------------------------------------------
1 | import './tasks/preset'
2 |
--------------------------------------------------------------------------------
/scripts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./config/typescript/tsconfig.common.json",
3 | "compilerOptions": {
4 | "target": "es2015",
5 | "lib": ["es2015"]
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./build/tsconfig.common.json"
3 | }
4 |
--------------------------------------------------------------------------------
/types/jest-dom.d.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect.d'
2 |
--------------------------------------------------------------------------------