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

package/lib/components/Tag/useTagStyles.styles.js

@@ -0,0 +1,320 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tagClassNames = {
+  root: 'fui-Tag',
+  media: 'fui-Tag__media',
+  icon: 'fui-Tag__icon',
+  primaryText: 'fui-Tag__primaryText',
+  secondaryText: 'fui-Tag__secondaryText',
+  dismissIcon: 'fui-Tag__dismissIcon'
+};
+/**
+ * Inner horizontal space left and right of Tag
+ */
+const tagSpacingMedium = '7px';
+const tagSpacingSmall = '5px';
+const tagSpacingExtraSmall = '5px';
+const mediumIconSize = '20px';
+const smallIconSize = '16px';
+const extraSmallIconSize = '12px';
+const baseStyles = {
+  // reset default button style:
+  fontFamily: 'inherit',
+  padding: '0px',
+  appearance: 'button',
+  textAlign: 'unset',
+  display: 'inline-grid',
+  alignItems: 'center',
+  gridTemplateAreas: `
+  "media primary   dismissIcon"
+  "media secondary dismissIcon"
+  `,
+  boxSizing: 'border-box',
+  width: 'fit-content',
+  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
+};
+const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r1d3fbai", "r89ofxt", {
+  r: [".r1d3fbai{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1d3fbai[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".r89ofxt{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r89ofxt[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"],
+  s: ["@media (forced-colors: active){.r1d3fbai{position:relative;}.r1d3fbai::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){.r89ofxt{position:relative;}.r89ofxt::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("r76els4", "r1g7lw0i", {
+  r: [".r76els4{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r76els4[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusCircular);border-bottom-left-radius:var(--borderRadiusCircular);border-top-right-radius:var(--borderRadiusCircular);border-top-left-radius:var(--borderRadiusCircular);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".r1g7lw0i{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1g7lw0i[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusCircular);border-bottom-right-radius:var(--borderRadiusCircular);border-top-left-radius:var(--borderRadiusCircular);border-top-right-radius:var(--borderRadiusCircular);outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"],
+  s: ["@media (forced-colors: active){.r76els4{position:relative;}.r76els4::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-left-width:var(--strokeWidthThin);border-left-style:solid;border-right-width:var(--strokeWidthThin);border-right-style:solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r1g7lw0i{position:relative;}.r1g7lw0i::before{content:\"\";border-top-width:var(--strokeWidthThin);border-top-style:solid;border-right-width:var(--strokeWidthThin);border-right-style:solid;border-left-width:var(--strokeWidthThin);border-left-style:solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}"]
+});
+const useRootStyles = /*#__PURE__*/__styles({
+  filled: {
+    De3pzq: "f16xq7d1",
+    sj55zd: "fkfq4zb"
+  },
+  outline: {
+    De3pzq: "fhovq9v",
+    sj55zd: "fkfq4zb",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"]
+  },
+  brand: {
+    De3pzq: "f16xkysk",
+    sj55zd: "faj9fo0"
+  },
+  medium: {
+    Bqenvij: "f1d2rq10"
+  },
+  small: {
+    Bqenvij: "frvgh55"
+  },
+  "extra-small": {
+    Bqenvij: "fjamq6b"
+  }
+}, {
+  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);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".fjamq6b{height:20px;}"]
+});
+const useRootDisabledStyles = /*#__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 root slot when Tag is 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 root slot when Tag is without dismiss icon
+ */
+const useRootWithoutDismissStyles = /*#__PURE__*/__styles({
+  medium: {
+    z189sj: ["f18k1jr3", "f1rtp3s9"]
+  },
+  small: {
+    z189sj: ["fwiuce9", "f15vdbe4"]
+  },
+  "extra-small": {
+    z189sj: ["fwiuce9", "f15vdbe4"]
+  }
+}, {
+  d: [".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}"]
+});
+export const useIconStyles = /*#__PURE__*/__styles({
+  base: {
+    Ijaq50: "f11uok23",
+    Br312pm: "f1qdfnnj",
+    nk6f5a: "f1s27gz",
+    Bw0ie65: "f86d0yl",
+    mc9l5x: "f22iagw"
+  },
+  medium: {
+    uwmqm3: ["f1rtp3s9", "f18k1jr3"],
+    z189sj: ["f7x41pl", "fruq291"],
+    a9b677: "f64fuq3",
+    Be2twd7: "fe5j1ua"
+  },
+  small: {
+    uwmqm3: ["f15vdbe4", "fwiuce9"],
+    z189sj: ["ffczdla", "fgiv446"],
+    a9b677: "fjw5fx7",
+    Be2twd7: "f4ybsrx"
+  },
+  "extra-small": {
+    uwmqm3: ["f15vdbe4", "fwiuce9"],
+    z189sj: ["ffczdla", "fgiv446"],
+    a9b677: "frx94fk",
+    Be2twd7: "f1ugzwwg"
+  }
+}, {
+  d: [".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f1rtp3s9{padding-left:7px;}", ".f18k1jr3{padding-right:7px;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f64fuq3{width:20px;}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".f4ybsrx{font-size:16px;}", ".frx94fk{width:12px;}", ".f1ugzwwg{font-size:12px;}"]
+});
+export const useMediaStyles = /*#__PURE__*/__styles({
+  base: {
+    Ijaq50: "f11uok23",
+    Br312pm: "f1qdfnnj",
+    nk6f5a: "f1s27gz",
+    Bw0ie65: "f86d0yl",
+    mc9l5x: "f22iagw",
+    uwmqm3: ["f10xn8zz", "f136y8j8"]
+  },
+  medium: {
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  small: {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  "extra-small": {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  }
+}, {
+  d: [".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f10xn8zz{padding-left:1px;}", ".f136y8j8{padding-right:1px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"]
+});
+const useDismissIconStyles = /*#__PURE__*/__styles({
+  base: {
+    Ijaq50: "fneo8i2",
+    Br312pm: "frbqjvc",
+    nk6f5a: "f1a6k60w",
+    Bw0ie65: "f1ay3jj",
+    mc9l5x: "f22iagw",
+    ze5xyy: "f4xjyn1",
+    oy3o9n: "f1xtr1b3"
+  },
+  medium: {
+    uwmqm3: ["fruq291", "f7x41pl"],
+    z189sj: ["f18k1jr3", "f1rtp3s9"],
+    Be2twd7: "fe5j1ua"
+  },
+  small: {
+    uwmqm3: ["fgiv446", "ffczdla"],
+    z189sj: ["fwiuce9", "f15vdbe4"],
+    Be2twd7: "f4ybsrx"
+  },
+  "extra-small": {
+    uwmqm3: ["fgiv446", "ffczdla"],
+    z189sj: ["fwiuce9", "f15vdbe4"],
+    Be2twd7: "f1ugzwwg"
+  },
+  filled: {
+    eoavqd: "f8491dx",
+    Bi91k9c: "f3ymbdj",
+    lj723h: "fryz5bw"
+  },
+  outline: {
+    eoavqd: "f8491dx",
+    Bi91k9c: "f3ymbdj",
+    lj723h: "fryz5bw"
+  },
+  brand: {
+    eoavqd: "f8491dx",
+    Bi91k9c: "f3ymbdj",
+    lj723h: "fryz5bw"
+  }
+}, {
+  d: [".fneo8i2{grid-row-start:dismissIcon;}", ".frbqjvc{grid-column-start:dismissIcon;}", ".f1a6k60w{grid-row-end:dismissIcon;}", ".f1ay3jj{grid-column-end:dismissIcon;}", ".f22iagw{display:flex;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fe5j1ua{font-size:20px;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f4ybsrx{font-size:16px;}", ".f1ugzwwg{font-size:12px;}"],
+  m: [["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1xtr1b3:active{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  h: [".f8491dx:hover{cursor:pointer;}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}"],
+  a: [".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}"]
+});
+export const usePrimaryTextStyles = /*#__PURE__*/__styles({
+  base: {
+    Huce71: "fz5stix",
+    uwmqm3: ["fgiv446", "ffczdla"],
+    z189sj: ["ffczdla", "fgiv446"]
+  },
+  medium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  small: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  "extra-small": {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  withoutSecondaryText: {
+    Br312pm: "faqcfhe",
+    Ijaq50: "f1q3ipgb",
+    nk6f5a: "fc0ab3q",
+    Byoj8tv: "f1g03r3y"
+  },
+  withSecondaryText: {
+    Ijaq50: "f1q3ipgb",
+    Br312pm: "faqcfhe",
+    nk6f5a: "fs32cm1",
+    Bw0ie65: "f1bo7viq",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    B6of3ja: "f1ryq6si"
+  }
+}, {
+  d: [".fz5stix{white-space:nowrap;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".faqcfhe{grid-column-start:primary;}", ".f1q3ipgb{grid-row-start:primary;}", ".fc0ab3q{grid-row-end:secondary;}", ".f1g03r3y{padding-bottom:var(--spacingHorizontalXXS);}", ".fs32cm1{grid-row-end:primary;}", ".f1bo7viq{grid-column-end:primary;}", ".f1ryq6si{margin-top:-2px;}"]
+});
+export const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r7hv1ps", "rnrslm9", [".r7hv1ps{grid-area:secondary;padding-left:var(--spacingHorizontalXXS);padding-right:var(--spacingHorizontalXXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);white-space:nowrap;}", ".rnrslm9{grid-area:secondary;padding-right:var(--spacingHorizontalXXS);padding-left:var(--spacingHorizontalXXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);white-space:nowrap;}"]);
+/**
+ * Apply styling to the Tag slots based on the state
+ */
+export const useTagStyles_unstable = state => {
+  const rootRoundedBaseClassName = useRootRoundedBaseClassName();
+  const rootCircularBaseClassName = useRootCircularBaseClassName();
+  const rootStyles = useRootStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const rootWithoutMediaStyles = useRootWithoutMediaStyles();
+  const rootWithoutDismissStyles = useRootWithoutDismissStyles();
+  const iconStyles = useIconStyles();
+  const mediaStyles = useMediaStyles();
+  const dismissIconStyles = useDismissIconStyles();
+  const primaryTextStyles = usePrimaryTextStyles();
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
+  const {
+    shape,
+    size,
+    appearance
+  } = state;
+  state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
+  }
+  if (state.icon) {
+    state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
+  }
+  if (state.primaryText) {
+    state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
+  }
+  if (state.secondaryText) {
+    state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
+  }
+  if (state.dismissIcon) {
+    state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !state.disabled && dismissIconStyles[appearance], state.dismissIcon.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useTagStyles.styles.js.map

package/lib/components/Tag/useTagStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","medium","Bqenvij","small","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Ijaq50","Br312pm","nk6f5a","Bw0ie65","mc9l5x","a9b677","Be2twd7","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","shape","size","className","disabled"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n    root: 'fui-Tag',\n    media: 'fui-Tag__media',\n    icon: 'fui-Tag__icon',\n    primaryText: 'fui-Tag__primaryText',\n    secondaryText: 'fui-Tag__secondaryText',\n    dismissIcon: 'fui-Tag__dismissIcon'\n};\n/**\n * Inner horizontal space left and right of Tag\n */ const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n    // reset default button style:\n    fontFamily: 'inherit',\n    padding: '0px',\n    appearance: 'button',\n    textAlign: 'unset',\n    display: 'inline-grid',\n    alignItems: 'center',\n    gridTemplateAreas: `\n  \"media primary   dismissIcon\"\n  \"media secondary dismissIcon\"\n  `,\n    boxSizing: 'border-box',\n    width: 'fit-content',\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n    ...baseStyles,\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n    }),\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    ...createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusCircular),\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n    }),\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            ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),\n            position: 'absolute',\n            top: '-1px',\n            left: '-1px',\n            right: '-1px',\n            bottom: '-1px',\n            borderRadius: tokens.borderRadiusCircular\n        }\n    }\n});\nconst useRootStyles = makeStyles({\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground2\n    },\n    outline: {\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1)\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2\n    },\n    medium: {\n        height: '32px'\n    },\n    small: {\n        height: '24px'\n    },\n    'extra-small': {\n        height: '20px'\n    }\n});\nconst useRootDisabledStyles = 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 root slot when Tag is without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n    medium: {\n        paddingLeft: tagSpacingMedium\n    },\n    small: {\n        paddingLeft: tagSpacingSmall\n    },\n    'extra-small': {\n        paddingLeft: tagSpacingExtraSmall\n    }\n});\n/**\n * Styles for root slot when Tag is without dismiss icon\n */ const useRootWithoutDismissStyles = makeStyles({\n    medium: {\n        paddingRight: tagSpacingMedium\n    },\n    small: {\n        paddingRight: tagSpacingSmall\n    },\n    'extra-small': {\n        paddingRight: tagSpacingExtraSmall\n    }\n});\nexport const useIconStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        display: 'flex'\n    },\n    medium: {\n        paddingLeft: tagSpacingMedium,\n        paddingRight: tokens.spacingHorizontalXS,\n        width: mediumIconSize,\n        fontSize: mediumIconSize\n    },\n    small: {\n        paddingLeft: tagSpacingSmall,\n        paddingRight: tokens.spacingHorizontalXXS,\n        width: smallIconSize,\n        fontSize: smallIconSize\n    },\n    'extra-small': {\n        paddingLeft: tagSpacingExtraSmall,\n        paddingRight: tokens.spacingHorizontalXXS,\n        width: extraSmallIconSize,\n        fontSize: extraSmallIconSize\n    }\n});\nexport const useMediaStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        display: 'flex',\n        paddingLeft: '1px'\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        paddingRight: tokens.spacingHorizontalSNudge\n    }\n});\nconst useDismissIconStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('dismissIcon'),\n        display: 'flex',\n        // windows high contrast:\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight'\n            },\n            ':active': {\n                color: 'Highlight'\n            }\n        }\n    },\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS,\n        paddingRight: tagSpacingMedium,\n        fontSize: mediumIconSize\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tagSpacingSmall,\n        fontSize: smallIconSize\n    },\n    'extra-small': {\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tagSpacingExtraSmall,\n        fontSize: extraSmallIconSize\n    },\n    filled: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    outline: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    brand: {\n        ':hover': {\n            cursor: 'pointer',\n            color: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            color: tokens.colorCompoundBrandForeground1Pressed\n        }\n    }\n});\nexport const usePrimaryTextStyles = makeStyles({\n    base: {\n        whiteSpace: 'nowrap',\n        paddingLeft: tokens.spacingHorizontalXXS,\n        paddingRight: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        ...typographyStyles.caption1\n    },\n    'extra-small': {\n        ...typographyStyles.caption1\n    },\n    withoutSecondaryText: {\n        gridColumnStart: 'primary',\n        gridRowStart: 'primary',\n        gridRowEnd: 'secondary',\n        paddingBottom: tokens.spacingHorizontalXXS\n    },\n    withSecondaryText: {\n        ...shorthands.gridArea('primary'),\n        ...typographyStyles.caption1,\n        marginTop: '-2px'\n    }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n    gridArea: 'secondary',\n    paddingLeft: tokens.spacingHorizontalXXS,\n    paddingRight: tokens.spacingHorizontalXXS,\n    ...typographyStyles.caption2,\n    whiteSpace: 'nowrap'\n});\n/**\n * Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n    const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n    const rootCircularBaseClassName = useRootCircularBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n    const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n    const iconStyles = useIconStyles();\n    const mediaStyles = useMediaStyles();\n    const dismissIconStyles = useDismissIconStyles();\n    const primaryTextStyles = usePrimaryTextStyles();\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n    }\n    if (state.primaryText) {\n        state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n    }\n    if (state.secondaryText) {\n        state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n    }\n    if (state.dismissIcon) {\n        state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !state.disabled && dismissIconStyles[appearance], state.dismissIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TagGroup/TagGroup.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useTagGroup_unstable } from './useTagGroup';
+import { renderTagGroup_unstable } from './renderTagGroup';
+import { useTagGroupStyles_unstable } from './useTagGroupStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useTagGroupContextValues_unstable } from './useTagGroupContextValues';
+/**
+ * TagGroup component - a container for multiple tags.
+ * Provides context to size or dismiss children tags.
+ */ export const TagGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTagGroup_unstable(props, ref);
+    useTagGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useTagGroupStyles_unstable')(state);
+    return renderTagGroup_unstable(state, useTagGroupContextValues_unstable(state));
+});
+TagGroup.displayName = 'TagGroup';

package/lib/components/TagGroup/TagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TagGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTagGroup_unstable } from './useTagGroup';\nimport { renderTagGroup_unstable } from './renderTagGroup';\nimport { useTagGroupStyles_unstable } from './useTagGroupStyles.styles';\nimport type { TagGroupProps } from './TagGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useTagGroupContextValues_unstable } from './useTagGroupContextValues';\n\n/**\n * TagGroup component - a container for multiple tags.\n * Provides context to size or dismiss children tags.\n */\nexport const TagGroup: ForwardRefComponent<TagGroupProps> = React.forwardRef((props, ref) => {\n  const state = useTagGroup_unstable(props, ref);\n\n  useTagGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTagGroupStyles_unstable')(state);\n\n  return renderTagGroup_unstable(state, useTagGroupContextValues_unstable(state));\n});\n\nTagGroup.displayName = 'TagGroup';\n"],"names":["React","useTagGroup_unstable","renderTagGroup_unstable","useTagGroupStyles_unstable","useCustomStyleHook_unstable","useTagGroupContextValues_unstable","TagGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;CAGC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAE1CN,2BAA2BO;IAE3BN,4BAA4B,8BAA8BM;IAE1D,OAAOR,wBAAwBQ,OAAOL,kCAAkCK;AAC1E,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

package/lib/components/TagGroup/TagGroup.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagSize, TagValue, TagDismissHandler } from '../../utils/types';\nimport { TagGroupContextValue } from '../../contexts/tagGroupContext';\n\nexport type TagGroupContextValues = {\n  tagGroup: TagGroupContextValue;\n};\n\nexport type TagGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TagGroup Props\n */\nexport type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {\n  /**\n   * Callback for when a tag is dismissed\n   */\n  onDismiss?: TagDismissHandler<Value>;\n\n  size?: TagSize;\n};\n\n/**\n * State used in rendering TagGroup\n */\nexport type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &\n  Required<Pick<TagGroupProps, 'size'>> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n  };\n"],"names":[],"mappings":"AAAA,WA8BI"}

package/lib/components/TagGroup/index.js

@@ -0,0 +1,6 @@
+export * from './TagGroup';
+export * from './TagGroup.types';
+export * from './renderTagGroup';
+export * from './useTagGroup';
+export * from './useTagGroupStyles.styles';
+export * from './useTagGroupContextValues';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TagGroup';\nexport * from './TagGroup.types';\nexport * from './renderTagGroup';\nexport * from './useTagGroup';\nexport * from './useTagGroupStyles.styles';\nexport * from './useTagGroupContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B"}

package/lib/components/TagGroup/renderTagGroup.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { TagGroupContextProvider } from '../../contexts/tagGroupContext';
+/**
+ * Render the final JSX of TagGroup
+ */ export const renderTagGroup_unstable = (state, contextValue)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(TagGroupContextProvider, {
+        value: contextValue.tagGroup,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

package/lib/components/TagGroup/renderTagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagGroupState, TagGroupSlots, TagGroupContextValues } from './TagGroup.types';\nimport { TagGroupContextProvider } from '../../contexts/tagGroupContext';\n\n/**\n * Render the final JSX of TagGroup\n */\nexport const renderTagGroup_unstable = (state: TagGroupState, contextValue: TagGroupContextValues) => {\n  assertSlots<TagGroupSlots>(state);\n\n  return (\n    <TagGroupContextProvider value={contextValue.tagGroup}>\n      <state.root />\n    </TagGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","TagGroupContextProvider","renderTagGroup_unstable","state","contextValue","value","tagGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,aAAaE,QAAQ;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/TagGroup/useTagGroup.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';
+/**
+ * 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 const useTagGroup_unstable = (props, ref)=>{
+    const { onDismiss, size = 'medium' } = props;
+    const innerRef = React.useRef();
+    const { targetDocument } = useFluent();
+    const { findNextFocusable, findPrevFocusable } = useFocusFinders();
+    const handleTagDismiss = useEventCallback((e, data)=>{
+        var _innerRef_current;
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e, data);
+        // set focus after tag dismiss
+        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+        if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {
+            // focus on next tag only if the active element is within the current tag group
+            const next = findNextFocusable(activeElement, {
+                container: innerRef.current
+            });
+            if (next) {
+                next.focus();
+                return;
+            }
+            // if there is no next focusable, focus on the previous focusable
+            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.className.includes(interactionTagSecondaryClassNames.root)) {
+                const prev = findPrevFocusable(activeElement.parentElement, {
+                    container: innerRef.current
+                });
+                prev === null || prev === void 0 ? void 0 : prev.focus();
+            } else {
+                const prev = findPrevFocusable(activeElement, {
+                    container: innerRef.current
+                });
+                prev === null || prev === void 0 ? void 0 : prev.focus();
+            }
+        }
+    });
+    const arrowNavigationProps = useArrowNavigationGroup({
+        circular: true,
+        axis: 'both',
+        memorizeCurrent: true
+    });
+    return {
+        handleTagDismiss,
+        size,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getNativeElementProps('div', {
+            ref: useMergedRefs(ref, innerRef),
+            role: 'toolbar',
+            ...arrowNavigationProps,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/TagGroup/useTagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { TagGroupProps, TagGroupState } from './TagGroup.types';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/useInteractionTagSecondaryStyles.styles';\n\n/**\n * Create the state required to render TagGroup.\n *\n * The returned state can be modified with hooks such as useTagGroupStyles_unstable,\n * before being passed to renderTagGroup_unstable.\n *\n * @param props - props from this instance of TagGroup\n * @param ref - reference to root HTMLDivElement of TagGroup\n */\nexport const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {\n  const { onDismiss, size = 'medium' } = props;\n\n  const innerRef = React.useRef<HTMLElement>();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleTagDismiss: TagGroupState['handleTagDismiss'] = useEventCallback((e, data) => {\n    onDismiss?.(e, data);\n\n    // set focus after tag dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next tag only if the active element is within the current tag group\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        next.focus();\n        return;\n      }\n\n      // if there is no next focusable, focus on the previous focusable\n      if (activeElement?.className.includes(interactionTagSecondaryClassNames.root)) {\n        const prev = findPrevFocusable(activeElement.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      } else {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    handleTagDismiss,\n    size,\n\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useMergedRefs","slot","useArrowNavigationGroup","useFocusFinders","useFluent_unstable","useFluent","interactionTagSecondaryClassNames","useTagGroup_unstable","props","ref","onDismiss","size","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleTagDismiss","e","data","activeElement","current","contains","next","container","focus","className","includes","root","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEzG,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AACnF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,iCAAiC,QAAQ,qEAAqE;AAEvH;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGH;IAEvC,MAAMI,WAAWf,MAAMgB,MAAM;IAC7B,MAAM,EAAEC,cAAc,EAAE,GAAGT;IAC3B,MAAM,EAAEU,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGb;IAEjD,MAAMc,mBAAsDlB,iBAAiB,CAACmB,GAAGC;YAK3EP;QAJJF,sBAAAA,gCAAAA,UAAYQ,GAAGC;QAEf,8BAA8B;QAC9B,MAAMC,gBAAgBN,2BAAAA,qCAAAA,eAAgBM,aAAa;QACnD,KAAIR,oBAAAA,SAASS,OAAO,cAAhBT,wCAAAA,kBAAkBU,QAAQ,CAACF,gBAA+B;YAC5D,+EAA+E;YAC/E,MAAMG,OAAOR,kBAAkBK,eAA8B;gBAAEI,WAAWZ,SAASS,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF;YAEA,iEAAiE;YACjE,IAAIL,0BAAAA,oCAAAA,cAAeM,SAAS,CAACC,QAAQ,CAACrB,kCAAkCsB,IAAI,GAAG;gBAC7E,MAAMC,OAAOb,kBAAkBI,cAAcU,aAAa,EAAiB;oBAAEN,WAAWZ,SAASS,OAAO;gBAAC;gBACzGQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb,OAAO;gBACL,MAAMI,OAAOb,kBAAkBI,eAA8B;oBAAEI,WAAWZ,SAASS,OAAO;gBAAC;gBAC3FQ,iBAAAA,2BAAAA,KAAMJ,KAAK;YACb;QACF;IACF;IAEA,MAAMM,uBAAuB7B,wBAAwB;QACnD8B,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLjB;QACAN;QAEAwB,YAAY;YACVP,MAAM;QACR;QAEAA,MAAM3B,KAAKmC,MAAM,CACftC,sBAAsB,OAAO;YAC3BW,KAAKT,cAAcS,KAAKG;YACxByB,MAAM;YACN,GAAGN,oBAAoB;YACvB,GAAGvB,KAAK;QACV,IACA;YAAE8B,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TagGroup/useTagGroupContextValues.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export function useTagGroupContextValues_unstable(state) {
+    const { handleTagDismiss, size } = state;
+    return {
+        tagGroup: React.useMemo(()=>({
+                handleTagDismiss,
+                size
+            }), [
+            handleTagDismiss,
+            size
+        ])
+    };
+}

package/lib/components/TagGroup/useTagGroupContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagGroupContextValues, TagGroupState } from './TagGroup.types';\n\nexport function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {\n  const { handleTagDismiss, size } = state;\n  return {\n    tagGroup: React.useMemo(() => ({ handleTagDismiss, size }), [handleTagDismiss, size]),\n  };\n}\n"],"names":["React","useTagGroupContextValues_unstable","state","handleTagDismiss","size","tagGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGF;IACnC,OAAO;QACLG,UAAUL,MAAMM,OAAO,CAAC,IAAO,CAAA;gBAAEH;gBAAkBC;YAAK,CAAA,GAAI;YAACD;YAAkBC;SAAK;IACtF;AACF"}

package/lib/components/TagGroup/useTagGroupStyles.styles.js

@@ -0,0 +1,36 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tagGroupClassNames = {
+  root: 'fui-TagGroup'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6"
+  },
+  medium: {
+    i8kkvl: "fsnqrgy"
+  },
+  small: {
+    i8kkvl: "f1rjii52"
+  },
+  "extra-small": {
+    i8kkvl: "f1ufnopg"
+  }
+}, {
+  d: [".ftuwxu6{display:inline-flex;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}"]
+});
+/**
+ * Apply styling to the TagGroup slots based on the state
+ */
+export const useTagGroupStyles_unstable = state => {
+  const styles = useRootStyles();
+  const {
+    size
+  } = state;
+  state.root.className = mergeClasses(tagGroupClassNames.root, styles.base, styles[size], state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTagGroupStyles.styles.js.map

package/lib/components/TagGroup/useTagGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","tagGroupClassNames","root","useRootStyles","base","mc9l5x","medium","i8kkvl","small","d","useTagGroupStyles_unstable","state","styles","size","className"],"sources":["useTagGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagGroupClassNames = {\n    root: 'fui-TagGroup'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'inline-flex'\n    },\n    medium: {\n        columnGap: tokens.spacingHorizontalS\n    },\n    small: {\n        columnGap: tokens.spacingHorizontalSNudge\n    },\n    'extra-small': {\n        columnGap: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the TagGroup slots based on the state\n */ export const useTagGroupStyles_unstable = (state)=>{\n    const styles = useRootStyles();\n    const { size } = state;\n    state.root.className = mergeClasses(tagGroupClassNames.root, styles.base, styles[size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAazB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGT,aAAa,CAAC,CAAC;EAC9B,MAAM;IAAEU;EAAK,CAAC,GAAGF,KAAK;EACtBA,KAAK,CAACT,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEU,MAAM,CAACR,IAAI,EAAEQ,MAAM,CAACC,IAAI,CAAC,EAAEF,KAAK,CAACT,IAAI,CAACY,SAAS,CAAC;EAC7G,OAAOH,KAAK;AAChB,CAAC"}

package/lib/contexts/interactionTagContext.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export const InteractionTagContext = /*#__PURE__*/ React.createContext(undefined);
+const interactionTagContextDefaultValue = {
+    appearance: 'filled',
+    disabled: false,
+    handleTagDismiss: ()=>({}),
+    interactionTagPrimaryId: '',
+    shape: 'rounded',
+    size: 'medium',
+    value: ''
+};
+export const InteractionTagContextProvider = InteractionTagContext.Provider;
+export const useInteractionTagContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(InteractionTagContext)) !== null && _React_useContext !== void 0 ? _React_useContext : interactionTagContextDefaultValue;
+};

package/lib/contexts/interactionTagContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["interactionTagContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InteractionTagState } from '../components/InteractionTag/index';\nimport { TagDismissHandler } from '../utils/types';\n\nexport const InteractionTagContext = React.createContext<InteractionTagContextValue | undefined>(undefined);\n\nconst interactionTagContextDefaultValue: InteractionTagContextValue = {\n  appearance: 'filled',\n  disabled: false,\n  handleTagDismiss: () => ({}),\n  interactionTagPrimaryId: '',\n  shape: 'rounded',\n  size: 'medium',\n  value: '',\n};\n\n/**\n * Context shared between InteractionTag and its children components\n */\nexport type InteractionTagContextValue<Value = string> = Required<\n  Pick<InteractionTagState, 'appearance' | 'disabled' | 'shape' | 'size'> & {\n    handleTagDismiss: TagDismissHandler<Value>;\n    interactionTagPrimaryId: string;\n    value?: Value;\n  }\n>;\n\nexport const InteractionTagContextProvider = InteractionTagContext.Provider;\n\nexport const useInteractionTagContext_unstable = () =>\n  React.useContext(InteractionTagContext) ?? interactionTagContextDefaultValue;\n"],"names":["React","InteractionTagContext","createContext","undefined","interactionTagContextDefaultValue","appearance","disabled","handleTagDismiss","interactionTagPrimaryId","shape","size","value","InteractionTagContextProvider","Provider","useInteractionTagContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,sCAAwBD,MAAME,aAAa,CAAyCC,WAAW;AAE5G,MAAMC,oCAAgE;IACpEC,YAAY;IACZC,UAAU;IACVC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,yBAAyB;IACzBC,OAAO;IACPC,MAAM;IACNC,OAAO;AACT;AAaA,OAAO,MAAMC,gCAAgCX,sBAAsBY,QAAQ,CAAC;AAE5E,OAAO,MAAMC,oCAAoC;QAC/Cd;WAAAA,CAAAA,oBAAAA,MAAMe,UAAU,CAACd,oCAAjBD,+BAAAA,oBAA2CI;AAAgC,EAAE"}

package/lib/contexts/tagGroupContext.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export const TagGroupContext = /*#__PURE__*/ React.createContext(undefined);
+const tagGroupContextDefaultValue = {
+    handleTagDismiss: ()=>({}),
+    size: 'medium'
+};
+export const TagGroupContextProvider = TagGroupContext.Provider;
+export const useTagGroupContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(TagGroupContext)) !== null && _React_useContext !== void 0 ? _React_useContext : tagGroupContextDefaultValue;
+};

package/lib/contexts/tagGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tagGroupContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TagGroupState } from '../components/TagGroup/index';\n\nexport const TagGroupContext = React.createContext<TagGroupContextValue | undefined>(undefined);\n\nconst tagGroupContextDefaultValue: TagGroupContextValue = {\n  handleTagDismiss: () => ({}),\n  size: 'medium',\n};\n\n/**\n * Context shared between TagGroup and its children components\n */\nexport type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>>;\n\nexport const TagGroupContextProvider = TagGroupContext.Provider;\n\nexport const useTagGroupContext_unstable = () => React.useContext(TagGroupContext) ?? tagGroupContextDefaultValue;\n"],"names":["React","TagGroupContext","createContext","undefined","tagGroupContextDefaultValue","handleTagDismiss","size","TagGroupContextProvider","Provider","useTagGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,gCAAkBD,MAAME,aAAa,CAAmCC,WAAW;AAEhG,MAAMC,8BAAoD;IACxDC,kBAAkB,IAAO,CAAA,CAAC,CAAA;IAC1BC,MAAM;AACR;AAOA,OAAO,MAAMC,0BAA0BN,gBAAgBO,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,8BAAjBD,+BAAAA,oBAAqCI;AAA0B,EAAE"}

package/lib/index.js

@@ -0,0 +1,6 @@
+export { Tag, renderTag_unstable, tagClassNames, useTagStyles_unstable, useTag_unstable } from './Tag';
+export { InteractionTag, renderInteractionTag_unstable, interactionTagClassNames, useInteractionTagStyles_unstable, useInteractionTag_unstable, useInteractionTagContextValues_unstable } from './InteractionTag';
+export { InteractionTagPrimary, interactionTagPrimaryClassNames, renderInteractionTagPrimary_unstable, useInteractionTagPrimaryStyles_unstable, useInteractionTagPrimary_unstable } from './InteractionTagPrimary';
+export { InteractionTagSecondary, renderInteractionTagSecondary_unstable, interactionTagSecondaryClassNames, useInteractionTagSecondaryStyles_unstable, useInteractionTagSecondary_unstable } from './InteractionTagSecondary';
+export { TagGroup, renderTagGroup_unstable, tagGroupClassNames, useTagGroupStyles_unstable, useTagGroup_unstable, useTagGroupContextValues_unstable } from './TagGroup';
+export { useTagAvatarContextValues_unstable } from './utils';