@fluentui/react-tag-picker 0.0.0-nightly-20240510-0407.1

package/CHANGELOG.md

@@ -0,0 +1,189 @@
+# Change Log - @fluentui/react-tag-picker
+
+This log was last generated on Fri, 10 May 2024 04:22:52 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20240510-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v0.0.0-nightly-20240510-0407.1)
+
+Fri, 10 May 2024 04:22:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.0.0..@fluentui/react-tag-picker_v0.0.0-nightly-20240510-0407.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-portal to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-combobox to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-tags to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-positioning to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-field to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240510-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/929b85ce9af2225973f9fa16123b087cdd8d0a46) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.0.0)
+
+Thu, 09 May 2024 19:35:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.5.0..@fluentui/react-tag-picker_v9.0.0)
+
+### Minor changes
+
+- feat: release stable ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-portal to v9.4.24 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-aria to v9.11.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-combobox to v9.11.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-tags to v9.3.4 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+- Bump @fluentui/react-positioning to v9.15.0 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
+
+## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.5.0)
+
+Mon, 06 May 2024 12:55:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.4.0..@fluentui/react-tag-picker-preview_v0.5.0)
+
+### Minor changes
+
+- chore: removes freeform prop ([PR #31273](https://github.com/microsoft/fluentui/pull/31273) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.37 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-portal to v9.4.23 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-tabster to v9.21.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-aria to v9.11.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-combobox to v9.11.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-tags to v9.3.3 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.59 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-positioning to v9.14.5 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+- Bump @fluentui/react-field to v9.1.64 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
+
+### Patches
+
+- chore: ensure clicking on surface will toggle open state ([PR #31270](https://github.com/microsoft/fluentui/pull/31270) by bernardo.sunderhus@gmail.com)
+- chore: bug bash follow up ([PR #31272](https://github.com/microsoft/fluentui/pull/31272) by bernardo.sunderhus@gmail.com)
+
+## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.4.0)
+
+Thu, 02 May 2024 11:36:40 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.3.2..@fluentui/react-tag-picker-preview_v0.4.0)
+
+### Minor changes
+
+- feat: adds useTagPickerFilter hook (similar to useComboboxFilter, but with proper TagPicker related components) ([PR #31207](https://github.com/microsoft/fluentui/pull/31207) by bernardo.sunderhus@gmail.com)
+- feature: exports TagPicker event handlers types ([PR #31232](https://github.com/microsoft/fluentui/pull/31232) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-portal to v9.4.22 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-aria to v9.11.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-combobox to v9.11.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-tags to v9.3.2 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-field to v9.1.63 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+
+### Patches
+
+- chore: removes aria-checked from TagPickerOption ([PR #31172](https://github.com/microsoft/fluentui/pull/31172) by bernardo.sunderhus@gmail.com)
+- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
+- chore: removes multiselect from TagPicker signatures ([PR #31173](https://github.com/microsoft/fluentui/pull/31173) by bernardo.sunderhus@gmail.com)
+- chore: make expandIcon aria-hidden by default ([PR #31229](https://github.com/microsoft/fluentui/pull/31229) by bernardo.sunderhus@gmail.com)
+- chore: ensures cursor looks like a text on whole control ([PR #31152](https://github.com/microsoft/fluentui/pull/31152) by bernardo.sunderhus@gmail.com)
+
+## [0.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.3.2)
+
+Tue, 23 Apr 2024 08:17:49 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.3.1..@fluentui/react-tag-picker-preview_v0.3.2)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-portal to v9.4.21 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-aria to v9.10.5 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-combobox to v9.10.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-tags to v9.3.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.58 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-positioning to v9.14.4 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-field to v9.1.62 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+
+## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.3.1)
+
+Thu, 18 Apr 2024 12:43:14 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.3.0..@fluentui/react-tag-picker-preview_v0.3.1)
+
+### Patches
+
+- chore: ensure navigation between TagPickerGroup and TagPickerInput ([PR #31085](https://github.com/microsoft/fluentui/pull/31085) by bernardo.sunderhus@gmail.com)
+
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.3.0)
+
+Wed, 17 Apr 2024 21:54:00 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.2.0..@fluentui/react-tag-picker-preview_v0.3.0)
+
+### Minor changes
+
+- feature:adds support for Field component ([PR #30995](https://github.com/microsoft/fluentui/pull/30995) by bernardo.sunderhus@gmail.com)
+- feat: adds inline property ([PR #31003](https://github.com/microsoft/fluentui/pull/31003) by bernardo.sunderhus@gmail.com)
+- feature: adds support for InteractionTag ([PR #30976](https://github.com/microsoft/fluentui/pull/30976) by bernardo.sunderhus@gmail.com)
+- feat: TagPickerInput input positioning ([PR #31036](https://github.com/microsoft/fluentui/pull/31036) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-portal to v9.4.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-combobox to v9.10.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-tags to v9.3.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-field to v9.1.61 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+
+### Patches
+
+- chore: removes disabled property from ComboboxBaseProps ([PR #30963](https://github.com/microsoft/fluentui/pull/30963) by bernardo.sunderhus@gmail.com)
+- bugfix: Space and Enter should close TagPicker when selecting ([PR #31053](https://github.com/microsoft/fluentui/pull/31053) by bernardo.sunderhus@gmail.com)
+- chore: adopt internal hooks provided by @fluentui/react-combobox ([PR #30975](https://github.com/microsoft/fluentui/pull/30975) by bernardo.sunderhus@gmail.com)
+- chore: ensure Click and Enter open/close popover properly ([PR #31010](https://github.com/microsoft/fluentui/pull/31010) by bernardo.sunderhus@gmail.com)
+- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
+- chore: removes unused props ([PR #31001](https://github.com/microsoft/fluentui/pull/31001) by bernardo.sunderhus@gmail.com)
+
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.2.0)
+
+Thu, 04 Apr 2024 12:08:08 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.1.1..@fluentui/react-tag-picker-preview_v0.2.0)
+
+### Minor changes
+
+- feature: adds freeform support for TagPicker ([PR #30947](https://github.com/microsoft/fluentui/pull/30947) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-combobox to v9.9.6 ([PR #30947](https://github.com/microsoft/fluentui/pull/30947) by beachball)
+
+### Patches
+
+- feat: adds TagPickerOptionGroup component ([PR #30934](https://github.com/microsoft/fluentui/pull/30934) by bernardo.sunderhus@gmail.com)
+
+## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.1.1)
+
+Tue, 02 Apr 2024 09:48:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker-preview_v0.1.0..@fluentui/react-tag-picker-preview_v0.1.1)
+
+### Patches
+
+- bugfix: removes errouneous combobox imports ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-portal to v9.4.19 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-combobox to v9.9.5 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tags to v9.2.1 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-positioning to v9.14.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+
+## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker-preview_v0.1.0)
+
+Thu, 28 Mar 2024 10:43:54 GMT
+
+### Minor changes
+
+- feat: release preview package ([PR #30897](https://github.com/microsoft/fluentui/pull/30897) by bernardo.sunderhus@gmail.com)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-tag-picker-preview
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,68 @@
+# @fluentui/react-tag-picker
+
+**React TagPicker components for [Fluent UI React](https://react.fluentui.dev)**
+
+To import React TagPicker components:
+
+```jsx
+import * as React from 'react';
+import {
+  TagPicker,
+  TagPickerList,
+  TagPickerInput,
+  TagPickerControl,
+  TagPickerProps,
+  TagPickerOption,
+  TagPickerGroup,
+} from '@fluentui/react-tag-picker';
+import { Tag, Avatar } from '@fluentui/react-components';
+
+const options = [
+  'John Doe',
+  'Jane Doe',
+  'Max Mustermann',
+  'Erika Mustermann',
+  'Pierre Dupont',
+  'Amelie Dupont',
+  'Mario Rossi',
+  'Maria Rossi',
+];
+
+export const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
+  const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
+    setSelectedOptions(data.selectedOptions);
+  };
+
+  return (
+    <div style={{ maxWidth: 400 }}>
+      <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
+        <TagPickerControl>
+          <TagPickerGroup>
+            {selectedOptions.map(option => (
+              <Tag key={option} shape="rounded" media={<Avatar name={option} color="colorful" />} value={option}>
+                {option}
+              </Tag>
+            ))}
+          </TagPickerGroup>
+          <TagPickerInput />
+        </TagPickerControl>
+        <TagPickerList>
+          {options
+            .filter(option => !selectedOptions.includes(option))
+            .map(option => (
+              <TagPickerOption
+                secondaryContent="Microsoft FTE"
+                media={<Avatar name={option} color="colorful" />}
+                value={option}
+                key={option}
+              >
+                {option}
+              </TagPickerOption>
+            ))}
+        </TagPickerList>
+      </TagPicker>
+    </div>
+  );
+};
+```

package/Spec.md

@@ -0,0 +1,208 @@
+# Dialog
+
+## Background
+
+This spec defines the default function of a `TagPicker`, the combination of a `Combobox` with `Tag`s components
+
+## Prior Art
+
+- [Github epic](https://github.com/microsoft/fluentui/issues/26652)
+- [Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/references/tagpicker)
+
+## API
+
+The `TagPicker` should implement a `children` based API. The component will leverage the use of `Context` in the interaction and data flows of child compound components.
+
+Sample usages will be give in the following section of this document [Sample code](#sample-code)
+
+### TagPicker
+
+The root level component serves as an interface for interaction with all possible behaviors exposed. It provides context down the hierarchy to `children` compound components to allow functionality. This component expects to receive as children either a `popover` or a `trigger` and a `popover` (or some component that will eventually render one of those compound components) in this specific order.
+
+```tsx
+export type TagPickerSlots = {};
+
+export type TagPickerProps = ComponentProps<TagPickerSlots> &
+  Pick<
+    ComboboxProps,
+    'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open' | 'freeform'
+  > &
+  Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {
+    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;
+    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;
+
+    /**
+     * Can contain two children including a trigger and a popover
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+  };
+```
+
+### TagPickerControl
+
+A visual component to hold all the tags and the text field to be displayed. The `TagPickerControl` is responsible for ensuring consistent layout, it contains `secondaryAction` and `expandIcon`
+
+```typescript
+export type TagPickerControlSlots = {
+  root: Slot<'div'>;
+  /**
+   * A secondary action should be a button-like element to be rendered right after
+   * the trigger responsible for opening/closing the tag picker popover.
+   */
+  secondaryAction: Slot<'span'>;
+  /**
+   * An expandIcon could be any non focusable element (preferably an icon)
+   * to be rendered by the end of the control, it is used by default to
+   * indicate that this component is expandable
+   */
+  expandIcon: Slot<'span'>;
+};
+export type TagPickerControlProps = ComponentProps<Partial<TagPickerControlSlots>>;
+```
+
+### TagPickerGroup
+
+The `TagPickerGroup` component is a specialization of the [`TagGroup` component](https://react.fluentui.dev/?path=/docs/components-tag-taggroup--default), a `TagGroup` is a container for multiple controls that are [`Tag`](https://react.fluentui.dev/?path=/docs/components-tag-tag--default) or [`InteractionTag`](https://react.fluentui.dev/?path=/docs/components-tag-interactiontag--default). It is almost equivalent to a `TagGroup` component, differing on styles and `onDismiss` handling. The `TagPickerGroup` ensures that in the case there's no more tags to be dismissed the `trigger` should be focused
+
+```tsx
+export type TagPickerGroupSlots = TagGroupSlots;
+
+/**
+ * TagPickerGroup Props
+ */
+export type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;
+```
+
+### TagPickerInput
+
+Equivalent to the `input` slot in the `Combobox` component, but alternatively the `TagPicker` implementation has opted for a compound component approach instead of slots.
+
+The `TagPickerInput` is a `trigger` and it has 2 functionalities:
+
+1. open/close the `TagPicker` `popover` (`trigger` behavior)
+2. provide a text field functionality, allowing the user to write texts to select one of the options available on the `TagPicker`
+
+```tsx
+export type TagPickerInputSlots = {
+  root: Slot<'input'>;
+};
+
+/**
+ * TagPickerInput Props
+ */
+export type TagPickerInputProps = Omit<
+  ComponentProps<Partial<TagPickerInputSlots>>,
+  'children' | 'size' | 'defaultValue'
+> &
+  Pick<ComboboxProps, 'clearable' | 'appearance'> & {
+    disabled?: boolean;
+    value?: string;
+  };
+```
+
+### TagPickerButton
+
+The `TagPickerButton` is a `trigger` similar to `TagPickerInput` but it does not provide a text field functionality to allow the user to write texts to select one of the options available on the `TagPicker`, it only provides `trigger` functionality, opening/closing the `popover` once clicked.
+
+A `TagPickerButton` should be an empty space on the `TagPickerControl` that ensures that once clicked the `popover` open state is modified accordingly.
+
+```tsx
+export type TagPickerButtonSlots = {
+  root: Slot<'button'>;
+};
+
+/**
+ * PickerButton Props
+ */
+export type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> &
+  Pick<DropdownProps, 'size' | 'appearance'> & {
+    disabled?: boolean;
+  };
+```
+
+### TagPickerList
+
+`TagPickerList` is equivalent to `listbox` slot from `Combobox`, and it represents the list of options that the `TagPicker` provides. This component should be a direct children of `TagPicker` and it'll be rendered inside of a `Portal` (if the `TagPicker` is not inlined).
+
+`TagPickerList` job is to ensure proper focus once it's opened/closed, and to properly style as wrapper of `TagPickerOption`s.
+
+```tsx
+export type TagPickerListSlots = {
+  root: Slot<typeof Listbox>;
+};
+
+export type TagPickerListProps = ComponentProps<TagPickerListSlots>;
+```
+
+### TagPickerOption
+
+Equivalent to `Option` component from `Combobox`, it represents one option that can be picked on the `TagPicker`, main difference between this component and `Option` is on style and slots available. The `TagPickerOption` provides `media` and `secondaryContent` slots.
+
+```tsx
+export type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {
+  media?: Slot<'div'>;
+  secondaryContent?: Slot<'span'>;
+};
+
+/**
+ * TagPickerOption Props
+ */
+export type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
+  children: React.ReactNode;
+  /**
+   * A TagPickerOption should always provide a value to
+   * identify itself once selected
+   */
+  value: string;
+};
+```
+
+## Migration
+
+_TBA: Link to migration guide doc_
+
+## Behaviors
+
+`TagPicker` will use **Tabster** to handle the keyboard navigation and ensure focus trapping.
+
+The `TagPicker` component relies on `Combobox` to ensure it's navigation behaviors.
+
+#### Mouse & touch
+
+Mouse and touch behavior of a tag picker
+
+1. Clicking on the trigger (element / button component, either a `TagPickerInput` or a `TagPickerButton`) the `popover` is displayed.
+2. A user can continue to interact with elements on the page behind the popover.
+3. Clicking on anything outside of the popover will close it.
+4. Clicking on an option inside of the popover will select the given option and close the popover, once selected the given selected value will be added to the control as a selected tag.
+5. If a selected tag is clicked it'll be dismissed and removed from the list of selected tags
+
+#### Keyboard
+
+Keyboard behavior of tag picker
+
+1. **TabKey** to set focus on Trigger, use **EnterKey** or **KeyDown** to open the popover (if it's a `TagPickerButton` trigger then **Space** key can also be used).
+2. Focus is always maintained in the Trigger, but active descendant is moved to the first option of the popover once it's opened.
+3. After the popover is dismissed, keyboard focus should maintain in the Trigger
+4. **TabKey** Moves focus to `secondaryAction` if available, or for the next focusable element otherwise.
+5. **Shift+Tab** Moves focus to the last selected tag if any available, or for the previous focusable element otherwise.
+6. **EscKey** Closes the popover.
+7. **Enter** Selects an option on the popover and closes it right after.
+8. **Space** Selects an option on the popover without closing it.
+9. **KeyDown** navigates active descendant to next option if available.
+10. **KeyUp** navigates active descendant to previous option if available
+
+## Accessibility
+
+> ⚠️ _Note: All other accessibility information, not covered in this section, is provided throughout the spec._
+
+The tag picker component follows `Combobox` accessibility provisions.
+
+### Aria roles and states
+
+- Trigger
+  - [`role="combobox"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role)
+- Popover
+  - [`role="menu"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role)
+- Option
+  - [`role="menuitemcheckbox"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role)