@fluentui/react-tags 0.0.0-nightly-20231004-0414.1

package/dist/index.d.ts

@@ -0,0 +1,405 @@
+/// <reference types="react" />
+
+import { AvatarShape } from '@fluentui/react-avatar';
+import { AvatarSize } from '@fluentui/react-avatar';
+import { ComponentProps } from '@fluentui/react-utilities';
+import { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * InteractionTag component - a visual representation of an attribute with primary and secondary actions.
+ * Can have `InteractionTagPrimary` and `InteractionTagSecondary` components as its children.
+ */
+export declare const InteractionTag: ForwardRefComponent<InteractionTagProps>;
+
+export declare const interactionTagClassNames: SlotClassNames<InteractionTagSlots>;
+
+/**
+ * Context shared between InteractionTag and its children components
+ */
+declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'shape' | 'size'> & {
+    handleTagDismiss: TagDismissHandler<Value>;
+    interactionTagPrimaryId: string;
+    value?: Value;
+}>;
+
+declare type InteractionTagContextValues = {
+    interactionTag: InteractionTagContextValue;
+};
+
+/**
+ * InteractionTagPrimary component - used as the first child of the `InteractionTag` component.
+ * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.
+ */
+export declare const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps>;
+
+export declare const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots>;
+
+export declare type InteractionTagPrimaryContextValues = TagAvatarContextValues;
+
+/**
+ * InteractionTagPrimary Props
+ */
+export declare type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPrimarySlots>> & {
+    /**
+     * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.
+     * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.
+     *
+     * @default false
+     */
+    hasSecondaryAction?: boolean;
+};
+
+export declare type InteractionTagPrimarySlots = {
+    root: NonNullable<Slot<'button'>>;
+    /**
+     * Slot for a visual element, usually an avatar
+     */
+    media?: Slot<'span'>;
+    /**
+     * Slot for an icon
+     */
+    icon?: Slot<'span'>;
+    /**
+     * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here
+     */
+    primaryText: Slot<'span'>;
+    /**
+     * Secondary text that describes or complements the main text
+     */
+    secondaryText?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering InteractionTagPrimary
+ */
+export declare type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> & Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>> & UseTagAvatarContextValuesOptions;
+
+/**
+ * InteractionTag Props
+ */
+export declare type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {
+    /**
+     * An InteractionTag can have filled, outlined or brand experience.
+     *
+     * @default 'filled'
+     */
+    appearance?: TagAppearance;
+    /**
+     * An InteractionTag can show that it cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * An InteractionTag can have rounded or circular shape.
+     *
+     * @default 'round'
+     */
+    shape?: TagShape;
+    /**
+     * An InteractionTag has three sizes.
+     *
+     * @default 'medium'
+     */
+    size?: TagSize;
+    /**
+     * Unique value identifying the tag within a TagGroup
+     */
+    value?: Value;
+};
+
+/**
+ * InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.
+ */
+export declare const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps>;
+
+export declare const interactionTagSecondaryClassNames: SlotClassNames<InteractionTagSecondarySlots>;
+
+/**
+ * InteractionTagSecondary Props
+ */
+export declare type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondarySlots>;
+
+export declare type InteractionTagSecondarySlots = {
+    root: NonNullable<Slot<'button'>>;
+};
+
+/**
+ * State used in rendering InteractionTagSecondary
+ */
+export declare type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;
+
+export declare type InteractionTagSlots = {
+    root: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * State used in rendering InteractionTag
+ */
+export declare type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> & Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {
+    /**
+     * Event handler from TagGroup context that allows TagGroup to dismiss the tag
+     */
+    handleTagDismiss: TagDismissHandler<Value>;
+    /**
+     * id to assign to InteractionTagPrimary
+     */
+    interactionTagPrimaryId: string;
+};
+
+/**
+ * Render the final JSX of InteractionTag
+ */
+export declare const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of InteractionTagPrimary
+ */
+export declare const renderInteractionTagPrimary_unstable: (state: InteractionTagPrimaryState, contextValues: InteractionTagPrimaryContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of InteractionTagSecondary
+ */
+export declare const renderInteractionTagSecondary_unstable: (state: InteractionTagSecondaryState) => JSX.Element;
+
+/**
+ * Render the final JSX of Tag
+ */
+export declare const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of TagGroup
+ */
+export declare const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSX.Element;
+
+/**
+ * Tag component -  a visual representation of an attribute.
+ * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach an action (by default it is dismiss)
+ */
+export declare const Tag: ForwardRefComponent<TagProps>;
+
+export declare type TagAppearance = 'filled' | 'outline' | 'brand';
+
+declare type TagAvatarContextValues = {
+    avatar: {
+        size?: AvatarSize;
+        shape?: AvatarShape;
+    };
+};
+
+export declare const tagClassNames: SlotClassNames<TagSlots>;
+
+declare type TagContextValues = TagAvatarContextValues;
+
+export declare type TagDismissData<Value = TagValue> = {
+    value: Value;
+};
+
+export declare type TagDismissEvent = React_2.MouseEvent | React_2.KeyboardEvent;
+
+export declare type TagDismissHandler<Value = TagValue> = (e: TagDismissEvent, data: TagDismissData<Value>) => void;
+
+/**
+ * TagGroup component - a container for multiple tags.
+ * Provides context to size or dismiss children tags.
+ */
+export declare const TagGroup: ForwardRefComponent<TagGroupProps>;
+
+export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
+
+/**
+ * Context shared between TagGroup and its children components
+ */
+declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>>;
+
+declare type TagGroupContextValues = {
+    tagGroup: TagGroupContextValue;
+};
+
+/**
+ * TagGroup Props
+ */
+export declare type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
+    /**
+     * Callback for when a tag is dismissed
+     */
+    onDismiss?: TagDismissHandler<Value>;
+    size?: TagSize;
+};
+
+export declare type TagGroupSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering TagGroup
+ */
+export declare type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size'>> & {
+    handleTagDismiss: TagDismissHandler<Value>;
+};
+
+/**
+ * Tag Props
+ */
+export declare type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {
+    /**
+     * A Tag can have filled, outlined or brand experience.
+     *
+     * @default 'filled'
+     */
+    appearance?: TagAppearance;
+    /**
+     * A Tag can show that it cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A Tag can be dismissible
+     *
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * A Tag can have rounded or circular shape.
+     *
+     * @default 'round'
+     */
+    shape?: TagShape;
+    /**
+     * A Tag has three sizes.
+     *
+     * @default 'medium'
+     */
+    size?: TagSize;
+    /**
+     * Unique value identifying the tag within a TagGroup
+     */
+    value?: Value;
+};
+
+export declare type TagShape = 'rounded' | 'circular';
+
+export declare type TagSize = 'extra-small' | 'small' | 'medium';
+
+export declare type TagSlots = {
+    root: NonNullable<Slot<'button', 'span'>>;
+    /**
+     * Slot for a visual element, usually an avatar
+     */
+    media?: Slot<'span'>;
+    /**
+     * Slot for an icon
+     */
+    icon?: Slot<'span'>;
+    /**
+     * Main text for the Tag. Children of the root slot are automatically rendered here
+     */
+    primaryText: Slot<'span'>;
+    /**
+     * Secondary text that describes or complements the main text
+     */
+    secondaryText?: Slot<'span'>;
+    /**
+     * Slot for the dismiss icon
+     */
+    dismissIcon?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering Tag
+ */
+export declare type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> & UseTagAvatarContextValuesOptions;
+
+export declare type TagValue = string;
+
+/**
+ * Create the state required to render InteractionTag.
+ *
+ * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,
+ * before being passed to renderInteractionTag_unstable.
+ *
+ * @param props - props from this instance of InteractionTag
+ * @param ref - reference to root HTMLDivElement of InteractionTag
+ */
+export declare const useInteractionTag_unstable: (props: InteractionTagProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagState;
+
+export declare function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues;
+
+/**
+ * Create the state required to render InteractionTagPrimary.
+ *
+ * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,
+ * before being passed to renderInteractionTagPrimary_unstable.
+ *
+ * @param props - props from this instance of InteractionTagPrimary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary
+ */
+export declare const useInteractionTagPrimary_unstable: (props: InteractionTagPrimaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagPrimaryState;
+
+export declare const useInteractionTagPrimaryStyles_unstable: (state: InteractionTagPrimaryState) => InteractionTagPrimaryState;
+
+/**
+ * Create the state required to render InteractionTagSecondary.
+ *
+ * The returned state can be modified with hooks such as useInteractionTagSecondaryStyles_unstable,
+ * before being passed to renderInteractionTagSecondary_unstable.
+ *
+ * @param props - props from this instance of InteractionTagSecondary
+ * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary
+ */
+export declare const useInteractionTagSecondary_unstable: (props: InteractionTagSecondaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagSecondaryState;
+
+export declare const useInteractionTagSecondaryStyles_unstable: (state: InteractionTagSecondaryState) => InteractionTagSecondaryState;
+
+/**
+ * Apply styling to the InteractionTag slots based on the state
+ */
+export declare const useInteractionTagStyles_unstable: (state: InteractionTagState) => InteractionTagState;
+
+/**
+ * Create the state required to render Tag.
+ *
+ * The returned state can be modified with hooks such as useTagStyles_unstable,
+ * before being passed to renderTag_unstable.
+ *
+ * @param props - props from this instance of Tag
+ * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
+ */
+export declare const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLSpanElement | HTMLButtonElement>) => TagState;
+
+export declare function useTagAvatarContextValues_unstable(state: UseTagAvatarContextValuesOptions): TagAvatarContextValues;
+
+declare type UseTagAvatarContextValuesOptions = {
+    avatarSize: AvatarSize;
+    avatarShape: AvatarShape;
+};
+
+/**
+ * Create the state required to render TagGroup.
+ *
+ * The returned state can be modified with hooks such as useTagGroupStyles_unstable,
+ * before being passed to renderTagGroup_unstable.
+ *
+ * @param props - props from this instance of TagGroup
+ * @param ref - reference to root HTMLDivElement of TagGroup
+ */
+export declare const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupState;
+
+export declare function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues;
+
+/**
+ * Apply styling to the TagGroup slots based on the state
+ */
+export declare const useTagGroupStyles_unstable: (state: TagGroupState) => TagGroupState;
+
+/**
+ * Apply styling to the Tag slots based on the state
+ */
+export declare const useTagStyles_unstable: (state: TagState) => TagState;
+
+export { }

package/lib/InteractionTag.js

@@ -0,0 +1 @@
+export * from './components/InteractionTag/index';

package/lib/InteractionTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTag.ts"],"sourcesContent":["export * from './components/InteractionTag/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/InteractionTagPrimary.js

@@ -0,0 +1 @@
+export * from './components/InteractionTagPrimary/index';

package/lib/InteractionTagPrimary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTagPrimary.ts"],"sourcesContent":["export * from './components/InteractionTagPrimary/index';\n"],"names":[],"mappings":"AAAA,cAAc,2CAA2C"}

package/lib/InteractionTagSecondary.js

@@ -0,0 +1 @@
+export * from './components/InteractionTagSecondary/index';

package/lib/InteractionTagSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTagSecondary.ts"],"sourcesContent":["export * from './components/InteractionTagSecondary/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}

package/lib/Tag.js

@@ -0,0 +1 @@
+export * from './components/Tag/index';

package/lib/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Tag.ts"],"sourcesContent":["export * from './components/Tag/index';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB"}

package/lib/TagGroup.js

@@ -0,0 +1 @@
+export * from './components/TagGroup/index';

package/lib/TagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TagGroup.ts"],"sourcesContent":["export * from './components/TagGroup/index';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B"}

package/lib/components/InteractionTag/InteractionTag.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useInteractionTag_unstable } from './useInteractionTag';
+import { renderInteractionTag_unstable } from './renderInteractionTag';
+import { useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';
+import { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * InteractionTag component - a visual representation of an attribute with primary and secondary actions.
+ * Can have `InteractionTagPrimary` and `InteractionTagSecondary` components as its children.
+ */ export const InteractionTag = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInteractionTag_unstable(props, ref);
+    useInteractionTagStyles_unstable(state);
+    useCustomStyleHook_unstable('useInteractionTagStyles_unstable')(state);
+    return renderInteractionTag_unstable(state, useInteractionTagContextValues_unstable(state));
+});
+InteractionTag.displayName = 'InteractionTag';

package/lib/components/InteractionTag/InteractionTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useInteractionTag_unstable } from './useInteractionTag';\nimport { renderInteractionTag_unstable } from './renderInteractionTag';\nimport { useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';\nimport { useInteractionTagContextValues_unstable } from './useInteractionTagContextValues';\nimport type { InteractionTagProps } from './InteractionTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTag component - a visual representation of an attribute with primary and secondary actions.\n * Can have `InteractionTagPrimary` and `InteractionTagSecondary` components as its children.\n */\nexport const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.forwardRef((props, ref) => {\n  const state = useInteractionTag_unstable(props, ref);\n\n  useInteractionTagStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInteractionTagStyles_unstable')(state);\n\n  return renderInteractionTag_unstable(state, useInteractionTagContextValues_unstable(state));\n});\n\nInteractionTag.displayName = 'InteractionTag';\n"],"names":["React","useInteractionTag_unstable","renderInteractionTag_unstable","useInteractionTagStyles_unstable","useInteractionTagContextValues_unstable","useCustomStyleHook_unstable","InteractionTag","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IAEjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ,OAAON,wCAAwCM;AACtF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/InteractionTag/InteractionTag.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/InteractionTag/InteractionTag.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTag.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAppearance, TagShape, TagSize, TagValue, TagDismissHandler } from '../../utils/types';\n\nexport type InteractionTagContextValues = {\n  interactionTag: InteractionTagContextValue;\n};\n\nexport type InteractionTagSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * InteractionTag Props\n */\nexport type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {\n  /**\n   * An InteractionTag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * An InteractionTag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * An InteractionTag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * An InteractionTag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering InteractionTag\n */\nexport type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> &\n  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {\n    /**\n     * Event handler from TagGroup context that allows TagGroup to dismiss the tag\n     */\n    handleTagDismiss: TagDismissHandler<Value>;\n\n    /**\n     * id to assign to InteractionTagPrimary\n     */\n    interactionTagPrimaryId: string;\n  };\n"],"names":[],"mappings":"AAAA,WAgEI"}

package/lib/components/InteractionTag/index.js

@@ -0,0 +1,6 @@
+export * from './InteractionTag';
+export * from './InteractionTag.types';
+export * from './renderInteractionTag';
+export * from './useInteractionTag';
+export * from './useInteractionTagStyles.styles';
+export * from './useInteractionTagContextValues';

package/lib/components/InteractionTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InteractionTag';\nexport * from './InteractionTag.types';\nexport * from './renderInteractionTag';\nexport * from './useInteractionTag';\nexport * from './useInteractionTagStyles.styles';\nexport * from './useInteractionTagContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC;AACjD,cAAc,mCAAmC"}

package/lib/components/InteractionTag/renderInteractionTag.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { InteractionTagContextProvider } from '../../contexts/interactionTagContext';
+/**
+ * Render the final JSX of InteractionTag
+ */ export const renderInteractionTag_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(InteractionTagContextProvider, {
+        value: contextValues.interactionTag,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

package/lib/components/InteractionTag/renderInteractionTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderInteractionTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';\nimport { InteractionTagContextProvider } from '../../contexts/interactionTagContext';\n\n/**\n * Render the final JSX of InteractionTag\n */\nexport const renderInteractionTag_unstable = (\n  state: InteractionTagState,\n  contextValues: InteractionTagContextValues,\n) => {\n  assertSlots<InteractionTagSlots>(state);\n\n  return (\n    <InteractionTagContextProvider value={contextValues.interactionTag}>\n      <state.root />\n    </InteractionTagContextProvider>\n  );\n};\n"],"names":["assertSlots","InteractionTagContextProvider","renderInteractionTag_unstable","state","contextValues","value","interactionTag","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/InteractionTag/useInteractionTag.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
+import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
+/**
+ * Create the state required to render InteractionTag.
+ *
+ * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,
+ * before being passed to renderInteractionTag_unstable.
+ *
+ * @param props - props from this instance of InteractionTag
+ * @param ref - reference to root HTMLDivElement of InteractionTag
+ */ export const useInteractionTag_unstable = (props, ref)=>{
+    const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
+    const id = useId('fui-InteractionTag-', props.id);
+    const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
+    const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
+    return {
+        appearance,
+        disabled,
+        handleTagDismiss,
+        interactionTagPrimaryId,
+        shape,
+        size,
+        value,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getNativeElementProps('div', {
+            ref,
+            ...props,
+            id
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/InteractionTag/useInteractionTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\n/**\n * Create the state required to render InteractionTag.\n *\n * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,\n * before being passed to renderInteractionTag_unstable.\n *\n * @param props - props from this instance of InteractionTag\n * @param ref - reference to root HTMLDivElement of InteractionTag\n */\nexport const useInteractionTag_unstable = (\n  props: InteractionTagProps,\n  ref: React.Ref<HTMLDivElement>,\n): InteractionTagState => {\n  const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n\n  const id = useId('fui-InteractionTag-', props.id);\n\n  const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');\n\n  const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;\n\n  return {\n    appearance,\n    disabled,\n    handleTagDismiss,\n    interactionTagPrimaryId,\n    shape,\n    size,\n    value,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n        id,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useId","slot","useTagGroupContext_unstable","useInteractionTag_unstable","props","ref","handleTagDismiss","size","contextSize","id","interactionTagPrimaryId","appearance","disabled","shape","value","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAE/E,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAEhD,MAAMO,KAAKT,MAAM,uBAAuBI,MAAMK,EAAE;IAEhD,MAAMC,0BAA0BV,MAAM;IAEtC,MAAM,EAAEW,aAAa,QAAQ,EAAEC,WAAW,KAAK,EAAEC,QAAQ,SAAS,EAAEN,OAAOC,WAAW,EAAEM,QAAQL,EAAE,EAAE,GAAGL;IAEvG,OAAO;QACLO;QACAC;QACAN;QACAI;QACAG;QACAN;QACAO;QAEAC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMf,KAAKgB,MAAM,CACflB,sBAAsB,OAAO;YAC3BM;YACA,GAAGD,KAAK;YACRK;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/InteractionTag/useInteractionTagContextValues.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export function useInteractionTagContextValues_unstable(state) {
+    const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = state;
+    return {
+        interactionTag: React.useMemo(()=>({
+                appearance,
+                disabled,
+                handleTagDismiss,
+                interactionTagPrimaryId,
+                shape,
+                size,
+                value
+            }), [
+            appearance,
+            disabled,
+            handleTagDismiss,
+            interactionTagPrimaryId,
+            shape,
+            size,
+            value
+        ])
+    };
+}

package/lib/components/InteractionTag/useInteractionTagContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInteractionTagContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';\n\nexport function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {\n  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = state;\n\n  return {\n    interactionTag: React.useMemo(\n      () => ({ appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value }),\n      [appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value],\n    ),\n  };\n}\n"],"names":["React","useInteractionTagContextValues_unstable","state","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","interactionTag","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAEhG,OAAO;QACLQ,gBAAgBV,MAAMW,OAAO,CAC3B,IAAO,CAAA;gBAAER;gBAAYC;gBAAUC;gBAAkBC;gBAAyBC;gBAAOC;gBAAMC;YAAM,CAAA,GAC7F;YAACN;YAAYC;YAAUC;YAAkBC;YAAyBC;YAAOC;YAAMC;SAAM;IAEzF;AACF"}

package/lib/components/InteractionTag/useInteractionTagStyles.styles.js

@@ -0,0 +1,45 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const interactionTagClassNames = {
+  root: 'fui-InteractionTag'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1y684pp", null, [".r1y684pp{display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;}"]);
+const useRootStyles = /*#__PURE__*/__styles({
+  rounded: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"]
+  },
+  circular: {
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
+    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Btl43ni: ["f1s8kh49", "f1djnp8u"]
+  },
+  medium: {
+    Bqenvij: "f1d2rq10"
+  },
+  small: {
+    Bqenvij: "frvgh55"
+  },
+  "extra-small": {
+    Bqenvij: "fjamq6b"
+  }
+}, {
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".fjamq6b{height:20px;}"]
+});
+/**
+ * Apply styling to the InteractionTag slots based on the state
+ */
+export const useInteractionTagStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  const {
+    shape,
+    size
+  } = state;
+  state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
+  return state;
+};
+//# sourceMappingURL=useInteractionTagStyles.styles.js.map

package/lib/components/InteractionTag/useInteractionTagStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","circular","medium","Bqenvij","small","d","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n    root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n    rounded: shorthands.borderRadius(tokens.borderRadiusMedium),\n    circular: shorthands.borderRadius(tokens.borderRadiusCircular),\n    medium: {\n        height: '32px'\n    },\n    small: {\n        height: '24px'\n    },\n    'extra-small': {\n        height: '20px'\n    }\n});\n/**\n * Apply styling to the InteractionTag slots based on the state\n */ export const useInteractionTagStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const { shape, size } = state;\n    state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,iHAK5B,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAJ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,UAAU,GAAGd,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEe,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7BA,KAAK,CAACd,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEe,iBAAiB,EAAEC,UAAU,CAACC,KAAK,CAAC,EAAED,UAAU,CAACE,IAAI,CAAC,EAAEJ,KAAK,CAACd,IAAI,CAACmB,SAAS,CAAC;EAChJ,OAAOL,KAAK;AAChB,CAAC"}

package/lib/components/InteractionTagPrimary/InteractionTagPrimary.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';
+import { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';
+import { useInteractionTagPrimaryStyles_unstable } from './useInteractionTagPrimaryStyles.styles';
+import { useTagAvatarContextValues_unstable } from '../../utils';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * InteractionTagPrimary component - used as the first child of the `InteractionTag` component.
+ * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.
+ */ export const InteractionTagPrimary = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInteractionTagPrimary_unstable(props, ref);
+    useInteractionTagPrimaryStyles_unstable(state);
+    useCustomStyleHook_unstable('useInteractionTagPrimaryStyles_unstable')(state);
+    return renderInteractionTagPrimary_unstable(state, useTagAvatarContextValues_unstable(state));
+});
+InteractionTagPrimary.displayName = 'InteractionTagPrimary';

package/lib/components/InteractionTagPrimary/InteractionTagPrimary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTagPrimary.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useInteractionTagPrimary_unstable } from './useInteractionTagPrimary';\nimport { renderInteractionTagPrimary_unstable } from './renderInteractionTagPrimary';\nimport { useInteractionTagPrimaryStyles_unstable } from './useInteractionTagPrimaryStyles.styles';\nimport type { InteractionTagPrimaryProps } from './InteractionTagPrimary.types';\nimport { useTagAvatarContextValues_unstable } from '../../utils';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTagPrimary component - used as the first child of the `InteractionTag` component.\n * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.\n */\nexport const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps> = React.forwardRef((props, ref) => {\n  const state = useInteractionTagPrimary_unstable(props, ref);\n\n  useInteractionTagPrimaryStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInteractionTagPrimaryStyles_unstable')(state);\n\n  return renderInteractionTagPrimary_unstable(state, useTagAvatarContextValues_unstable(state));\n});\n\nInteractionTagPrimary.displayName = 'InteractionTagPrimary';\n"],"names":["React","useInteractionTagPrimary_unstable","renderInteractionTagPrimary_unstable","useInteractionTagPrimaryStyles_unstable","useTagAvatarContextValues_unstable","useCustomStyleHook_unstable","InteractionTagPrimary","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAElG,SAASC,kCAAkC,QAAQ,cAAc;AACjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOR,qCAAqCQ,OAAON,mCAAmCM;AACxF,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}