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

package/lib/components/InteractionTagPrimary/InteractionTagPrimary.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTagPrimary.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type InteractionTagPrimaryContextValues = TagAvatarContextValues;\n\nexport type InteractionTagPrimarySlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * Slot for a visual element, usually an avatar\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * Slot for an icon\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here\n   */\n  primaryText: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  secondaryText?: Slot<'span'>;\n};\n\n/**\n * InteractionTagPrimary Props\n */\nexport type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPrimarySlots>> & {\n  /**\n   * Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.\n   * If `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.\n   *\n   * @default false\n   */\n  hasSecondaryAction?: boolean;\n};\n\n/**\n * State used in rendering InteractionTagPrimary\n */\nexport type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> &\n  Required<\n    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> &\n      Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>\n  > &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"mappings":"AAAA,WAmDmC"}

package/lib/components/InteractionTagPrimary/index.js

@@ -0,0 +1,5 @@
+export * from './InteractionTagPrimary';
+export * from './InteractionTagPrimary.types';
+export * from './renderInteractionTagPrimary';
+export * from './useInteractionTagPrimary';
+export * from './useInteractionTagPrimaryStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InteractionTagPrimary';\nexport * from './InteractionTagPrimary.types';\nexport * from './renderInteractionTagPrimary';\nexport * from './useInteractionTagPrimary';\nexport * from './useInteractionTagPrimaryStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC;AAC9C,cAAc,6BAA6B;AAC3C,cAAc,0CAA0C"}

package/lib/components/InteractionTagPrimary/renderInteractionTagPrimary.js

@@ -0,0 +1,19 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { AvatarContextProvider } from '@fluentui/react-avatar';
+/**
+ * Render the final JSX of InteractionTagPrimary
+ */ export const renderInteractionTagPrimary_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ _jsx(AvatarContextProvider, {
+                value: contextValues.avatar,
+                children: /*#__PURE__*/ _jsx(state.media, {})
+            }),
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.primaryText && /*#__PURE__*/ _jsx(state.primaryText, {}),
+            state.secondaryText && /*#__PURE__*/ _jsx(state.secondaryText, {})
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderInteractionTagPrimary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  InteractionTagPrimaryState,\n  InteractionTagPrimarySlots,\n  InteractionTagPrimaryContextValues,\n} from './InteractionTagPrimary.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of InteractionTagPrimary\n */\nexport const renderInteractionTagPrimary_unstable = (\n  state: InteractionTagPrimaryState,\n  contextValues: InteractionTagPrimaryContextValues,\n) => {\n  assertSlots<InteractionTagPrimarySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderInteractionTagPrimary_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAJ,YAAwCG;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAGfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;;;AAGlD,EAAE"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimary.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
+const avatarSizeMap = {
+    medium: 28,
+    small: 20,
+    'extra-small': 16
+};
+const avatarShapeMap = {
+    rounded: 'square',
+    circular: 'circular'
+};
+/**
+ * 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 const useInteractionTagPrimary_unstable = (props, ref)=>{
+    const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();
+    const { hasSecondaryAction = false } = props;
+    return {
+        appearance,
+        avatarShape: avatarShapeMap[shape],
+        avatarSize: avatarSizeMap[size],
+        disabled,
+        hasSecondaryAction,
+        shape,
+        size,
+        components: {
+            root: 'button',
+            media: 'span',
+            icon: 'span',
+            primaryText: 'span',
+            secondaryText: 'span'
+        },
+        root: slot.always(getNativeElementProps('button', {
+            ref,
+            disabled,
+            id: interactionTagPrimaryId,
+            ...props
+        }), {
+            elementType: 'button'
+        }),
+        media: slot.optional(props.media, {
+            elementType: 'span'
+        }),
+        icon: slot.optional(props.icon, {
+            elementType: 'span'
+        }),
+        primaryText: slot.optional(props.primaryText, {
+            renderByDefault: true,
+            defaultProps: {
+                children: props.children
+            },
+            elementType: 'span'
+        }),
+        secondaryText: slot.optional(props.secondaryText, {
+            elementType: 'span'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useInteractionTagPrimary.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\nconst avatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst avatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render InteractionTagPrimary.\n *\n * The returned state can be modified with hooks such as useInteractionTagPrimaryStyles_unstable,\n * before being passed to renderInteractionTagPrimary_unstable.\n *\n * @param props - props from this instance of InteractionTagPrimary\n * @param ref - reference to root HTMLButtonElement of InteractionTagPrimary\n */\nexport const useInteractionTagPrimary_unstable = (\n  props: InteractionTagPrimaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagPrimaryState => {\n  const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();\n  const { hasSecondaryAction = false } = props;\n\n  return {\n    appearance,\n    avatarShape: avatarShapeMap[shape],\n    avatarSize: avatarSizeMap[size],\n    disabled,\n    hasSecondaryAction,\n    shape,\n    size,\n\n    components: {\n      root: 'button',\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n    },\n\n    root: slot.always(\n      getNativeElementProps('button', {\n        ref,\n        disabled,\n        id: interactionTagPrimaryId,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n\n    media: slot.optional(props.media, { elementType: 'span' }),\n    icon: slot.optional(props.icon, { elementType: 'span' }),\n    primaryText: slot.optional(props.primaryText, {\n      renderByDefault: true,\n      defaultProps: {\n        children: props.children,\n      },\n      elementType: 'span',\n    }),\n    secondaryText: slot.optional(props.secondaryText, { elementType: 'span' }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useInteractionTagContext_unstable","avatarSizeMap","medium","small","avatarShapeMap","rounded","circular","useInteractionTagPrimary_unstable","props","ref","appearance","disabled","interactionTagPrimaryId","shape","size","hasSecondaryAction","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","always","id","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGd;IACvE,MAAM,EAAEe,qBAAqB,KAAK,EAAE,GAAGP;IAEvC,OAAO;QACLE;QACAM,aAAaZ,cAAc,CAACS,MAAM;QAClCI,YAAYhB,aAAa,CAACa,KAAK;QAC/BH;QACAI;QACAF;QACAC;QAEAI,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;QACjB;QAEAJ,MAAMpB,KAAKyB,MAAM,CACf1B,sBAAsB,UAAU;YAC9BW;YACAE;YACAc,IAAIb;YACJ,GAAGJ,KAAK;QACV,IACA;YAAEkB,aAAa;QAAS;QAG1BN,OAAOrB,KAAK4B,QAAQ,CAACnB,MAAMY,KAAK,EAAE;YAAEM,aAAa;QAAO;QACxDL,MAAMtB,KAAK4B,QAAQ,CAACnB,MAAMa,IAAI,EAAE;YAAEK,aAAa;QAAO;QACtDJ,aAAavB,KAAK4B,QAAQ,CAACnB,MAAMc,WAAW,EAAE;YAC5CM,iBAAiB;YACjBC,cAAc;gBACZC,UAAUtB,MAAMsB,QAAQ;YAC1B;YACAJ,aAAa;QACf;QACAH,eAAexB,KAAK4B,QAAQ,CAACnB,MAAMe,aAAa,EAAE;YAAEG,aAAa;QAAO;IAC1E;AACF,EAAE"}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js

@@ -0,0 +1,232 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';
+export const interactionTagPrimaryClassNames = {
+  root: 'fui-InteractionTagPrimary',
+  media: 'fui-InteractionTagPrimary__media',
+  icon: 'fui-InteractionTagPrimary__icon',
+  primaryText: 'fui-InteractionTagPrimary__primaryText',
+  secondaryText: 'fui-InteractionTagPrimary__secondaryText'
+};
+const baseStyles = {
+  // reset default button style:
+  color: 'inherit',
+  fontFamily: 'inherit',
+  padding: '0px',
+  borderStyle: 'none',
+  appearance: 'button',
+  textAlign: 'unset',
+  backgroundColor: 'transparent',
+  display: 'inline-grid',
+  height: '100%',
+  alignItems: 'center',
+  gridTemplateAreas: `
+  "media primary  "
+  "media secondary"
+  `,
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+  ... /*#__PURE__*/createCustomFocusIndicatorStyle({
+    ... /*#__PURE__*/shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    zIndex: 1
+  })
+};
+const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r11r5xvj", "rjnnu2a", {
+  r: [".r11r5xvj{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r11r5xvj[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".rjnnu2a{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".rjnnu2a[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}"],
+  s: ["@media (forced-colors: active){.r11r5xvj{position:relative;}.r11r5xvj::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);}}", "@media (forced-colors: active){.rjnnu2a{position:relative;}.rjnnu2a::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);}}"]
+});
+const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r1k6bywq", "r46rai9", {
+  r: [".r1k6bywq{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1k6bywq[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".r46rai9{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r46rai9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}"],
+  s: ["@media (forced-colors: active){.r1k6bywq{position:relative;}.r1k6bywq::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-left-width:var(--strokeWidthThin);border-left-style:solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusCircular);border-bottom-left-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r46rai9{position:relative;}.r46rai9::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-right-width:var(--strokeWidthThin);border-right-style:solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusCircular);border-bottom-right-radius:var(--borderRadiusCircular);}}"]
+});
+/**
+ * Style override for pseudo element that draws the border for windows high contrast mode
+ */
+const useRootCircularContrastStyles = /*#__PURE__*/__styles({
+  withoutSecondaryAction: {
+    Bglfifq: "ff3fe07",
+    G4pote: ["f1b2qn5y", "fw1c3ou"],
+    B33s42s: ["f9bjnkc", "f17ca6ku"],
+    w20ur: ["f6k8nl2", "f1ik0cvg"],
+    Byczuf6: ["f10f1qdh", "fmb7qm7"]
+  }
+}, {
+  m: [["@media (forced-colors: active){.ff3fe07{position:relative;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b2qn5y::before{border-right-width:var(--strokeWidthThin);}.fw1c3ou::before{border-left-width:var(--strokeWidthThin);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f17ca6ku::before{border-left-style:solid;}.f9bjnkc::before{border-right-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ik0cvg::before{border-top-left-radius:var(--borderRadiusCircular);}.f6k8nl2::before{border-top-right-radius:var(--borderRadiusCircular);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f10f1qdh::before{border-bottom-right-radius:var(--borderRadiusCircular);}.fmb7qm7::before{border-bottom-left-radius:var(--borderRadiusCircular);}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useRootStyles = /*#__PURE__*/__styles({
+  filled: {
+    De3pzq: "f16xq7d1",
+    sj55zd: "fkfq4zb",
+    eoavqd: "f8491dx",
+    Jwef8y: "f1h648pw",
+    Bi91k9c: "fnwyq0v",
+    ecr2s2: "fwdzr64",
+    lj723h: "flvvhsy",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  },
+  outline: {
+    De3pzq: "fhovq9v",
+    sj55zd: "fkfq4zb",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    eoavqd: "f8491dx",
+    Jwef8y: "f1t94bn6",
+    Bi91k9c: "fnwyq0v",
+    Bk3fhr4: "ft1hn21",
+    I6i3kg: "fqbfmpb",
+    Bmfj8id: "fuxngvv",
+    ecr2s2: "f1wfn5kd",
+    lj723h: "flvvhsy",
+    Bnrwwps: "fvpl5sy",
+    weioyw: "f1xblose",
+    Bpre390: "f8upcvr",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  },
+  brand: {
+    De3pzq: "f16xkysk",
+    sj55zd: "f16muhyy",
+    eoavqd: "f8491dx",
+    Jwef8y: "f1yj72w4",
+    Bi91k9c: "f3ymbdj",
+    ecr2s2: "fy3sl2y",
+    lj723h: "fryz5bw",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  },
+  medium: {
+    z189sj: ["f18k1jr3", "f1rtp3s9"]
+  },
+  small: {
+    z189sj: ["fwiuce9", "f15vdbe4"]
+  },
+  "extra-small": {
+    z189sj: ["fwiuce9", "f15vdbe4"]
+  }
+}, {
+  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"],
+  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fqbfmpb:hover .fui-Icon-filled{color:var(--colorNeutralForeground2BrandHover);}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}"],
+  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fvpl5sy:active .fui-Icon-filled{display:inline;}", ".f1xblose:active .fui-Icon-filled{color:var(--colorNeutralForeground2BrandPressed);}", ".f8upcvr:active .fui-Icon-regular{display:none;}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}"],
+  m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useRootDisabledAppearances = /*#__PURE__*/__styles({
+  filled: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1bg9a2p",
+    sj55zd: "f1s2aq7o",
+    g2u3we: "fgig46g",
+    h3c5rm: ["f1mxt3zg", "fziff3p"],
+    B9xav0g: "f250w3l",
+    zhjwy3: ["fziff3p", "f1mxt3zg"]
+  },
+  outline: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "fhovq9v",
+    sj55zd: "f1s2aq7o",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"]
+  },
+  brand: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1bg9a2p",
+    sj55zd: "f1s2aq7o",
+    g2u3we: "fgig46g",
+    h3c5rm: ["f1mxt3zg", "fziff3p"],
+    B9xav0g: "f250w3l",
+    zhjwy3: ["fziff3p", "f1mxt3zg"]
+  }
+}, {
+  d: [".fdrzuqr{cursor:not-allowed;}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f250w3l{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"]
+});
+/**
+ * Styles for InteractionTagPrimary without leading media/icon
+ */
+const useRootWithoutMediaStyles = /*#__PURE__*/__styles({
+  medium: {
+    uwmqm3: ["f1rtp3s9", "f18k1jr3"]
+  },
+  small: {
+    uwmqm3: ["f15vdbe4", "fwiuce9"]
+  },
+  "extra-small": {
+    uwmqm3: ["f15vdbe4", "fwiuce9"]
+  }
+}, {
+  d: [".f1rtp3s9{padding-left:7px;}", ".f18k1jr3{padding-right:7px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}"]
+});
+/**
+ * Styles for InteractionTagPrimary when InteractionTag has a Secondary button
+ */
+const useRootWithSecondaryActionStyles = /*#__PURE__*/__styles({
+  base: {
+    B7oj6ja: ["f3fg2lr", "f13av6d4"],
+    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    B6xbmo0: ["f146y5a9", "f1k2ftg"],
+    kdpuga: ["f1ndz5i7", "f1co4qro"]
+  },
+  medium: {
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  small: {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  "extra-small": {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  }
+}, {
+  d: [".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"]
+});
+export const useInteractionTagPrimaryStyles_unstable = state => {
+  const rootRoundedBaseClassName = useRootRoundedBaseClassName();
+  const rootCircularBaseClassName = useRootCircularBaseClassName();
+  const rootStyles = useRootStyles();
+  const rootDisabledAppearances = useRootDisabledAppearances();
+  const rootWithoutMediaStyles = useRootWithoutMediaStyles();
+  const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();
+  const iconStyles = useIconStyles();
+  const mediaStyles = useMediaStyles();
+  const primaryTextStyles = usePrimaryTextStyles();
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
+  const rootCircularContrastStyles = useRootCircularContrastStyles();
+  const {
+    shape,
+    size,
+    appearance
+  } = state;
+  state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
+  }
+  if (state.icon) {
+    state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
+  }
+  if (state.primaryText) {
+    state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
+  }
+  if (state.secondaryText) {
+    state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useInteractionTagPrimaryStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bglfifq","G4pote","B33s42s","w20ur","Byczuf6","m","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","shape","size","className","hasSecondaryAction","disabled","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n    root: 'fui-InteractionTagPrimary',\n    media: 'fui-InteractionTagPrimary__media',\n    icon: 'fui-InteractionTagPrimary__icon',\n    primaryText: 'fui-InteractionTagPrimary__primaryText',\n    secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n    // reset default button style:\n    color: 'inherit',\n    fontFamily: 'inherit',\n    padding: '0px',\n    borderStyle: 'none',\n    appearance: 'button',\n    textAlign: 'unset',\n    backgroundColor: 'transparent',\n    display: 'inline-grid',\n    height: '100%',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n        zIndex: 1\n    })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            ...shorthands.borderTop(tokens.strokeWidthThin, 'solid'),\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusMedium,\n            borderTopRightRadius: tokens.borderRadiusMedium\n        }\n    }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusCircular,\n    /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */ '@media (forced-colors: active)': {\n        position: 'relative',\n        '::before': {\n            content: '\"\"',\n            ...shorthands.borderTop(tokens.strokeWidthThin, 'solid'),\n            ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid'),\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderTopLeftRadius: tokens.borderRadiusCircular,\n            borderBottomLeftRadius: tokens.borderRadiusCircular\n        }\n    }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n    withoutSecondaryAction: {\n        '@media (forced-colors: active)': {\n            position: 'relative',\n            '::before': {\n                ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),\n                borderTopRightRadius: tokens.borderRadiusCircular,\n                borderBottomRightRadius: tokens.borderRadiusCircular\n            }\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorNeutralBackground3Hover,\n            color: tokens.colorNeutralForeground2Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1),\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground2Hover,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandHover\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2Pressed,\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline',\n                color: tokens.colorNeutralForeground2BrandPressed\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground1,\n        ':hover': {\n            cursor: 'pointer',\n            backgroundColor: tokens.colorBrandBackground2Hover,\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2Pressed,\n            color: tokens.colorCompoundBrandForeground1Pressed\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                backgroundColor: 'HighlightText'\n            },\n            ':active': {\n                backgroundColor: 'HighlightText'\n            }\n        }\n    },\n    medium: {\n        paddingRight: '7px'\n    },\n    small: {\n        paddingRight: '5px'\n    },\n    'extra-small': {\n        paddingRight: '5px'\n    }\n});\nconst useRootDisabledAppearances = makeStyles({\n    filled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    },\n    outline: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    },\n    brand: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        color: tokens.colorNeutralForegroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n    }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: '7px'\n    },\n    small: {\n        paddingLeft: '5px'\n    },\n    'extra-small': {\n        paddingLeft: '5px'\n    }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n    base: {\n        borderTopRightRadius: tokens.borderRadiusNone,\n        borderBottomRightRadius: tokens.borderRadiusNone,\n        borderRightStyle: 'none',\n        ...createCustomFocusIndicatorStyle({\n            borderTopRightRadius: tokens.borderRadiusNone,\n            borderBottomRightRadius: tokens.borderRadiusNone\n        })\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledAppearances = useRootDisabledAppearances();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const rootCircularContrastStyles = useRootCircularContrastStyles();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/InteractionTagSecondary/InteractionTagSecondary.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';
+import { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';
+import { useInteractionTagSecondaryStyles_unstable } from './useInteractionTagSecondaryStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.
+ */ export const InteractionTagSecondary = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInteractionTagSecondary_unstable(props, ref);
+    useInteractionTagSecondaryStyles_unstable(state);
+    useCustomStyleHook_unstable('useInteractionTagSecondaryStyles_unstable')(state);
+    return renderInteractionTagSecondary_unstable(state);
+});
+InteractionTagSecondary.displayName = 'InteractionTagSecondary';

package/lib/components/InteractionTagSecondary/InteractionTagSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useInteractionTagSecondary_unstable } from './useInteractionTagSecondary';\nimport { renderInteractionTagSecondary_unstable } from './renderInteractionTagSecondary';\nimport { useInteractionTagSecondaryStyles_unstable } from './useInteractionTagSecondaryStyles.styles';\nimport type { InteractionTagSecondaryProps } from './InteractionTagSecondary.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.\n */\nexport const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useInteractionTagSecondary_unstable(props, ref);\n\n    useInteractionTagSecondaryStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useInteractionTagSecondaryStyles_unstable')(state);\n\n    return renderInteractionTagSecondary_unstable(state);\n  },\n);\n\nInteractionTagSecondary.displayName = 'InteractionTagSecondary';\n"],"names":["React","useInteractionTagSecondary_unstable","renderInteractionTagSecondary_unstable","useInteractionTagSecondaryStyles_unstable","useCustomStyleHook_unstable","InteractionTagSecondary","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,4CAA4C;AAEtG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wCAA6EL,MAAMM,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,QAAQR,oCAAoCM,OAAOC;IAEzDL,0CAA0CM;IAE1CL,4BAA4B,6CAA6CK;IAEzE,OAAOP,uCAAuCO;AAChD,GACA;AAEFJ,wBAAwBK,WAAW,GAAG"}

package/lib/components/InteractionTagSecondary/InteractionTagSecondary.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InteractionTagSecondary.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { InteractionTagContextValue } from '../../contexts/interactionTagContext';\n\nexport type InteractionTagSecondarySlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * InteractionTagSecondary Props\n */\nexport type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondarySlots>;\n\n/**\n * State used in rendering InteractionTagSecondary\n */\nexport type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> &\n  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;\n"],"names":[],"mappings":"AAAA,WAgB2F"}

package/lib/components/InteractionTagSecondary/index.js

@@ -0,0 +1,5 @@
+export * from './InteractionTagSecondary';
+export * from './InteractionTagSecondary.types';
+export * from './renderInteractionTagSecondary';
+export * from './useInteractionTagSecondary';
+export * from './useInteractionTagSecondaryStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InteractionTagSecondary';\nexport * from './InteractionTagSecondary.types';\nexport * from './renderInteractionTagSecondary';\nexport * from './useInteractionTagSecondary';\nexport * from './useInteractionTagSecondaryStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC;AAChD,cAAc,kCAAkC;AAChD,cAAc,+BAA+B;AAC7C,cAAc,4CAA4C"}

package/lib/components/InteractionTagSecondary/renderInteractionTagSecondary.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of InteractionTagSecondary
+ */ export const renderInteractionTagSecondary_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/InteractionTagSecondary/renderInteractionTagSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderInteractionTagSecondary.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InteractionTagSecondaryState, InteractionTagSecondarySlots } from './InteractionTagSecondary.types';\n\n/**\n * Render the final JSX of InteractionTagSecondary\n */\nexport const renderInteractionTagSecondary_unstable = (state: InteractionTagSecondaryState) => {\n  assertSlots<InteractionTagSecondarySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderInteractionTagSecondary_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrDF,YAA0CE;IAE1C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/InteractionTagSecondary/useInteractionTagSecondary.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { getNativeElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';
+import { Delete, Backspace } from '@fluentui/keyboard-keys';
+import { DismissRegular } from '@fluentui/react-icons';
+import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
+/**
+ * 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 const useInteractionTagSecondary_unstable = (props, ref)=>{
+    const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = useInteractionTagContext_unstable();
+    const id = useId('fui-InteractionTagSecondary-', props.id);
+    const onClick = useEventCallback((ev)=>{
+        var _props_onClick;
+        props === null || props === void 0 ? void 0 : (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, ev);
+        if (!ev.defaultPrevented) {
+            handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {
+                value
+            });
+        }
+    });
+    const onKeyDown = useEventCallback((ev)=>{
+        var _props_onKeyDown;
+        props === null || props === void 0 ? void 0 : (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, ev);
+        if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {
+            handleTagDismiss === null || handleTagDismiss === void 0 ? void 0 : handleTagDismiss(ev, {
+                value
+            });
+        }
+    });
+    return {
+        appearance,
+        disabled,
+        shape,
+        size,
+        components: {
+            root: 'button'
+        },
+        root: slot.always(getNativeElementProps('button', {
+            children: /*#__PURE__*/ React.createElement(DismissRegular, null),
+            type: 'button',
+            disabled,
+            ref,
+            'aria-labelledby': `${interactionTagPrimaryId} ${id}`,
+            ...props,
+            id,
+            onClick,
+            onKeyDown
+        }), {
+            elementType: 'button'
+        })
+    };
+};

package/lib/components/InteractionTagSecondary/useInteractionTagSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInteractionTagSecondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types';\nimport { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';\n\n/**\n * Create the state required to render InteractionTagSecondary.\n *\n * The returned state can be modified with hooks such as useInteractionTagSecondaryStyles_unstable,\n * before being passed to renderInteractionTagSecondary_unstable.\n *\n * @param props - props from this instance of InteractionTagSecondary\n * @param ref - reference to root HTMLButtonElement of InteractionTagSecondary\n */\nexport const useInteractionTagSecondary_unstable = (\n  props: InteractionTagSecondaryProps,\n  ref: React.Ref<HTMLButtonElement>,\n): InteractionTagSecondaryState => {\n  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } =\n    useInteractionTagContext_unstable();\n\n  const id = useId('fui-InteractionTagSecondary-', props.id);\n\n  const onClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props?.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    props?.onKeyDown?.(ev);\n    if (!ev.defaultPrevented && (ev.key === Delete || ev.key === Backspace)) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  return {\n    appearance,\n    disabled,\n    shape,\n    size,\n    components: {\n      root: 'button',\n    },\n\n    root: slot.always(\n      getNativeElementProps('button', {\n        children: <DismissRegular />,\n        type: 'button',\n        disabled,\n        ref,\n        'aria-labelledby': `${interactionTagPrimaryId} ${id}`,\n        ...props,\n        id,\n        onClick,\n        onKeyDown,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","slot","useId","Delete","Backspace","DismissRegular","useInteractionTagContext_unstable","useInteractionTagSecondary_unstable","props","ref","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","id","onClick","ev","defaultPrevented","onKeyDown","key","components","root","always","children","type","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AACjG,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAC3FV;IAEF,MAAMW,KAAKf,MAAM,gCAAgCM,MAAMS,EAAE;IAEzD,MAAMC,UAAUlB,iBAAiB,CAACmB;YAChCX;QAAAA,kBAAAA,6BAAAA,iBAAAA,MAAOU,OAAO,cAAdV,qCAAAA,oBAAAA,OAAiBW;QACjB,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBR,6BAAAA,uCAAAA,iBAAmBO,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,MAAMK,YAAYrB,iBAAiB,CAACmB;YAClCX;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOa,SAAS,cAAhBb,uCAAAA,sBAAAA,OAAmBW;QACnB,IAAI,CAACA,GAAGC,gBAAgB,IAAKD,CAAAA,GAAGG,GAAG,KAAKnB,UAAUgB,GAAGG,GAAG,KAAKlB,SAAQ,GAAI;YACvEQ,6BAAAA,uCAAAA,iBAAmBO,IAAI;gBAAEH;YAAM;QACjC;IACF;IAEA,OAAO;QACLN;QACAC;QACAG;QACAC;QACAQ,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMvB,KAAKwB,MAAM,CACf1B,sBAAsB,UAAU;YAC9B2B,wBAAU,oBAACrB;YACXsB,MAAM;YACNhB;YACAF;YACA,mBAAmB,CAAC,EAAEI,wBAAwB,CAAC,EAAEI,GAAG,CAAC;YACrD,GAAGT,KAAK;YACRS;YACAC;YACAG;QACF,IACA;YAAEO,aAAa;QAAS;IAE5B;AACF,EAAE"}