feat(react-headless-components-preview): add Tag family

change/@fluentui-react-headless-components-preview-3cc555dc-e346-4c29-bcd0-c8dfbf38544d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add headless Tags components",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/etc/interaction-tag-primary.api.md

@@ -0,0 +1,46 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InteractionTagPrimaryBaseProps } from '@fluentui/react-tags';
+import type { InteractionTagPrimaryBaseState } from '@fluentui/react-tags';
+import type { InteractionTagPrimaryContextValues as InteractionTagPrimaryContextValues_2 } from '@fluentui/react-tags';
+import type { InteractionTagPrimarySlots as InteractionTagPrimarySlots_2 } from '@fluentui/react-tags';
+import * as React_2 from 'react';
+import { renderInteractionTagPrimary_unstable as renderInteractionTagPrimary } from '@fluentui/react-tags';
+
+// @public
+export const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps>;
+
+// @public (undocumented)
+export type InteractionTagPrimaryContextValues = InteractionTagPrimaryContextValues_2;
+
+// @public (undocumented)
+export type InteractionTagPrimaryProps = InteractionTagPrimaryBaseProps;
+
+// @public (undocumented)
+export type InteractionTagPrimarySlots = InteractionTagPrimarySlots_2;
+
+// @public (undocumented)
+export type InteractionTagPrimaryState = InteractionTagPrimaryBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+        'data-has-secondary-action'?: string;
+    };
+};
+
+export { renderInteractionTagPrimary }
+
+// @public
+export const useInteractionTagPrimary: (props: InteractionTagPrimaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagPrimaryState;
+
+// @public (undocumented)
+export const useInteractionTagPrimaryContextValues: (_state: InteractionTagPrimaryState) => InteractionTagPrimaryContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/interaction-tag-secondary.api.md

@@ -0,0 +1,38 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InteractionTagSecondaryBaseProps } from '@fluentui/react-tags';
+import type { InteractionTagSecondaryBaseState } from '@fluentui/react-tags';
+import type { InteractionTagSecondarySlots as InteractionTagSecondarySlots_2 } from '@fluentui/react-tags';
+import type * as React_2 from 'react';
+import { renderInteractionTagSecondary_unstable as renderInteractionTagSecondary } from '@fluentui/react-tags';
+
+// @public
+export const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps>;
+
+// @public (undocumented)
+export type InteractionTagSecondaryProps = InteractionTagSecondaryBaseProps;
+
+// @public (undocumented)
+export type InteractionTagSecondarySlots = InteractionTagSecondarySlots_2;
+
+// @public (undocumented)
+export type InteractionTagSecondaryState = InteractionTagSecondaryBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+    };
+};
+
+export { renderInteractionTagSecondary }
+
+// @public
+export const useInteractionTagSecondary: (props: InteractionTagSecondaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagSecondaryState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/interaction-tag.api.md

@@ -0,0 +1,47 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InteractionTagBaseProps } from '@fluentui/react-tags';
+import type { InteractionTagBaseState } from '@fluentui/react-tags';
+import type { InteractionTagContextValue } from '@fluentui/react-tags';
+import type { InteractionTagSlots as InteractionTagSlots_2 } from '@fluentui/react-tags';
+import * as React_2 from 'react';
+import { renderInteractionTag_unstable as renderInteractionTag } from '@fluentui/react-tags';
+
+// @public
+export const InteractionTag: ForwardRefComponent<InteractionTagProps>;
+
+// @public (undocumented)
+export type InteractionTagContextValues = {
+    interactionTag: InteractionTagContextValue;
+};
+
+// @public (undocumented)
+export type InteractionTagProps = InteractionTagBaseProps;
+
+// @public (undocumented)
+export type InteractionTagSlots = InteractionTagSlots_2;
+
+// @public (undocumented)
+export type InteractionTagState = InteractionTagBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+    };
+};
+
+export { renderInteractionTag }
+
+// @public
+export const useInteractionTag: (props: InteractionTagProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagState;
+
+// @public (undocumented)
+export const useInteractionTagContextValues: (state: InteractionTagState) => InteractionTagContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/tag-group.api.md

@@ -0,0 +1,47 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import { renderTagGroup_unstable as renderTagGroup } from '@fluentui/react-tags';
+import type { TagGroupBaseProps } from '@fluentui/react-tags';
+import type { TagGroupBaseState } from '@fluentui/react-tags';
+import type { TagGroupContextValue } from '@fluentui/react-tags';
+import type { TagGroupSlots as TagGroupSlots_2 } from '@fluentui/react-tags';
+
+export { renderTagGroup }
+
+// @public
+export const TagGroup: ForwardRefComponent<TagGroupProps>;
+
+// @public (undocumented)
+export type TagGroupContextValues = {
+    tagGroup: TagGroupContextValue;
+};
+
+// @public (undocumented)
+export type TagGroupProps = TagGroupBaseProps;
+
+// @public (undocumented)
+export type TagGroupSlots = TagGroupSlots_2;
+
+// @public (undocumented)
+export type TagGroupState = TagGroupBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-dismissible'?: string;
+    };
+};
+
+// @public
+export const useTagGroup: (props: TagGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupState;
+
+// @public (undocumented)
+export const useTagGroupContextValues: (state: TagGroupState) => TagGroupContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/tag.api.md

@@ -0,0 +1,46 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import { renderTag_unstable as renderTag } from '@fluentui/react-tags';
+import type { TagBaseProps } from '@fluentui/react-tags';
+import type { TagBaseState } from '@fluentui/react-tags';
+import type { TagContextValues as TagContextValues_2 } from '@fluentui/react-tags';
+import type { TagSlots as TagSlots_2 } from '@fluentui/react-tags';
+
+export { renderTag }
+
+// @public
+export const Tag: ForwardRefComponent<TagProps>;
+
+// @public (undocumented)
+export type TagContextValues = TagContextValues_2;
+
+// @public (undocumented)
+export type TagProps = TagBaseProps;
+
+// @public (undocumented)
+export type TagSlots = TagSlots_2;
+
+// @public (undocumented)
+export type TagState = TagBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-dismissible'?: string;
+        'data-selected'?: string;
+    };
+};
+
+// @public
+export const useTag: (props: TagProps, ref: React_2.Ref<HTMLSpanElement | HTMLButtonElement>) => TagState;
+
+// @public (undocumented)
+export const useTagContextValues: (_state: TagState) => TagContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -161,6 +161,24 @@
       "import": "./lib/input.js",
       "require": "./lib-commonjs/input.js"
     },
+    "./interaction-tag": {
+      "types": "./dist/interaction-tag.d.ts",
+      "node": "./lib-commonjs/interaction-tag.js",
+      "import": "./lib/interaction-tag.js",
+      "require": "./lib-commonjs/interaction-tag.js"
+    },
+    "./interaction-tag-primary": {
+      "types": "./dist/interaction-tag-primary.d.ts",
+      "node": "./lib-commonjs/interaction-tag-primary.js",
+      "import": "./lib/interaction-tag-primary.js",
+      "require": "./lib-commonjs/interaction-tag-primary.js"
+    },
+    "./interaction-tag-secondary": {
+      "types": "./dist/interaction-tag-secondary.d.ts",
+      "node": "./lib-commonjs/interaction-tag-secondary.js",
+      "import": "./lib/interaction-tag-secondary.js",
+      "require": "./lib-commonjs/interaction-tag-secondary.js"
+    },
     "./label": {
       "types": "./dist/label.d.ts",
       "node": "./lib-commonjs/label.js",
@@ -281,6 +299,18 @@
       "import": "./lib/tab-list.js",
       "require": "./lib-commonjs/tab-list.js"
     },
+    "./tag": {
+      "types": "./dist/tag.d.ts",
+      "node": "./lib-commonjs/tag.js",
+      "import": "./lib/tag.js",
+      "require": "./lib-commonjs/tag.js"
+    },
+    "./tag-group": {
+      "types": "./dist/tag-group.d.ts",
+      "node": "./lib-commonjs/tag-group.js",
+      "import": "./lib/tag-group.js",
+      "require": "./lib-commonjs/tag-group.js"
+    },
     "./textarea": {
       "types": "./dist/textarea.d.ts",
       "node": "./lib-commonjs/textarea.js",

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/InteractionTag.test.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { InteractionTag } from './InteractionTag';
+import { InteractionTagPrimary } from '../InteractionTagPrimary';
+
+const requiredProps = { children: <InteractionTagPrimary>tag</InteractionTagPrimary> };
+
+describe('InteractionTag', () => {
+  isConformant({
+    Component: InteractionTag,
+    displayName: 'InteractionTag',
+    requiredProps,
+  });
+
+  it('provides a child InteractionTagPrimary with an aria-pressed when handleTagSelect is wired', () => {
+    const result = render(<InteractionTag {...requiredProps} />);
+    expect(result.getByRole('button')).toBeInTheDocument();
+  });
+});

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/InteractionTag.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+import type { InteractionTagProps } from './InteractionTag.types';
+import { useInteractionTag, useInteractionTagContextValues } from './useInteractionTag';
+import { renderInteractionTag } from './renderInteractionTag';
+
+/**
+ * A visual representation of an attribute that can have primary and/or secondary actions.
+ * Composed with `InteractionTagPrimary` and optionally `InteractionTagSecondary` children.
+ */
+export const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.forwardRef((props, ref) => {
+  const state = useInteractionTag(props, ref);
+  const contextValues = useInteractionTagContextValues(state);
+  return renderInteractionTag(state, contextValues);
+});
+
+InteractionTag.displayName = 'InteractionTag';

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/InteractionTag.types.ts

@@ -0,0 +1,28 @@
+import type {
+  InteractionTagSlots as InteractionTagBaseSlots,
+  InteractionTagBaseProps,
+  InteractionTagBaseState,
+} from '@fluentui/react-tags';
+import type { InteractionTagContextValue } from '@fluentui/react-tags';
+
+export type InteractionTagSlots = InteractionTagBaseSlots;
+
+export type InteractionTagProps = InteractionTagBaseProps;
+
+export type InteractionTagState = InteractionTagBaseState & {
+  root: {
+    /**
+     * Data attribute set when the interaction tag is disabled.
+     */
+    'data-disabled'?: string;
+
+    /**
+     * Data attribute set when the interaction tag is selected.
+     */
+    'data-selected'?: string;
+  };
+};
+
+export type InteractionTagContextValues = {
+  interactionTag: InteractionTagContextValue;
+};

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/index.ts

@@ -0,0 +1,9 @@
+export { InteractionTag } from './InteractionTag';
+export { renderInteractionTag } from './renderInteractionTag';
+export { useInteractionTag, useInteractionTagContextValues } from './useInteractionTag';
+export type {
+  InteractionTagSlots,
+  InteractionTagProps,
+  InteractionTagState,
+  InteractionTagContextValues,
+} from './InteractionTag.types';

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/renderInteractionTag.ts

@@ -0,0 +1 @@
+export { renderInteractionTag_unstable as renderInteractionTag } from '@fluentui/react-tags';