# pnp/sp-dev-fx-controls-react architecture

> Architecture diagram of the GitHub repository pnp/sp-dev-fx-controls-react, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pnp/sp-dev-fx-controls-react
- Repository: https://github.com/pnp/sp-dev-fx-controls-react

## Overview

This repository is the PnP SharePoint Framework React Controls library: it provides reusable React controls for SPFx solutions. The principal workflow is an SPFx app consuming the package’s public exports and using controls to present or interact with SharePoint data. Major branches include file selection, lists and fields, people and taxonomy, and general UI/data visualization controls. The tree and excerpts establish the breadth of the library, but do not show most control internals; edges therefore show only documented package use and exports visible in the public index.

Main entry points: [`src/index.ts`](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/index.ts) (Public Exports), [`src/services/FilesSearchService.ts`](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/FilesSearchService.ts) (File Search), [`src/common/utilities/GeneralHelper.ts`](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/utilities/GeneralHelper.ts) (General Helpers), [`src/services/SPService.ts`](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/SPService.ts) (SP Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Package API"]
  node_public["Public Exports<br/>[index.ts]"]
end

subgraph group_data["SharePoint Data"]
  node_entities["SP Entities<br/>[SPEntities.ts]"]
  node_spservice["SP Service<br/>[SPService.ts]"]
  node_termservice["Term Store Service"]
  node_helpers["General Helpers<br/>[GeneralHelper.ts]"]
  node_sphelper["SP Helpers<br/>[SPHelper.ts]"]
  node_strings["String Extensions"]
end

subgraph group_selection["Pickers and Search"]
  node_filepicker["File Picker"]
  node_spfilepicker["SP File Picker<br/>[useSPFilePicker.ts]"]
  node_filesearch["File Search"]
  node_people["People Search"]
  node_teams["Teams Hook<br/>[useTeams.ts]"]
  node_groups["Groups Hook<br/>[useGroups.ts]"]
end

subgraph group_presentation["UI and Visualization"]
  node_lists["List Controls"]
  node_fields["Field Controls"]
  node_taxonomy["Taxonomy Picker"]
  node_calendar["Calendar"]
  node_charts["Charts"]
  node_dashboard["Dashboard"]
  node_adaptive["Adaptive Cards"]
  node_ui["Other UI Controls"]
end

node_app(("SPFx Application"))
node_graph(("Microsoft Graph"))
node_sharepoint(("SharePoint APIs"))

node_app -->|"consumes"| node_public
node_public -->|"exports"| node_filepicker
node_public -->|"exports"| node_spfilepicker
node_public -->|"exports"| node_lists
node_public -->|"exports"| node_fields
node_public -->|"exports"| node_taxonomy
node_public -->|"exports"| node_calendar
node_public -->|"exports"| node_charts
node_public -->|"exports"| node_ui
node_spservice -->|"uses types"| node_entities
node_spservice -->|"uses helpers"| node_helpers
node_spfilepicker -.->|"uses picker APIs"| node_sharepoint
node_filesearch -->|"queries search"| node_sharepoint
node_filesearch -->|"uses helpers"| node_helpers
node_filesearch -->|"resolves site info"| node_sharepoint
node_people -->|"searches users"| node_graph
node_teams -->|"queries teams"| node_graph
node_groups -->|"queries groups"| node_graph
node_termservice -->|"retrieves terms"| node_sharepoint
node_sphelper -.->|"supports SP controls"| node_sharepoint
node_helpers -->|"loads extensions"| node_strings

click node_public "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/index.ts"
click node_entities "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/SPEntities.ts"
click node_spservice "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/SPService.ts"
click node_termservice "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/SPTermStorePickerService.ts"
click node_helpers "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/utilities/GeneralHelper.ts"
click node_sphelper "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/utilities/SPHelper.ts"
click node_strings "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/extensions/String.extensions.ts"
click node_filepicker "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/filePicker"
click node_spfilepicker "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/controls/SPFilePicker/hooks/useSPFilePicker.ts"
click node_filesearch "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/FilesSearchService.ts"
click node_people "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/PeopleSearchService.ts"
click node_teams "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/hooks/useTeams.ts"
click node_groups "https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/hooks/useGroups.ts"
click node_lists "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/DetailsList"
click node_fields "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/fields"
click node_taxonomy "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/TermSetNavigation"
click node_calendar "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/calendar"
click node_charts "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/chartControl"
click node_dashboard "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/dashboard"
click node_adaptive "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/adaptiveCardHost"
click node_ui "https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_public toneBlue
class node_entities,node_spservice,node_termservice,node_helpers,node_sphelper,node_strings toneAmber
class node_filepicker,node_spfilepicker,node_filesearch,node_people,node_teams,node_groups,node_sharepoint toneMint
class node_lists,node_fields,node_taxonomy,node_calendar,node_charts,node_dashboard,node_adaptive,node_ui toneRose
class node_app,node_graph toneIndigo
```

## Components

### Package API

- [Public Exports](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/index.ts): `src/index.ts`

### SharePoint Data

- [SP Entities](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/SPEntities.ts): `src/common/SPEntities.ts`
- [SP Service](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/SPService.ts): `src/services/SPService.ts`
- [Term Store Service](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/SPTermStorePickerService.ts): `src/services/SPTermStorePickerService.ts`
- [General Helpers](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/utilities/GeneralHelper.ts): `src/common/utilities/GeneralHelper.ts`
- [SP Helpers](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/utilities/SPHelper.ts): `src/common/utilities/SPHelper.ts`
- [String Extensions](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/extensions/String.extensions.ts): `src/common/extensions/String.extensions.ts`

### Pickers and Search

- [File Picker](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/filePicker): `src/controls/filePicker`
- [SP File Picker](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/controls/SPFilePicker/hooks/useSPFilePicker.ts): `src/controls/SPFilePicker/hooks/useSPFilePicker.ts`
- [File Search](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/FilesSearchService.ts): `src/services/FilesSearchService.ts`
- [People Search](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/services/PeopleSearchService.ts): `src/services/PeopleSearchService.ts`
- [Teams Hook](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/hooks/useTeams.ts): `src/hooks/useTeams.ts`
- [Groups Hook](https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/hooks/useGroups.ts): `src/hooks/useGroups.ts`

### UI and Visualization

- [List Controls](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/DetailsList): `src/controls/DetailsList`
- [Field Controls](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/fields): `src/controls/fields`
- [Taxonomy Picker](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/TermSetNavigation): `src/controls/TermSetNavigation`
- [Calendar](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/calendar): `src/controls/calendar`
- [Charts](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/chartControl): `src/controls/chartControl`
- [Dashboard](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/dashboard): `src/controls/dashboard`
- [Adaptive Cards](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls/adaptiveCardHost): `src/controls/adaptiveCardHost`
- [Other UI Controls](https://github.com/pnp/sp-dev-fx-controls-react/tree/dev/src/controls): `src/controls`

### Other components

- **SPFx Application**
- **Microsoft Graph**
- **SharePoint APIs**

## Connections

- SPFx Application → Public Exports: consumes (evidence: `README.md`)
- Public Exports → File Picker: exports (evidence: `src/index.ts`)
- Public Exports → SP File Picker: exports (evidence: `src/index.ts`)
- Public Exports → List Controls: exports (evidence: `src/index.ts`)
- Public Exports → Field Controls: exports (evidence: `src/index.ts`)
- Public Exports → Taxonomy Picker: exports (evidence: `src/index.ts`)
- Public Exports → Calendar: exports (evidence: `src/index.ts`)
- Public Exports → Charts: exports (evidence: `src/index.ts`)
- Public Exports → Other UI Controls: exports (evidence: `src/index.ts`)
- SP Service → SP Entities: uses types (evidence: `src/services/SPService.ts`)
- SP Service → General Helpers: uses helpers (evidence: `src/services/SPService.ts`)
- SP File Picker → SharePoint APIs: uses picker APIs
- File Search → SharePoint APIs: queries search (evidence: `src/services/FilesSearchService.ts`)
- File Search → General Helpers: uses helpers (evidence: `src/services/FilesSearchService.ts`)
- File Search → SharePoint APIs: resolves site info (evidence: `src/services/FilesSearchService.ts`)
- People Search → Microsoft Graph: searches users (evidence: `src/services/PeopleSearchService.ts`)
- Teams Hook → Microsoft Graph: queries teams (evidence: `src/hooks/useTeams.ts`)
- Groups Hook → Microsoft Graph: queries groups (evidence: `src/hooks/useGroups.ts`)
- Term Store Service → SharePoint APIs: retrieves terms (evidence: `src/services/SPTermStorePickerService.ts`)
- SP Helpers → SharePoint APIs: supports SP controls
- General Helpers → String Extensions: loads extensions (evidence: `src/common/utilities/GeneralHelper.ts`)