### Complete Bubble Chart Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/charts/BubbleChart.md

A full example demonstrating the setup, data, and options for rendering a bubble chart. This includes the import, data, options, and the ChartControl component.

```typescript
// set the data
const data: Chart.ChartData = {
  datasets: [
    {
      label: "Bubble",
      data:
        [
          { x: 10, y: 20, r: 20 },
          { x: 85, y: 50, r: 35 },
          { x: 70, y: 70, r: 5 },
          { x: 40, y: 100, r: 5 },
          { x: 50, y: 50, r: 12 },
          { x: 30, y: 80, r: 15 },
          { x: 20, y: 30, r: 15 },
          { x: 40, y: 10, r: 10 }
        ]
    }]
};

// set the options
const options: Chart.ChartOptions = {
  legend: {
    display: false
  },
  title: {
    display: true,
    text: "My First Bubbles"
  }
};

return (
  <ChartControl
    type={ChartType.Bubble}
    data={data}
    options={options}
  />);

```

--------------------------------

### Install Beta Dependency

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/beta.md

Use this command to install the next available beta version of the package into your project.

```bash
npm install @pnp/spfx-controls-react@next --save
```

--------------------------------

### Install KPIControl package

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/KPIControl.md

Use npm to install the required package for the KPIControl component.

```bash
npm install @pnp/spfx-controls-react
```

--------------------------------

### Install @microsoft/spfx-web-build-rig

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required @microsoft/spfx-web-build-rig development dependency package for SharePoint Framework projects.

```sh
npm i -DE @microsoft/spfx-web-build-rig@1.22.2
```

--------------------------------

### Example Doughnut Chart Implementation

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/charts/DoughnutChart.md

A complete example demonstrating how to define data and options, and then render a doughnut chart using ChartControl.

```typescript
return (
  <ChartControl
    type={ChartType.Doughnut}
    data={data}
    options={options}
  />);

```

--------------------------------

### Install css-loader

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required css-loader development dependency package.

```sh
npm i -DE css-loader@7.1.2
```

--------------------------------

### Install @typescript-eslint/parser

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required @typescript-eslint/parser development dependency package.

```sh
npm i -DE @typescript-eslint/parser@8.46.2
```

--------------------------------

### Minimal MaplibreWorldMap Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/WorldMap.md

A minimal example of the MaplibreWorldMap component, showing how to provide basic data and an onClick handler.

```tsx
<MaplibreWorldMap
  data={[
    {
      id: '1',
      name: 'Paris',
      imageUrl: 'paris.jpg',
      link: '/paris',
      coordinates: [2.3522, 48.8566]
    }
  ]}
  onClick={(location) => alert(`Clicked: ${location.name}`)}
/>
```

--------------------------------

### Complete MaplibreWorldMap Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/WorldMap.md

A comprehensive example demonstrating the MaplibreWorldMap component with all major features configured, including data, event handlers, API key, title, styling, search, and marker customization.

```tsx
import React from 'react';
import { MaplibreWorldMap } from '@pnp/spfx-controls-react/lib/WorldMapControl';
import { IData } from '@pnp/spfx-controls-react/lib/worldMap';

const AdvancedMapExample: React.FC = () => {
  const locations: IData[] = [
    {
      id: 'nyc',
      name: 'New York City',
      imageUrl: 'https://example.com/nyc.jpg',
      link: 'https://example.com/nyc',
      coordinates: [-74.006, 40.7128]
    },
    // ... more locations
  ];

  const handleLocationClick = (location: IData) => {
    window.open(location.link, '_blank');
  };

  const handleSearchChange = (term: string, results: IData[]) => {
    console.log(`Search: "${term}" - ${results.length} results`);
  };

  return (
    <MaplibreWorldMap
      data={locations}
      onClick={handleLocationClick}
      mapKey="your-maptiler-api-key"
      title="Global Office Locations"
      style={{
        width: '100%',
        height: '600px',
        border: '1px solid #e1e1e1',
        borderRadius: '8px'
      }}
      fitPadding={50}
      search={{
        enabled: true,
        placeholder: "Search office locations...",
        zoomLevel: 10,
        position: { top: '15px', right: '15px' },
        onSearchChange: handleSearchChange,
        searchField: (item) => `${item.name} ${item.id}`
      }}
      marker={{
        imageSize: 45,
        markerStyle: {
          borderRadius: '50%',
          border: '3px solid #0078d4',
          boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
        },
        renderToolTip: (item) => (
          <div>
            <h4 style={{margin: '0 0 8px 0'}}>{item.name}</h4>
            <img 
              src={item.imageUrl} 
              alt={item.name}
              style={{width: '120px', borderRadius: '4px'}}
            />
            <p style={{margin: '8px 0 0 0', fontSize: '12px'}}>
              Click marker to visit location page
            </p>
          </div>
        ),
        tooltipStyle: {
          backgroundColor: 'white',
          border: '1px solid #ccc',
          borderRadius: '8px',
          padding: '12px',
          maxWidth: '160px',
          textAlign: 'center'
        }
      }}
    />
  );
};

export default AdvancedMapExample;
```

--------------------------------

### Install @rushstack/heft

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required @rushstack/heft development dependency package.

```sh
npm i -DE @rushstack/heft@1.1.2
```

--------------------------------

### Scatter Chart Data and Options Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/charts/ScatterChart.md

Provides an example of how to structure the data and options for a scatter chart. The 'data' object should contain an array of points with 'x' and 'y' coordinates, and 'options' should configure the X-axis type.

```TypeScript
// set the data
const data: Chart.ChartData = {
  datasets: [{
    label: 'Scatter Dataset',
    data: [
      {
        x: -10,
        y: 0
      },
      {
        x: 0,
        y: 10
      },
      {
        x: 6,
        y: 4
      },
      {
        x: 2,
        y: 6
      },
      {
        x: -4,
        y: 7
      },
      {
        x: -8,
        y: 5
      },
      {
        x: 10,
        y: 5
      }]
  }]
};

// set the options
const options: Chart.ChartOptions = {
  scales: {
    xAxes: [{
      type: 'linear',
      position: 'bottom'
    }]
  }
};

return (
  <ChartControl
    type={ChartType.Scatter}
    data={data}
    options={options}
  />);

```

--------------------------------

### Install @types/heft-jest

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required @types/heft-jest development dependency package.

```sh
npm i -DE @types/heft-jest@1.0.2
```

--------------------------------

### Full Pie Chart Implementation

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/charts/PieChart.md

Complete example including data definition, options configuration, and component rendering.

```TypeScript
// set the data
 const data: Chart.ChartData = {
  labels:
    [
      'January', 'February', 'March', 'April', 'May', 'June', 'July'
    ],
  datasets: [
    {
      label: 'My First Dataset',
      data:
        [
          10, 50, 20, 60, 30, 70, 40
        ]
    }
  ]
};

// set the options
const options: Chart.ChartOptions = {
  legend: {
    display: true,
    position: "left"
  },
  title: {
    display: true,
    text: "My First Pie"
  }
};

return (
  <ChartControl
    type={ChartType.Pie}
    data={data}
    options={options}
  />);
```

--------------------------------

### Install @pnp/spfx-controls-react Dependency

Source: https://github.com/pnp/sp-dev-fx-controls-react/wiki/Getting-started

Install the @pnp/spfx-controls-react package using npm. This command saves the dependency to your project.

```bash
npm install @pnp/spfx-controls-react --save --save-exact
```

--------------------------------

### Complete Polar Area Chart Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/charts/PolarAreaChart.md

A complete example demonstrating how to define data and options, and then render a polar area chart using ChartControl.

```TypeScript
return (
  <ChartControl
    type={ChartType.PolarArea}
    data={data}
    options={options}
  />);

```

--------------------------------

### Install @microsoft/spfx-heft-plugins

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required @microsoft/spfx-heft-plugins development dependency package for SharePoint Framework projects.

```sh
npm i -DE @microsoft/spfx-heft-plugins@1.22.2
```

--------------------------------

### Example IData Structure

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/worldMap/worldMap.md

Provides an example of how to structure location data conforming to the IData interface for use with WorldMapControl.

```tsx
const sampleData: IData[] = [
  {
    id: 'paris-001',
    name: 'Paris, France',
    imageUrl: 'https://example.com/images/paris.jpg',
    link: 'https://example.com/locations/paris',
    coordinates: [2.3522, 48.8566] // [longitude, latitude]
  },
  {
    id: 'tokyo-001',
    name: 'Tokyo, Japan',
    imageUrl: 'https://example.com/images/tokyo.jpg',
    link: '/locations/tokyo',
    coordinates: [139.6917, 35.6895]
  }
];

```

--------------------------------

### Install @microsoft/eslint-config-spfx

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Installs the required @microsoft/eslint-config-spfx development dependency package for SharePoint Framework projects.

```sh
npm i -DE @microsoft/eslint-config-spfx@1.22.2
```

--------------------------------

### Basic ListToolbar Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/ListToolbar/README.md

Renders a simple toolbar with 'New', 'Edit', and 'Delete' buttons. Ensure Fluent UI icons are imported.

```tsx
import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
import { AddRegular, EditRegular, DeleteRegular } from '@fluentui/react-icons';

const BasicToolbar = () => {
  const items = [
    { 
      key: 'new',
      label: 'New',
      icon: <AddRegular />, 
      onClick: () => console.log('New clicked') 
    },
    { 
      key: 'edit',
      label: 'Edit',
      icon: <EditRegular />, 
      onClick: () => console.log('Edit clicked') 
    },
    {
      key: 'delete',
      label: 'Delete',
      icon: <DeleteRegular />, 
      onClick: () => console.log('Delete clicked') 
    },
  ];

  return <ListToolbar items={items} />;
};
```

--------------------------------

### Integrate theme in child components

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/EnhancedThemeProvider.md

Example showing how to wrap child components with the EnhancedThemeProvider.

```TypeScript
<EnhancedThemeProvider applyTo="element" context={this.props.context} theme={this.props.themeVariant}>
  <ChildFunctionComponent />
  <ChildClassComponent />
</EnhancedThemeProvider>
```

--------------------------------

### Grouping Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/wiki/ListView

Illustrates how to configure the `groupByFields` property for the ListView component to enable item grouping.

```APIDOC
## Grouping Example

### Description
This example shows how to define the `groupByFields` property to group items in the `ListView` component.

### Method
N/A (Component Configuration)

### Endpoint
N/A (Component Configuration)

### Parameters
N/A (Component Configuration)

### Request Example
```typescript
const groupByFields: IGrouping[] = [
  {
    name: "Extension", 
    order: GroupOrder.ascending 
  }, {
    name: "Author", 
    order: GroupOrder.descending
  }
];
```

### Response
N/A

### Error Handling
N/A
```

--------------------------------

### Define onConfigure Handler

Source: https://github.com/pnp/sp-dev-fx-controls-react/wiki/Placeholder

Example handler function to trigger the property pane when the configuration button is clicked.

```typescript
private _onConfigure() {
  // Context of the web part
  this.props.context.propertyPane.open();
}
```

--------------------------------

### Handle Dropped Files

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/DragDropFiles.md

Example implementation of the onDrop handler to access file names and full paths.

```typescript
private _getDropFiles = (files) => {
    for (var i = 0; i < files.length; i++) {
      console.log("Filename: " + files[i].name);
      console.log("Path: " + files[i].fullPath);
    }
  }
```

--------------------------------

### Implement Toolbar Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/Toolbar.md

Example usage of the Toolbar component with action groups, filters, and search functionality enabled.

```TypeScript
<Toolbar actionGroups={{
    'group1': {
      'action1': {
        title: 'Edit',
        iconName: 'Edit',
        onClick: () => { console.log('Edit action click'); }
      },
      'action2': {
        title: 'New',
        iconName: 'Add',
        onClick: () => { console.log('New action click'); }
      }
    }
  }}
  filters={[{
    id: "f1",
    title:
      "Fruits (any sweet, edible part of a plant that resembles fruit, even if it does not develop from a floral ovary)",
    items: [
      { id: "f1f1", title: "Pomes" },
      { id: "f1f2", title: "Drupes" },
      { id: "f1f3", title: "Citruses" },
      { id: "f1f4", title: "Berries" },
      { id: "f1f5", title: "Melons" },
    ],
  },
  {
    id: "f3",
    title: "Cacti",
  },]}
  find={true} />
```

--------------------------------

### Import AdaptiveCardHost Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardHost.md

Import the AdaptiveCardHost control and its related types from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeType, Action, CardElement, CardObjectRegistry, HostCapabilities } from "@pnp/spfx-controls-react/lib/AdaptiveCardHost";
```

--------------------------------

### Configure Placeholder Component

Source: https://context7.com/pnp/sp-dev-fx-controls-react/llms.txt

The Placeholder component guides users to configure web parts. It supports custom rendering for icons and descriptions.

```typescript
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { DisplayMode } from '@microsoft/sp-core-library';

// Show placeholder only in edit mode when not configured
{!this.props.listId && this.props.displayMode === DisplayMode.Edit && (
  <Placeholder
    iconName="Edit"
    iconText="Configure Web Part"
    description="Select a list to display items from this web part."
    buttonLabel="Configure"
    hideButton={false}
    theme={this.props.themeVariant}
    onConfigure={() => {
      this.props.context.propertyPane.open();
    }}
  />
)}

// Custom description with render function
<Placeholder
  iconName="Settings"
  iconText={(defaultClassName) => (
    <span className={defaultClassName} style={{ color: 'blue' }}>
      Setup Required
    </span>
  )}
  description={(defaultClassName) => (
    <div className={defaultClassName}>
      <p>This web part requires configuration:</p>
      <ul>
        <li>Select a data source</li>
        <li>Configure display options</li>
      </ul>
    </div>
  )}
  buttonLabel="Open Settings"
  onConfigure={() => this.props.context.propertyPane.open()}
/>
```

--------------------------------

### Import AdaptiveCardDesignerHost Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md

Import the AdaptiveCardDesignerHost control and related types from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { AdaptiveCardDesignerHost, HostContainer, BindingPreviewMode, Versions } from "@pnp/spfx-controls-react/lib/AdaptiveCardDesignerHost";
```

--------------------------------

### Implement basic ChartControl

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ChartControl.md

Basic usage example for rendering a bar chart using the ChartControl component.

```TypeScript
<ChartControl 
  type={ChartType.Bar}
  data={{
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      data: [65, 59, 80, 81, 56, 55, 40]
    }]
  }} />
```

--------------------------------

### Import Taxonomy Picker Modules

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/TaxonomyPicker.md

Import the necessary components for using the Taxonomy Picker control. Ensure the `@pnp/spfx-controls-react` dependency is installed.

```typescript
import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
```

--------------------------------

### Render FileTypeIcon component

Source: https://github.com/pnp/sp-dev-fx-controls-react/wiki/FileTypeIcon

Examples of using the FileTypeIcon component with different configurations for fonts, images, and sizes.

```TypeScript
/* Showing the icons font */
<FileTypeIcon type={IconType.font} application={ApplicationType.Word} />
<FileTypeIcon type={IconType.font} application={ApplicationType.Excel} />
<FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.docx" />
<FileTypeIcon type={IconType.font} path="https://contoso.sharepoint.com/documents/filename.xslx" />

/* Showing the icon image */
<FileTypeIcon type={IconType.image} application={ApplicationType.Word} />
<FileTypeIcon type={IconType.image} path="https://contoso.sharepoint.com/documents/filename.docx" />

/* Icon image allows three different sizes */
<FileTypeIcon type={IconType.image} size={ImageSize.small} application={ApplicationType.Excel} />
<FileTypeIcon type={IconType.image} size={ImageSize.medium} application={ApplicationType.Excel} />
<FileTypeIcon type={IconType.image} size={ImageSize.large} application={ApplicationType.Excel} />
```

--------------------------------

### Use AdaptiveCardDesignerHost with Required Properties

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md

Example of using the AdaptiveCardDesignerHost control with only the essential properties: headerText, buttonText, context, and onSave callback.

```typescript
<AdaptiveCardDesignerHost
  headerText="Adaptive Card Designer"
  buttonText="Open the Designer"
  context={props.context}
  onSave={(payload: object) => setCard(payload)}
/>
```

--------------------------------

### Implement Custom Term Actions in TaxonomyPicker

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/TaxonomyPicker.md

Use the 'termActions' prop to define custom actions for terms. Each action can have a title, icon, and an 'actionCallback' to perform logic. The 'applyToTerm' function determines when the action is available for a term. This example shows actions for getting term labels, hiding, and disabling terms.

```typescript
<TaxonomyPicker allowMultipleSelections={true}
                termsetNameOrID="Countries"
                panelTitle="Select Term"
                label="Taxonomy Picker"
                context={this.props.context}
                onChange={this.onServicePickerChange}
                isTermSetSelectable={false}
                termActions={{
                  actions: [{
                    title: "Get term labels",
                    iconName: "LocaleLanguage",
                    id: "test",
                    invokeActionOnRender: true,
                    hidden: true,
                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
                      console.log(term.Name, term.TermsCount);
                      return {
                        updateActionType: UpdateType.updateTermLabel,
                        value: `${term.Name} (updated)`
                      };
                    },
                    applyToTerm: (term: ITerm, triggerActionCb: (updateAction: UpdateAction) => void, setActionStateForTerm: (actionId: string, termId: string, type: "disabled" | "hidden", value: boolean) => void) => (term && term.Name && term.Name === "internal")
                  },
                  {
                    title: "Hide term",
                    id: "hideTerm",
                    invokeActionOnRender: true,
                    hidden: true,
                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
                      return {
                        updateActionType: UpdateType.hideTerm,
                        value: true
                      };
                    },
                    applyToTerm: (term: ITerm, triggerActionCb: (updateAction: UpdateAction) => void, setActionStateForTerm: (actionId: string, termId: string, type: "disabled" | "hidden", value: boolean) => void) => (term && term.Name && (term.Name.toLowerCase() === "help desk" || term.Name.toLowerCase() === "multi-column valo site page"))
                  },
                  {
                    title: "Disable term",
                    id: "disableTerm",
                    invokeActionOnRender: true,
                    hidden: true,
                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
                      return {
                        updateActionType: UpdateType.disableTerm,
                        value: true
                      };
                    },
                    applyToTerm: (term: ITerm, triggerActionCb: (updateAction: UpdateAction) => void, setActionStateForTerm: (actionId: string, termId: string, type: "disabled" | "hidden", value: boolean) => void) => (term && term.Name && term.Name.toLowerCase() === "secured")
                  },
                  {
                    title: "Disable or hide term",
                    id: "disableOrHideTerm",
                    invokeActionOnRender: true,
                    hidden: true,
                    actionCallback: async (taxService: SPTermStorePickerService, term: ITerm) => {
                      if (term.TermsCount > 0) {
                        return {
                          updateActionType: UpdateType.disableTerm,
                          value: true
                        };
                      }
                      return {
                        updateActionType: UpdateType.hideTerm,
                        value: true
                      };
                    },
                    applyToTerm: (term: ITerm, triggerActionCb: (updateAction: UpdateAction) => void, setActionStateForTerm: (actionId: string, termId: string, type: "disabled" | "hidden", value: boolean) => void) => true
                  }]
                }} />
```

--------------------------------

### Use AdaptiveCardHost with All Properties

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardHost.md

Comprehensive example showcasing all available properties for the AdaptiveCardHost control, including data, styling, theme, custom elements, custom actions, and host capabilities.

```typescript
<AdaptiveCardHost
  card={card}
  data={data}
  style={null}
  className={null}
  theme={this.props.theme}
  themeType={themeType}
  hostConfig={null}
  onInvokeAction={(action) => alert(JSON.stringify(action))}
  onError={(error) => alert(error.message)}
  onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => {
    registry.register("CustomElementName", CustomElement);
  }}
  onSetCustomActions={(registry: CardObjectRegistry<Action>) => {
    registry.register("CustomActionName", CustomAction);
  }}
  onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {
    hostCapabilities.setCustomProperty("CustomPropertyName", Date.now);
  }}
  context={this.props.context}
/>
```

--------------------------------

### Use AdaptiveCardDesignerHost with All Properties

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardDesignerHost.md

Comprehensive example demonstrating the AdaptiveCardDesignerHost control with all available properties, including theme, data binding, host configurations, and UI toggles.

```typescript
<AdaptiveCardDesignerHost
  headerText="Adaptive Card Designer"
  buttonText="Open the Designer"
  context={props.context}
  onSave={(payload: object) => setCard(payload)}
  addDefaultAdaptiveCardHostContainer={true}
  bindingPreviewMode={BindingPreviewMode.SampleData}
  theme={props.theme}
  card={card}
  data={data}
  enableDataBindingSupport={true}
  hostConfig={hostConfig}
  hostContainers={[]}
  injectAdaptiveCardHostContextProperty={true}
  newCardPayload={newCard}
  selectedHostContainerControlsTargetVersion={false}
  showCopyToJsonToolbarCommand={true}
  showDataStructureToolbox={true}
  showFluentBreakpointsPicker={true}
  showSampleDataEditorToolbox={true}
  showTargetVersionMismatchWarning={true}
  showVersionPicker={true}
  supportedTargetVersions={[Versions.v1_5]}
  snippets={snippets}
/>
```

--------------------------------

### Use AdaptiveCardHost with Required Properties

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardHost.md

Example demonstrating the minimal required properties to render the AdaptiveCardHost control. Includes handling action invocation and errors.

```typescript
<AdaptiveCardHost
  card={card}
  onInvokeAction={(action) => alert(JSON.stringify(action))}
  onError={(error) => alert(error.message)}
  context={this.props.context}
/>
```

--------------------------------

### Configure config/rig.json

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Directs build tools to use the external @microsoft/spfx-web-build-rig package.

```sh
@'
{
  // The "rig.json" file directs tools to look for their config files in an external package.
  // Documentation for this system: https://www.npmjs.com/package/@rushstack/rig-package
  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",

  "rigPackageName": "@microsoft/spfx-web-build-rig"
}

'@ | Out-File -FilePath "config/rig.json"
```

--------------------------------

### Import ListToolbar and IToolbarItem

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/ListToolbar/README.md

Import the necessary components and types for using the ListToolbar.

```tsx
import { ListToolbar } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
import type { IListToolbarProps, IToolbarItem } from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
```

--------------------------------

### Initialize and Render TaxonomyTree Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ModernTaxonomyPicker.md

Use this snippet to initialize the taxonomy service, load term store information, and display the TaxonomyTree component. Ensure the WebPartContext and termSetId are provided.

```typescript
import * as React from "react";
import { Guid } from "@microsoft/sp-core-library";
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { sp } from "@pnp/sp";
import { ITermInfo, ITermSetInfo, ITermStoreInfo } from "@pnp/sp/taxonomy";
import { SPTaxonomyService, TaxonomyTree } from "@pnp/spfx-controls-react";

export interface ITestTaxonomyTreeReactHooksProps {
  context: WebPartContext;
  termSetId: string;
  onRenderActionButton?: (termStoreInfo: ITermStoreInfo, termSetInfo: ITermSetInfo, termInfo: ITermInfo, updateTaxonomyTreeViewCallback?: (newTermItems?: ITermInfo[], updatedTermItems?: ITermInfo[], deletedTermItems?: ITermInfo[]) => void) => JSX.Element;
}

export function TestTaxonomyTreeReactHooks(
	props: ITestTaxonomyTreeReactHooksProps
): React.ReactElement<ITestTaxonomyTreeReactHooksProps> {
  const taxonomyService = new SPTaxonomyService(props.context);
  const [terms, setTerms] = React.useState<ITermInfo[]>([]);
  const [currentTermStoreInfo, setCurrentTermStoreInfo] = React.useState<ITermStoreInfo>();
  const [currentTermSetInfo, setCurrentTermSetInfo] = React.useState<ITermSetInfo>();
  const [currentLanguageTag, setCurrentLanguageTag] = React.useState<string>("");
  
  React.useEffect(() => {
    sp.setup(props.context);
    taxonomyService.getTermStoreInfo()
      .then((termStoreInfo) => {
        setCurrentTermStoreInfo(termStoreInfo);
        setCurrentLanguageTag(props.context.pageContext.cultureInfo.currentUICultureName !== '' ?
          props.context.pageContext.cultureInfo.currentUICultureName :
          currentTermStoreInfo.defaultLanguageTag);
      });
    taxonomyService.getTermSetInfo(Guid.parse(props.termSetId))
      .then((termSetInfo) => {
        setCurrentTermSetInfo(termSetInfo);
      });
  }, []);
  
  return (
    currentTermStoreInfo && currentTermSetInfo && currentLanguageTag && (
      <TaxonomyTree
        languageTag={currentLanguageTag}
        onLoadMoreData={taxonomyService.getTerms}
        pageSize={50}
        setTerms={setTerms}
        termSetInfo={currentTermSetInfo}
        termStoreInfo={currentTermStoreInfo}
        terms={terms}
        onRenderActionButton={props.onRenderActionButton}
        hideDeprecatedTerms={false}
        showIcons={true}
      />
    ) || null
  );
}

```

--------------------------------

### Document Library Toolbar Example

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/ListToolbar/README.md

Renders a toolbar with common document library actions like New, Upload, Edit, Share, Download, and Delete. It supports context-sensitive visibility based on selection count and view switching.

```tsx
import {
  ListToolbar 
} from '@pnp/spfx-controls-react/lib/controls/ListToolbar';
import {
  AddRegular, 
  ArrowUploadRegular, 
  FolderAddRegular, 
  EditRegular, 
  DeleteRegular, 
  ShareRegular, 
  DownloadRegular, 
  GridRegular, 
  ListRegular
} from '@fluentui/react-icons';

const DocumentLibraryToolbar = ({ selectedCount, onViewChange, view }) => {
  const items = [
    { key: 'new', label: 'New', icon: <AddRegular />, group: 'create', onClick: () => {} },
    { key: 'upload', label: 'Upload', icon: <ArrowUploadRegular />, group: 'create', onClick: () => {} },
    { key: 'newFolder', label: 'New Folder', icon: <FolderAddRegular />, group: 'create', onClick: () => {} },
    
    // Context-sensitive items
    { key: 'edit', label: 'Edit', icon: <EditRegular />, group: 'actions', visible: selectedCount === 1, onClick: () => {} },
    { key: 'share', label: 'Share', icon: <ShareRegular />, group: 'actions', visible: selectedCount > 0, onClick: () => {} },
    { key: 'download', label: 'Download', icon: <DownloadRegular />, group: 'actions', visible: selectedCount > 0, onClick: () => {} },
    { key: 'delete', label: 'Delete', icon: <DeleteRegular />, group: 'danger', visible: selectedCount > 0, dividerBefore: true, onClick: () => {} },
  ];

  const farItems = [
    {
      key: 'gridView', 
      icon: <GridRegular />, 
      tooltip: 'Grid view',
      appearance: view === 'grid' ? 'primary' : undefined,
      onClick: () => onViewChange('grid') 
    },
    {
      key: 'listView', 
      icon: <ListRegular />, 
      tooltip: 'List view',
      appearance: view === 'list' ? 'primary' : undefined,
      onClick: () => onViewChange('list') 
    },
  ];

  return (
    <ListToolbar 
      items={items} 
      farItems={farItems}
      totalCount={selectedCount > 0 ? selectedCount : undefined}
      ariaLabel="Document library toolbar"
    />
  );
};

```

--------------------------------

### Initialize ListView component

Source: https://github.com/pnp/sp-dev-fx-controls-react/wiki/ListView

Render the ListView component with required items and configuration properties.

```TypeScript
<ListView
  items={items}
  viewFields={viewFields}
  iconFieldName="ServerRelativeUrl"
  compact={true}
  selectionMode={SelectionMode.multiple}
  selection={this._getSelection}
  groupByFields={groupByFields} />
```

--------------------------------

### Area Chart with 'start' Fill Value

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/charts/LineChart.md

Configures an area chart to fill from the bottom of the chart by setting the dataset's 'fill' property to 'start'. Useful for charts with both positive and negative values.

```TypeScript
// set the data
const data: Chart.ChartData = {
  labels:
    [
      'January', 'February', 'March', 'April', 'May', 'June', 'July'
    ],
  datasets: [
    {
      label: 'My First Dataset',
      fill: 'start',
      lineTension: 0,
      data:
        [
          -65, -59, 80, 81, -56, 55, 40
        ]
    }
  ]
};

// set the options
const options: Chart.ChartOptions = {
  legend: {
    display: false,
  },
  title: {
    display: true,
    text: "My First Area Chart"
  }
};

return (
  <ChartControl
    type={ChartType.Line}
    data={data}
    options={options}
  />);

```

--------------------------------

### Initialize WebPartTitle Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/WebPartTitle.md

Configure the WebPartTitle control in your root web part file by passing necessary properties to your main component. Ensure these properties are defined in your component's interface.

```TypeScript
const element: React.ReactElement<IControlsTestProps> = React.createElement(
  ControlsTest,
  {
    title: this.properties.title,
    displayMode: this.displayMode,
    updateProperty: (value: string) => {
      this.properties.title = value;
    }
  }
);
```

--------------------------------

### Execute project migration scripts

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Run these commands to remove legacy build tools, install updated SPFx dependencies, and reconfigure project files.

```sh
npm un -D @microsoft/sp-build-web gulp ajv @microsoft/rush-stack-compiler-5.3
npm i -SE @microsoft/sp-core-library@1.22.2 @microsoft/sp-lodash-subset@1.22.2 @microsoft/sp-office-ui-fabric-core@1.22.2 @microsoft/sp-webpart-base@1.22.2 @microsoft/sp-dialog@1.22.2 @microsoft/sp-application-base@1.22.2 @microsoft/sp-listview-extensibility@1.22.2 @microsoft/sp-property-pane@1.22.2 @microsoft/sp-component-base@1.22.2 @microsoft/sp-extension-base@1.22.2 @microsoft/sp-http@1.22.2 @microsoft/sp-loader@1.22.2 @microsoft/sp-page-context@1.22.2 @microsoft/decorators@1.22.2 @microsoft/sp-adaptive-card-extension-base@1.22.2
npm i -DE @microsoft/sp-module-interfaces@1.22.2 @microsoft/eslint-plugin-spfx@1.22.2 @microsoft/eslint-config-spfx@1.22.2 @microsoft/spfx-web-build-rig@1.22.2 @microsoft/spfx-heft-plugins@1.22.2 @rushstack/eslint-config@4.5.2 typescript@~5.8.0 @rushstack/heft@1.1.2 @typescript-eslint/parser@8.46.2 css-loader@7.1.2 @types/heft-jest@1.0.2
npm dedupe
Remove-Item "src/index.ts"
Remove-Item "gulpfile.js"
@'
{
  "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json"
}

'@ | Out-File -FilePath "tsconfig.json"
@'
{
  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",

  "staticAssetsToCopy": {
    "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],

    "includeGlobs": ["webparts/*/loc/*.js"]
  }
}

'@ | Out-File -FilePath "config/typescript.json"
```

--------------------------------

### Get Field Renderer in componentWillMount

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/fields/FieldRendererHelper.md

Use the `getFieldRenderer` method within a React component's lifecycle method like `componentWillMount` to asynchronously get the appropriate field control. The result is stored in the component's state to trigger a re-render.

```TypeScript
public componentWillMount() {
    FieldRendererHelper.getFieldRenderer(fieldValue, {
      className: this.props.className,
      cssProps: this.props.cssProps
    }, this.props.listItem, this.props.context).then(fieldRenderer => {
        // update state to re-render the Field Customizer
      this.setState({
        fieldRenderer: fieldRenderer
      });
    });
  }
```

--------------------------------

### Use Dashboard Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/Dashboard.md

Example of how to use the Dashboard control with various widget configurations, including titles, descriptions, actions, sizes, and body content with tabs.

```TypeScript
const linkExample = {
      href: "#"
    };
    const customizedLinkExample = {
          href: "#",
          title: "This is a customized link!",
          color: "red",
          target: "_top"
        };
    const calloutItemsExample = [
      {
        id: "action_1",
        title: "Info",
        icon: <Icon iconName={'Edit'} />,
      },
      {
        id: "action_2",
        title: "Popup",
        icon: <Icon iconName={'Add'} />
      },
    ];
    // ...
    <Dashboard
      widgets={[{
        title: "Card 1",
        desc: "Last updated Monday, April 4 at 11:15 AM (PT)",
        widgetActionGroup: calloutItemsExample,
        size: WidgetSize.Triple,
        body: [
          {
            id: "t1",
            title: "Tab 1",
            content: (
              <Text>
                Content #1
              </Text>
            ),
          },
          {
            id: "t2",
            title: "Tab 2",
            content: (
              <Text>
                Content #2
              </Text>
            ),
          },
          {
            id: "t3",
            title: "Tab 3",
            content: (
              <Text>
                Content #3
              </Text>
            ),
          },
        ],
        link: linkExample,
      },
      {
        title: "Card 2",
        size: WidgetSize.Single,
        link: customizedLinkExample,
      },
      {
        title: "Card 3",
        size: WidgetSize.Double,
        link: linkExample,
      }]}
    />
```

--------------------------------

### Import ModernTaxonomyPicker

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ModernTaxonomyPicker.md

Import the ModernTaxonomyPicker component from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { ModernTaxonomyPicker } from "@pnp/spfx-controls-react/lib/ModernTaxonomyPicker";
```

--------------------------------

### Import FieldTitleRenderer Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/fields/FieldTitleRenderer.md

Import the FieldTitleRenderer control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { FieldTitleRenderer } from "@pnp/spfx-controls-react/lib/FieldTitleRenderer";
```

--------------------------------

### Import ViewPicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ViewPicker.md

Import the ViewPicker control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```TypeScript
import { ViewPicker } from "@pnp/spfx-controls-react/lib/ViewPicker";
```

--------------------------------

### Basic TaxonomyPicker Usage

Source: https://context7.com/pnp/sp-dev-fx-controls-react/llms.txt

This basic example shows how to implement a TaxonomyPicker for selecting terms from a specified term set. It supports single or multiple selections and includes a placeholder and required field option. The `onChange` callback provides the selected terms.

```typescript
import {
  TaxonomyPicker,
  IPickerTerms
} from "@pnp/spfx-controls-react/lib/TaxonomyPicker";

// Basic taxonomy picker
<TaxonomyPicker
  context={this.props.context}
  label="Select Category"
  panelTitle="Browse Categories"
  termsetNameOrID="Product Categories"
  allowMultipleSelections={true}
  isTermSetSelectable={false}
  placeholder="Select or type to search..."
  required={true}
  onChange={(terms: IPickerTerms) => {
    console.log("Selected terms:", terms);
    // Each term: { key, name, path, termSet, termSetName }
  }}
/>
```

--------------------------------

### Import UploadFiles Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/UploadFiles.md

Import the UploadFiles control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import {
  UploadFiles,
} from '@pnp/spfx-controls-react/lib/UploadFiles';
```

--------------------------------

### Use AdaptiveCardHost with Teams High Contrast Theme

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/AdaptiveCardHost.md

Example demonstrating how to use the high contrast theme variant for Teams with the AdaptiveCardHost control. Use AdaptiveCardHostThemeType.TeamsHighContrast for this setting.

```typescript
<AdaptiveCardHost
  card={card}
  themeType={AdaptiveCardHostThemeType.TeamsHighContrast}
  onInvokeAction={(action) => alert(JSON.stringify(action))}
  onError={(error) => alert(error.message)}
  context={this.props.context}
/>
```

--------------------------------

### Initialize People Picker Context

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/PeoplePicker.md

Set up the context required for the People Picker control, including the absolute URL, MS Graph client factory, and SP HTTP client.

```typescript
const peoplePickerContext: IPeoplePickerContext = {
    absoluteUrl: this.props.context.pageContext.web.absoluteUrl,
    msGraphClientFactory: this.props.context.msGraphClientFactory,
    spHttpClient: this.props.context.spHttpClient
};
```

--------------------------------

### Import TeamChannelPicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/TeamChannelPicker.md

Import the TeamChannelPicker control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { TeamChannelPicker } from "@pnp/spfx-controls-react/lib/TeamChannelPicker";
```

--------------------------------

### Import Pagination Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/Pagination.md

Import the Pagination control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { Pagination } from "@pnp/spfx-controls-react/lib/pagination";
```

--------------------------------

### Import ListPicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ListPicker.md

Import the ListPicker control into your component. Ensure the @pnp/spfx-controls-react dependency is installed.

```typescript
import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";
```

--------------------------------

### Import LivePersona Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/LivePersona.md

Import the LivePersona control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { LivePersona } from "@pnp/spfx-controls-react/lib/LivePersona";
```

--------------------------------

### Add .vscode/launch.json for Hosted Workbench

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Adds the launch.json file to the .vscode folder to configure debugging for the hosted workbench in SharePoint Framework projects.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hosted workbench",
      "type": "msedge",
      "request": "launch",
      "url": "https://{tenantDomain}/_layouts/workbench.aspx",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///.././src/*": "${webRoot}/src/*",
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "-incognito"
      ]
    }
  ]
}
```

--------------------------------

### Import DynamicForm Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/DynamicForm.md

Import the DynamicForm control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { DynamicForm } from "@pnp/spfx-controls-react/lib/DynamicForm";
```

--------------------------------

### Implement TermSetNavigation control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/TermSetNavigation.md

Render the control with required context, termSetId, and optional context menu configuration.

```TypeScript
<TermSetNavigation
          context={context}
          themeVariant={themeVariant}
          termSetId={"289180a0-4a8b-4f08-ae6e-ea3fb1b669e2"}
          showContextMenu={true}
          contextMenuItems={[
            {
              key: "add",
              text: "Add",
              iconProps: { iconName: "add" },
            },
            {
              key: "adit",
              text: "Edit",
              iconProps: { iconName: "Edit" },
            },
            {
              key: "remove",
              text: "Remove",
              iconProps: { iconName: "delete" },
            },
          ]}
          onSelected={onSelect}
          onSelectedTermAction={onSelectedTermAction}
        />
```

--------------------------------

### Import IconPicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/IconPicker.md

Import the IconPicker module from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker';
```

--------------------------------

### Import FilterBar Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/FilterBar.md

Import the FilterBar control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { FilterBar } from "@pnp/spfx-controls-react/lib/FilterBar";
```

--------------------------------

### Import FieldPicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/FieldPicker.md

Import the FieldPicker control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { FieldPicker } from "@pnp/spfx-controls-react/lib/FieldPicker";
```

--------------------------------

### Render map with default configuration

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/WorldMap.md

Minimal implementation using the free demo map without an API key.

```tsx
<MaplibreWorldMap data={locations} />
```

--------------------------------

### Import ComboBoxListItemPicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ComboBoxListItemPicker.md

Import the ComboBoxListItemPicker control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
```

--------------------------------

### Remove main property

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/upgrade.md

Removes the main entry point definition from package.json.

```json
{
  "main": "undefined"
}
```

--------------------------------

### Import Carousel Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/Carousel.md

Import the Carousel control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { Carousel } from "@pnp/spfx-controls-react/lib/Carousel";
```

--------------------------------

### Import ContentTypePicker Control

Source: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/ContentTypePicker.md

Import the ContentTypePicker control from the @pnp/spfx-controls-react library. Ensure the dependency is installed.

```typescript
import { ContentTypePicker } from "@pnp/spfx-controls-react/lib/ContentTypePicker";
```