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

package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js

@@ -0,0 +1,126 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const interactionTagSecondaryClassNames = {
+  root: 'fui-InteractionTagSecondary'
+};
+const mediumIconSize = '20px';
+const smallIconSize = '16px';
+const extraSmallIconSize = '12px';
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r7ezzwf", "rv64w1", [".r7ezzwf{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:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);}", ".r7ezzwf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".rv64w1{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:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);}", ".rv64w1[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"]);
+const useRootStyles = /*#__PURE__*/__styles({
+  filled: {
+    De3pzq: "f16xq7d1",
+    sj55zd: "fkfq4zb",
+    eoavqd: "f8491dx",
+    Jwef8y: "f1h648pw",
+    Bi91k9c: "f139oj5f",
+    ecr2s2: "fwdzr64",
+    lj723h: "f19au66r",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  },
+  outline: {
+    De3pzq: "fhovq9v",
+    sj55zd: "fkfq4zb",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    eoavqd: "f8491dx",
+    Jwef8y: "f1t94bn6",
+    Bi91k9c: "f139oj5f",
+    ecr2s2: "f1wfn5kd",
+    lj723h: "f19au66r",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  },
+  brand: {
+    De3pzq: "f16xkysk",
+    sj55zd: "f16muhyy",
+    zhjwy3: ["f1sl6hi9", "f1c8dzaj"],
+    eoavqd: "f8491dx",
+    Jwef8y: "f1yj72w4",
+    Bi91k9c: "f3ymbdj",
+    ecr2s2: "fy3sl2y",
+    lj723h: "fryz5bw",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  },
+  rounded: {
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"]
+  },
+  circular: {
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"]
+  },
+  medium: {
+    Be2twd7: "fe5j1ua",
+    uwmqm3: ["f15vdbe4", "fwiuce9"],
+    z189sj: ["fwiuce9", "f15vdbe4"]
+  },
+  small: {
+    Be2twd7: "f4ybsrx",
+    uwmqm3: ["f2lugmd", "f6zblan"],
+    z189sj: ["f6zblan", "f2lugmd"]
+  },
+  "extra-small": {
+    Be2twd7: "f1ugzwwg",
+    uwmqm3: ["f15vdbe4", "fwiuce9"],
+    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);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".f4ybsrx{font-size:16px;}", ".f2lugmd{padding-left:3px;}", ".f6zblan{padding-right:3px;}", ".f1ugzwwg{font-size:12px;}"],
+  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}"],
+  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".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 useRootDisabledStyles = /*#__PURE__*/__styles({
+  filled: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1bg9a2p",
+    sj55zd: "f1s2aq7o",
+    g2u3we: "fgig46g",
+    h3c5rm: ["f1mxt3zg", "fziff3p"],
+    B9xav0g: "f250w3l",
+    zhjwy3: ["fy0fskl", "f15xbau"]
+  },
+  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: ["fy0fskl", "f15xbau"]
+  }
+}, {
+  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);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"]
+});
+export const useInteractionTagSecondaryStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const {
+    shape,
+    size,
+    appearance
+  } = state;
+  state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], state.root.className);
+  return state;
+};
+//# sourceMappingURL=useInteractionTagSecondaryStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","shape","size","appearance","className","disabled"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n    root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\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: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    ...createCustomFocusIndicatorStyle(shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)),\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    // divider:\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderTopLeftRadius: tokens.borderRadiusNone,\n    borderBottomLeftRadius: tokens.borderRadiusNone\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.colorNeutralForeground2BrandHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground3Pressed,\n            color: tokens.colorNeutralForeground2BrandPressed\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.colorNeutralForeground2BrandHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground2BrandPressed\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        borderLeftColor: tokens.colorBrandStroke2,\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    rounded: {\n        borderTopRightRadius: tokens.borderRadiusMedium,\n        borderBottomRightRadius: tokens.borderRadiusMedium\n    },\n    circular: {\n        borderTopRightRadius: tokens.borderRadiusCircular,\n        borderBottomRightRadius: tokens.borderRadiusCircular\n    },\n    medium: {\n        fontSize: mediumIconSize,\n        paddingLeft: '5px',\n        paddingRight: '5px'\n    },\n    small: {\n        fontSize: smallIconSize,\n        paddingLeft: '3px',\n        paddingRight: '3px'\n    },\n    'extra-small': {\n        fontSize: extraSmallIconSize,\n        paddingLeft: '5px',\n        paddingRight: '5px'\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        borderLeftColor: tokens.colorNeutralStrokeDisabled\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        borderLeftColor: tokens.colorNeutralStrokeDisabled\n    }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const rootDisabledStyles = useRootDisabledStyles();\n    const { shape, size, appearance } = state;\n    state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,gBAAGX,aAAA,usCAkB5B,CAAC;AACF,MAAMY,aAAa,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAM,KAAA;IAAAd,MAAA;IAAAC,MAAA;IAAAY,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyFrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGzC,QAAA;EAAAY,MAAA;IAAA8B,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAJ,OAAA;IAAAoB,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAe,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAqB7B,CAAC;AACF,OAAO,MAAMM,yCAAyC,GAAIC,KAAK,IAAG;EAC9D,MAAMC,iBAAiB,GAAGnC,oBAAoB,CAAC,CAAC;EAChD,MAAMoC,UAAU,GAAGnC,aAAa,CAAC,CAAC;EAClC,MAAMoC,kBAAkB,GAAGN,qBAAqB,CAAC,CAAC;EAClD,MAAM;IAAEO,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGN,KAAK;EACzCA,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACI,iCAAiC,CAACC,IAAI,EAAEuC,iBAAiB,EAAED,KAAK,CAACQ,QAAQ,GAAGL,kBAAkB,CAACG,UAAU,CAAC,GAAGJ,UAAU,CAACI,UAAU,CAAC,EAAEJ,UAAU,CAACE,KAAK,CAAC,EAAEF,UAAU,CAACG,IAAI,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACnO,OAAOP,KAAK;AAChB,CAAC"}

package/lib/components/Tag/Tag.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useTag_unstable } from './useTag';
+import { renderTag_unstable } from './renderTag';
+import { useTagStyles_unstable } from './useTagStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useTagAvatarContextValues_unstable } from '../../utils';
+/**
+ * Tag component -  a visual representation of an attribute.
+ * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach an action (by default it is dismiss)
+ */ export const Tag = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTag_unstable(props, ref);
+    useTagStyles_unstable(state);
+    useCustomStyleHook_unstable('useTagStyles_unstable')(state);
+    return renderTag_unstable(state, useTagAvatarContextValues_unstable(state));
+});
+Tag.displayName = 'Tag';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTag_unstable } from './useTag';\nimport { renderTag_unstable } from './renderTag';\nimport { useTagStyles_unstable } from './useTagStyles.styles';\nimport type { TagProps } from './Tag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useTagAvatarContextValues_unstable } from '../../utils';\n\n/**\n * Tag component -  a visual representation of an attribute.\n * Provides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach an action (by default it is dismiss)\n */\nexport const Tag: ForwardRefComponent<TagProps> = React.forwardRef((props, ref) => {\n  const state = useTag_unstable(props, ref);\n\n  useTagStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTagStyles_unstable')(state);\n\n  return renderTag_unstable(state, useTagAvatarContextValues_unstable(state));\n});\n\nTag.displayName = 'Tag';\n"],"names":["React","useTag_unstable","renderTag_unstable","useTagStyles_unstable","useCustomStyleHook_unstable","useTagAvatarContextValues_unstable","Tag","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,WAAW;AAC3C,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,kCAAkC,QAAQ,cAAc;AAEjE;;;CAGC,GACD,OAAO,MAAMC,oBAAqCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACzE,MAAMC,QAAQT,gBAAgBO,OAAOC;IAErCN,sBAAsBO;IAEtBN,4BAA4B,yBAAyBM;IAErD,OAAOR,mBAAmBQ,OAAOL,mCAAmCK;AACtE,GAAG;AAEHJ,IAAIK,WAAW,GAAG"}

package/lib/components/Tag/Tag.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Tag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TagAppearance, TagShape, TagSize } from '../../utils/types';\nimport { TagAvatarContextValues, UseTagAvatarContextValuesOptions } from '../../utils/useTagAvatarContextValues';\n\nexport type TagContextValues = TagAvatarContextValues;\n\nexport type TagSlots = {\n  root: NonNullable<Slot<'button', 'span'>>;\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 Tag. 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   * Slot for the dismiss icon\n   */\n  dismissIcon?: Slot<'span'>;\n};\n\n/**\n * Tag Props\n */\nexport type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {\n  /**\n   * A Tag can have filled, outlined or brand experience.\n   *\n   * @default 'filled'\n   */\n  appearance?: TagAppearance;\n\n  /**\n   * A Tag can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A Tag can be dismissible\n   *\n   * @default false\n   */\n  dismissible?: boolean;\n\n  /**\n   * A Tag can have rounded or circular shape.\n   *\n   * @default 'round'\n   */\n  shape?: TagShape;\n\n  /**\n   * A Tag has three sizes.\n   *\n   * @default 'medium'\n   */\n  size?: TagSize;\n\n  /**\n   * Unique value identifying the tag within a TagGroup\n   */\n  value?: Value;\n};\n\n/**\n * State used in rendering Tag\n */\nexport type TagState = ComponentState<TagSlots> &\n  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> &\n  UseTagAvatarContextValuesOptions;\n"],"names":[],"mappings":"AAAA,WAqFmC"}

package/lib/components/Tag/index.js

@@ -0,0 +1,5 @@
+export * from './Tag';
+export * from './Tag.types';
+export * from './renderTag';
+export * from './useTag';
+export * from './useTagStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Tag';\nexport * from './Tag.types';\nexport * from './renderTag';\nexport * from './useTag';\nexport * from './useTagStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,wBAAwB"}

package/lib/components/Tag/renderTag.js

@@ -0,0 +1,20 @@
+  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 Tag
+ */ export const renderTag_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, {}),
+            state.dismissIcon && state.dismissible && /*#__PURE__*/ _jsx(state.dismissIcon, {})
+        ]
+    });
+};

package/lib/components/Tag/renderTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagState, TagSlots, TagContextValues } from './Tag.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of Tag\n */\nexport const renderTag_unstable = (state: TagState, contextValues: TagContextValues) => {\n  assertSlots<TagSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n\n      {state.icon && <state.icon />}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.dismissIcon && state.dismissible && <state.dismissIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderTag_unstable","state","contextValues","root","media","value","avatar","icon","primaryText","secondaryText","dismissIcon","dismissible"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAiBC;IAClDJ,YAAsBG;IAEtB,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAIfH,MAAMM,IAAI,kBAAI,KAACN,MAAMM,IAAI;YACzBN,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,WAAW,IAAIT,MAAMU,WAAW,kBAAI,KAACV,MAAMS,WAAW;;;AAGnE,EAAE"}

package/lib/components/Tag/useTag.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { getNativeElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { DismissRegular } from '@fluentui/react-icons';
+import { Delete, Backspace } from '@fluentui/keyboard-keys';
+import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
+const tagAvatarSizeMap = {
+    medium: 28,
+    small: 20,
+    'extra-small': 16
+};
+const tagAvatarShapeMap = {
+    rounded: 'square',
+    circular: 'circular'
+};
+/**
+ * Create the state required to render Tag.
+ *
+ * The returned state can be modified with hooks such as useTagStyles_unstable,
+ * before being passed to renderTag_unstable.
+ *
+ * @param props - props from this instance of Tag
+ * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
+ */ export const useTag_unstable = (props, ref)=>{
+    const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
+    const id = useId('fui-Tag', props.id);
+    const { appearance = 'filled', disabled = false, dismissible = false, shape = 'rounded', size = contextSize, value = id } = props;
+    const dismissOnClick = useEventCallback((ev)=>{
+        var _props_onClick;
+        (_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 dismissOnKeyDown = 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
+            });
+        }
+    });
+    const elementType = dismissible ? 'button' : 'span';
+    return {
+        appearance,
+        avatarShape: tagAvatarShapeMap[shape],
+        avatarSize: tagAvatarSizeMap[size],
+        disabled,
+        dismissible,
+        shape,
+        size,
+        components: {
+            root: elementType,
+            media: 'span',
+            icon: 'span',
+            primaryText: 'span',
+            secondaryText: 'span',
+            dismissIcon: 'span'
+        },
+        root: slot.always(getNativeElementProps(elementType, {
+            ref,
+            ...props,
+            id,
+            ...dismissible && {
+                onClick: dismissOnClick,
+                onKeyDown: dismissOnKeyDown
+            }
+        }), {
+            elementType
+        }),
+        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'
+        }),
+        dismissIcon: slot.optional(props.dismissIcon, {
+            renderByDefault: dismissible,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(DismissRegular, null),
+                role: 'img'
+            },
+            elementType: 'span'
+        })
+    };
+};

package/lib/components/Tag/useTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { DismissRegular } from '@fluentui/react-icons';\nimport type { TagProps, TagState } from './Tag.types';\nimport { Delete, Backspace } from '@fluentui/keyboard-keys';\nimport { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';\n\nconst tagAvatarSizeMap = {\n  medium: 28,\n  small: 20,\n  'extra-small': 16,\n} as const;\n\nconst tagAvatarShapeMap = {\n  rounded: 'square',\n  circular: 'circular',\n} as const;\n\n/**\n * Create the state required to render Tag.\n *\n * The returned state can be modified with hooks such as useTagStyles_unstable,\n * before being passed to renderTag_unstable.\n *\n * @param props - props from this instance of Tag\n * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag\n */\nexport const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {\n  const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();\n\n  const id = useId('fui-Tag', props.id);\n\n  const {\n    appearance = 'filled',\n    disabled = false,\n    dismissible = false,\n    shape = 'rounded',\n    size = contextSize,\n    value = id,\n  } = props;\n\n  const dismissOnClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    props.onClick?.(ev);\n    if (!ev.defaultPrevented) {\n      handleTagDismiss?.(ev, { value });\n    }\n  });\n\n  const dismissOnKeyDown = 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  const elementType = dismissible ? 'button' : 'span';\n\n  return {\n    appearance,\n    avatarShape: tagAvatarShapeMap[shape],\n    avatarSize: tagAvatarSizeMap[size],\n    disabled,\n    dismissible,\n    shape,\n    size,\n\n    components: {\n      root: elementType,\n      media: 'span',\n      icon: 'span',\n      primaryText: 'span',\n      secondaryText: 'span',\n      dismissIcon: 'span',\n    },\n\n    root: slot.always(\n      getNativeElementProps(elementType, {\n        ref,\n        ...props,\n        id,\n        ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),\n      }),\n      { elementType },\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    dismissIcon: slot.optional(props.dismissIcon, {\n      renderByDefault: dismissible,\n      defaultProps: {\n        children: <DismissRegular />,\n        role: 'img',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","useId","slot","DismissRegular","Delete","Backspace","useTagGroupContext_unstable","tagAvatarSizeMap","medium","small","tagAvatarShapeMap","rounded","circular","useTag_unstable","props","ref","handleTagDismiss","size","contextSize","id","appearance","disabled","dismissible","shape","value","dismissOnClick","ev","onClick","defaultPrevented","dismissOnKeyDown","onKeyDown","key","elementType","avatarShape","avatarSize","components","root","media","icon","primaryText","secondaryText","dismissIcon","always","optional","renderByDefault","defaultProps","children","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACjG,SAASC,cAAc,QAAQ,wBAAwB;AAEvD,SAASC,MAAM,EAAEC,SAAS,QAAQ,0BAA0B;AAC5D,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,MAAMC,mBAAmB;IACvBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA,MAAMC,oBAAoB;IACxBC,SAAS;IACTC,UAAU;AACZ;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,kBAAkB,CAACC,OAAiBC;IAC/C,MAAM,EAAEC,gBAAgB,EAAEC,MAAMC,WAAW,EAAE,GAAGZ;IAEhD,MAAMa,KAAKlB,MAAM,WAAWa,MAAMK,EAAE;IAEpC,MAAM,EACJC,aAAa,QAAQ,EACrBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,QAAQ,SAAS,EACjBN,OAAOC,WAAW,EAClBM,QAAQL,EAAE,EACX,GAAGL;IAEJ,MAAMW,iBAAiBzB,iBAAiB,CAAC0B;YACvCZ;SAAAA,iBAAAA,MAAMa,OAAO,cAAbb,qCAAAA,oBAAAA,OAAgBY;QAChB,IAAI,CAACA,GAAGE,gBAAgB,EAAE;YACxBZ,6BAAAA,uCAAAA,iBAAmBU,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMK,mBAAmB7B,iBAAiB,CAAC0B;YACzCZ;QAAAA,kBAAAA,6BAAAA,mBAAAA,MAAOgB,SAAS,cAAhBhB,uCAAAA,sBAAAA,OAAmBY;QACnB,IAAI,CAACA,GAAGE,gBAAgB,IAAKF,CAAAA,GAAGK,GAAG,KAAK3B,UAAUsB,GAAGK,GAAG,KAAK1B,SAAQ,GAAI;YACvEW,6BAAAA,uCAAAA,iBAAmBU,IAAI;gBAAEF;YAAM;QACjC;IACF;IAEA,MAAMQ,cAAcV,cAAc,WAAW;IAE7C,OAAO;QACLF;QACAa,aAAavB,iBAAiB,CAACa,MAAM;QACrCW,YAAY3B,gBAAgB,CAACU,KAAK;QAClCI;QACAC;QACAC;QACAN;QAEAkB,YAAY;YACVC,MAAMJ;YACNK,OAAO;YACPC,MAAM;YACNC,aAAa;YACbC,eAAe;YACfC,aAAa;QACf;QAEAL,MAAMlC,KAAKwC,MAAM,CACf3C,sBAAsBiC,aAAa;YACjCjB;YACA,GAAGD,KAAK;YACRK;YACA,GAAIG,eAAe;gBAAEK,SAASF;gBAAgBK,WAAWD;YAAiB,CAAC;QAC7E,IACA;YAAEG;QAAY;QAGhBK,OAAOnC,KAAKyC,QAAQ,CAAC7B,MAAMuB,KAAK,EAAE;YAAEL,aAAa;QAAO;QACxDM,MAAMpC,KAAKyC,QAAQ,CAAC7B,MAAMwB,IAAI,EAAE;YAAEN,aAAa;QAAO;QACtDO,aAAarC,KAAKyC,QAAQ,CAAC7B,MAAMyB,WAAW,EAAE;YAC5CK,iBAAiB;YACjBC,cAAc;gBACZC,UAAUhC,MAAMgC,QAAQ;YAC1B;YACAd,aAAa;QACf;QACAQ,eAAetC,KAAKyC,QAAQ,CAAC7B,MAAM0B,aAAa,EAAE;YAAER,aAAa;QAAO;QACxES,aAAavC,KAAKyC,QAAQ,CAAC7B,MAAM2B,WAAW,EAAE;YAC5CG,iBAAiBtB;YACjBuB,cAAc;gBACZC,wBAAU,oBAAC3C;gBACX4C,MAAM;YACR;YACAf,aAAa;QACf;IACF;AACF,EAAE"}