npm - @fluentui/react-tag-picker - Versions diffs - 9.8.6 → 9.8.8 - Mend

@fluentui/react-tag-picker 9.8.6 → 9.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr'\n }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2'\n});\n/*\n Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,gBAAGT,aAAA,gEAGxB,CAAC;AACF,MAAMU,aAAa,gBAAGT,QAAA;EAAAO,gBAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,gBAAGd,aAAA,oNAIpC,CAAC;AACF,MAAMe,iBAAiB,gBAAGf,aAAA,sDAEzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgB,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;EACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;EAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;~~EAC1CE~~,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;EAC/JnB,wBAAwB,CAAC;IACrB,GAAGc,KAAK;IACRM,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,IAAIX,KAAK,CAACV,KAAK,EAAE;~~IACbU~~,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;EAChH;EACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;~~IACxBS~~,KAAK,CAACT,gBAAgB,CAACc,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;EAC5J;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr'\n }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2'\n});\n/*\n Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false\n });\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,gBAAGT,aAAA,gEAGxB,CAAC;AACF,MAAMU,aAAa,gBAAGT,QAAA;EAAAO,gBAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,gBAAGd,aAAA,oNAIpC,CAAC;AACF,MAAMe,iBAAiB,gBAAGf,aAAA,sDAEzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMgB,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;EACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;EAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;EAC1C;EACAE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;EAC/JnB,wBAAwB,CAAC;IACrB,GAAGc,KAAK;IACRM,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,IAAIX,KAAK,CAACV,KAAK,EAAE;IACb;IACAU,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;EAChH;EACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;IACxB;IACAS,KAAK,CAACT,gBAAgB,CAACc,SAAS,GAAGpB,YAAY,CAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;EAC5J;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js CHANGED Viewed

@@ -33,6 +33,7 @@ const useMediaBaseStyle = makeResetStyles({
     const rootStyles = useRootStyles();
     const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
     const mediaBaseStyle = useMediaBaseStyle();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
     useOptionStyles_unstable({
         ...state,
@@ -43,9 +44,11 @@ const useMediaBaseStyle = makeResetStyles({
         selected: false
     });
     if (state.media) {
+        // eslint-disable-next-line react-hooks/immutability
         state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
     }
     if (state.secondaryContent) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
     }
     return state;

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2',\n});\n\n/*\n Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n 'use no memo';\n\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n\n state.root.className = mergeClasses(\n tagPickerOptionClassNames.root,\n rootBaseStyle,\n state.secondaryContent && rootStyles.secondaryContent,\n state.root.className,\n );\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false,\n });\n if (state.media) {\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n tagPickerOptionClassNames.secondaryContent,\n secondaryContentBaseStyle,\n state.secondaryContent.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,wBAAwB,QAAQ,2BAA2B;AACpE,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,gBAAgBX,WAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,+BAA+Bd,gBAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,iBAAiBa,QAAQ;AAC9B;AAEA,MAAMC,oBAAoBlB,gBAAgB;IACxCgB,cAAc;AAChB;AAEA;;CAEC,GACD,OAAO,MAAMG,oCAAoC,CAACC;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;~~IAEvBE~~,MAAMd,IAAI,CAACmB,SAAS,GAAGvB,aACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;IAEtBtB,yBAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;~~QACfa~~,MAAMb,KAAK,CAACkB,SAAS,GAAGvB,aAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;~~QAC1BY~~,MAAMZ,gBAAgB,CAACiB,SAAS,GAAGvB,aACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n root: 'fui-TagPickerOption',\n media: 'fui-TagPickerOption__media',\n secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n secondaryContent: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n gridColumnStart: 2,\n gridRowStart: 2,\n ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n gridRowStart: 'span 2',\n});\n\n/*\n Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n 'use no memo';\n\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n const mediaBaseStyle = useMediaBaseStyle();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tagPickerOptionClassNames.root,\n rootBaseStyle,\n state.secondaryContent && rootStyles.secondaryContent,\n state.root.className,\n );\n useOptionStyles_unstable({\n ...state,\n active: false,\n disabled: false,\n focusVisible: false,\n checkIcon: undefined,\n selected: false,\n });\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n tagPickerOptionClassNames.secondaryContent,\n secondaryContentBaseStyle,\n state.secondaryContent.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,wBAAwB,QAAQ,2BAA2B;AACpE,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,gBAAgBX,WAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,+BAA+Bd,gBAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,iBAAiBa,QAAQ;AAC9B;AAEA,MAAMC,oBAAoBlB,gBAAgB;IACxCgB,cAAc;AAChB;AAEA;;CAEC,GACD,OAAO,MAAMG,oCAAoC,CAACC;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvB,oDAAoD;IACpDE,MAAMd,IAAI,CAACmB,SAAS,GAAGvB,aACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;IAEtBtB,yBAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACf,oDAAoD;QACpDa,MAAMb,KAAK,CAACkB,SAAS,GAAGvB,aAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDY,MAAMZ,gBAAgB,CAACiB,SAAS,GAAGvB,aACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js CHANGED Viewed

@@ -13,8 +13,10 @@ export const useTagPickerOptionGroupStyles = state => {
   'use no memo';
   useOptionGroupStyles_unstable(state);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);
   if (state.label) {
+    // eslint-disable-next-line react-hooks/immutability
     state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);
   }
   return state;

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label'\n};\n/*\n Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n 'use no memo';\n useOptionGroupStyles_unstable(state);\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n if (state.label) {\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,6BAA6B,QAAQ,0BAA0B;AACxE,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACbL,6BAA6B,CAACK,KAAK,CAAC;~~EACpCA~~,KAAK,CAACH,IAAI,CAACI,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;EAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;~~IACbE~~,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;EACrG;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label'\n};\n/*\n Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n 'use no memo';\n useOptionGroupStyles_unstable(state);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,6BAA6B,QAAQ,0BAA0B;AACxE,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACbL,6BAA6B,CAACK,KAAK,CAAC;EACpC;EACAA,KAAK,CAACH,IAAI,CAACI,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;EAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;IACb;IACAE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGP,YAAY,CAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;EACrG;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js CHANGED Viewed

@@ -10,8 +10,10 @@ export const tagPickerOptionGroupClassNames = {
  */ export const useTagPickerOptionGroupStyles = (state)=>{
     'use no memo';
     useOptionGroupStyles_unstable(state);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);
     }
     return state;

package/lib/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label',\n};\n\n/*\n Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n 'use no memo';\n\n useOptionGroupStyles_unstable(state);\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,6BAA6B,QAAQ,2BAA2B;AAEzE,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEAL,8BAA8BK;~~IAC9BA~~,MAAMH,IAAI,CAACI,SAAS,GAAGP,aAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;~~QACfE~~,MAAMF,KAAK,CAACG,SAAS,GAAGP,aAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n root: 'fui-TagPickerOptionGroup',\n label: 'fui-TagPickerOptionGroup__label',\n};\n\n/*\n Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n 'use no memo';\n\n useOptionGroupStyles_unstable(state);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,6BAA6B,QAAQ,2BAA2B;AAEzE,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEAL,8BAA8BK;IAC9B,oDAAoD;IACpDA,MAAMH,IAAI,CAACI,SAAS,GAAGP,aAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACf,oDAAoD;QACpDE,MAAMF,KAAK,CAACG,SAAS,GAAGP,aAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js CHANGED Viewed

@@ -432,6 +432,7 @@ const tagPickerButtonClassNames = {
 const useTagPickerButtonStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);
     return state;
 };

package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerButtonClassNames = {\n root: 'fui-TagPickerButton'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n button: {\n alignItems: 'center',\n minHeight: '32px',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n fontFamily: tokens.fontFamilyBase,\n textAlign: 'left',\n flexGrow: 1,\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n medium: {\n ...typographyStyles.caption1,\n padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n ...typographyStyles.body1,\n padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n 'extra-large': {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n }\n});\n/\n Apply styling to the PickerButton slots based on the state\n */ export const useTagPickerButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","Bt984gj","sshi5w","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","sj55zd","i8kkvl","Bceei9c","Bahqtrf","fsow6f","Bh6795r","Brovlpu","placeholder","medium","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledText","hidden","mc9l5x","visuallyHidden","Bh84pgu","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","qhf8xq","d","p","f","h","a","m","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}
1	+ {"version":3,"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerButtonClassNames = {\n root: 'fui-TagPickerButton'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n button: {\n alignItems: 'center',\n minHeight: '32px',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n fontFamily: tokens.fontFamilyBase,\n textAlign: 'left',\n flexGrow: 1,\n '&:focus': {\n outlineStyle: 'none'\n }\n },\n placeholder: {\n color: tokens.colorNeutralForeground4\n },\n // size variants\n medium: {\n ...typographyStyles.caption1,\n padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n large: {\n ...typographyStyles.body1,\n padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n },\n 'extra-large': {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n },\n hidden: {\n display: 'none'\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute'\n }\n});\n/\n Apply styling to the PickerButton slots based on the state\n */ export const useTagPickerButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","Bt984gj","sshi5w","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","sj55zd","i8kkvl","Bceei9c","Bahqtrf","fsow6f","Bh6795r","Brovlpu","placeholder","medium","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledText","hidden","mc9l5x","visuallyHidden","Bh84pgu","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","qhf8xq","d","p","f","h","a","m","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}

package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js CHANGED Viewed

@@ -125,6 +125,7 @@ const tagPickerButtonClassNames = {
 const useTagPickerButtonStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);
     return state;
 };

package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n root: 'fui-TagPickerButton',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n button: {\n alignItems: 'center',\n minHeight: '32px',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n fontFamily: tokens.fontFamilyBase,\n textAlign: 'left',\n flexGrow: 1,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n medium: {\n ...typographyStyles.caption1,\n padding: `3px ${\n tokens.spacingHorizontalSNudge\n } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n large: {\n ...typographyStyles.body1,\n padding: `5px ${\n tokens.spacingHorizontalMNudge\n } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n 'extra-large': {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${\n tokens.spacingHorizontalM\n } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n\n hidden: {\n display: 'none',\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n },\n});\n\n/\n Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerButtonClassNames.root,\n styles.button,\n styles[state.size],\n state.hasSelectedOption && styles.visuallyHidden,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","alignItems","minHeight","backgroundColor","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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~~IACf4D~~,MAAM7D,IAAI,CAAC+D,SAAS,OAAGpE,mBAAAA,EACrBI,0BAA0BC,IAAI,EAC9B8D,OAAO5D,MAAM,EACb4D,MAAM,CAACD,MAAMG,IAAI,CAAC,EAClBH,MAAMI,iBAAiB,IAAIH,OAAOT,cAAc,EAChDQ,MAAM7D,IAAI,CAAC+D,SAAS;IAGtB,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n root: 'fui-TagPickerButton',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n button: {\n alignItems: 'center',\n minHeight: '32px',\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n fontFamily: tokens.fontFamilyBase,\n textAlign: 'left',\n flexGrow: 1,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n medium: {\n ...typographyStyles.caption1,\n padding: `3px ${\n tokens.spacingHorizontalSNudge\n } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n large: {\n ...typographyStyles.body1,\n padding: `5px ${\n tokens.spacingHorizontalMNudge\n } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n },\n 'extra-large': {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n padding: `7px ${\n tokens.spacingHorizontalM\n } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid transparent`,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n\n hidden: {\n display: 'none',\n },\n visuallyHidden: {\n clip: 'rect(0px, 0px, 0px, 0px)',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0px',\n width: '1px',\n position: 'absolute',\n },\n});\n\n/\n Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tagPickerButtonClassNames.root,\n styles.button,\n styles[state.size],\n state.hasSelectedOption && styles.visuallyHidden,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","alignItems","minHeight","backgroundColor","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}

package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js CHANGED Viewed

@@ -549,14 +549,18 @@ const useTagPickerControlStyles_unstable = (state)=>{
     const iconStyles = useIconStyles();
     const asideStyles = useAsideStyles();
     const secondaryActionStyles = useSecondaryActionStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);
     if (state.aside) {
+        // eslint-disable-next-line react-hooks/immutability
         state.aside.className = (0, _react.mergeClasses)(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = (0, _react.mergeClasses)(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);
     }
     if (state.secondaryAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryAction.className = (0, _react.mergeClasses)(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);
     }
     return state;

package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n '&:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useAsideStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n height: '100%',\n cursor: 'text'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n }\n});\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\n};\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'flex-start',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '32px'\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '40px'\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n minHeight: '44px'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\nconst useSecondaryActionStyles = makeStyles({\n root: {\n display: 'flex'\n }\n});\n/\n Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n const secondaryActionStyles = useSecondaryActionStyles();\n state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n if (state.aside) {\n state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n }\n if (state.secondaryAction) {\n state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Brf1p80","qb2dma","Be2twd7","Bo70h7d","Frg6f3","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}
1	+ {"version":3,"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n },\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n listboxCollapsed: {\n display: 'none'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n },\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n '&:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n});\nconst useAsideStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n height: '100%',\n cursor: 'text'\n },\n // size variants\n medium: {\n minHeight: '32px'\n },\n large: {\n minHeight: '40px'\n },\n 'extra-large': {\n minHeight: '44px'\n }\n});\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\n};\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'flex-start',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block'\n }\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '32px'\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '40px'\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n minHeight: '44px'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\n }\n});\nconst useSecondaryActionStyles = makeStyles({\n root: {\n display: 'flex'\n }\n});\n/\n Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n const secondaryActionStyles = useSecondaryActionStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n if (state.aside) {\n // eslint-disable-next-line react-hooks/immutability\n state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n }\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n }\n if (state.secondaryAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Brf1p80","qb2dma","Be2twd7","Bo70h7d","Frg6f3","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}

package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js CHANGED Viewed

@@ -232,14 +232,18 @@ const useTagPickerControlStyles_unstable = (state)=>{
     const iconStyles = useIconStyles();
     const asideStyles = useAsideStyles();
     const secondaryActionStyles = useSecondaryActionStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);
     if (state.aside) {
+        // eslint-disable-next-line react-hooks/immutability
         state.aside.className = (0, _react.mergeClasses)(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);
     }
     if (state.expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.expandIcon.className = (0, _react.mergeClasses)(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);
     }
     if (state.secondaryAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryAction.className = (0, _react.mergeClasses)(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);
     }
     return state;

package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type {\n TagPickerControlInternalSlots,\n TagPickerControlSlots,\n TagPickerControlState,\n} from './TagPickerControl.types';\n\nexport const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots> = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside',\n};\n\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width' as const;\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // size variants\n medium: {\n minHeight: '32px',\n },\n large: {\n minHeight: '40px',\n },\n 'extra-large': {\n minHeight: '44px',\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n '&:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useAsideStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n height: '100%',\n cursor: 'text',\n },\n // size variants\n medium: {\n minHeight: '32px',\n },\n large: {\n minHeight: '40px',\n },\n 'extra-large': {\n minHeight: '44px',\n },\n});\n\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'flex-start',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '32px',\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '40px',\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n minHeight: '44px',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\nconst useSecondaryActionStyles = makeStyles({\n root: { display: 'flex' },\n});\n\n/\n Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = (state: TagPickerControlState): TagPickerControlState => {\n 'use no memo';\n\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n const secondaryActionStyles = useSecondaryActionStyles();\n state.root.className = mergeClasses(\n tagPickerControlClassNames.root,\n styles.root,\n styles[state.size],\n styles[state.appearance],\n !state.disabled && state.appearance === 'outline' && styles.outlineInteractive,\n state.invalid && state.appearance !== 'underline' && styles.invalid,\n state.invalid && state.appearance === 'underline' && styles.invalidUnderline,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.aside) {\n state.aside.className = mergeClasses(\n tagPickerControlClassNames.aside,\n asideStyles.root,\n asideStyles[state.size],\n state.aside.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n tagPickerControlClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[state.size],\n state.disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n if (state.secondaryAction) {\n state.secondaryAction.className = mergeClasses(\n tagPickerControlClassNames.secondaryAction,\n secondaryActionStyles.root,\n state.secondaryAction.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","borderRadius","borderRadiusMedium","paddingRight","spacingHorizontalM","paddingLeft","alignItems","columnGap","spacingHorizontalXXS","boxSizing","display","minWidth","position","flexWrap","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","listbox","boxShadow","shadow16","maxHeight","listboxCollapsed","medium","minHeight","large","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","iconSizes","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type {\n TagPickerControlInternalSlots,\n TagPickerControlSlots,\n TagPickerControlState,\n} from './TagPickerControl.types';\n\nexport const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots> = {\n root: 'fui-TagPickerControl',\n expandIcon: 'fui-TagPickerControl__expandIcon',\n secondaryAction: 'fui-TagPickerControl__secondaryAction',\n aside: 'fui-TagPickerControl__aside',\n};\n\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width' as const;\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusMedium,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: tokens.spacingHorizontalM,\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXXS,\n boxSizing: 'border-box',\n display: 'flex',\n minWidth: '250px',\n position: 'relative',\n flexWrap: 'wrap',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // size variants\n medium: {\n minHeight: '32px',\n },\n large: {\n minHeight: '40px',\n },\n 'extra-large': {\n minHeight: '44px',\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n '&:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useAsideStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n height: '100%',\n cursor: 'text',\n },\n // size variants\n medium: {\n minHeight: '32px',\n },\n large: {\n minHeight: '40px',\n },\n 'extra-large': {\n minHeight: '44px',\n },\n});\n\nexport const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'flex-start',\n fontSize: tokens.fontSizeBase500,\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n // icon size variants\n medium: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '32px',\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n minHeight: '40px',\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n minHeight: '44px',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\nconst useSecondaryActionStyles = makeStyles({\n root: { display: 'flex' },\n});\n\n/\n Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = (state: TagPickerControlState): TagPickerControlState => {\n 'use no memo';\n\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n const secondaryActionStyles = useSecondaryActionStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tagPickerControlClassNames.root,\n styles.root,\n styles[state.size],\n styles[state.appearance],\n !state.disabled && state.appearance === 'outline' && styles.outlineInteractive,\n state.invalid && state.appearance !== 'underline' && styles.invalid,\n state.invalid && state.appearance === 'underline' && styles.invalidUnderline,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.aside) {\n // eslint-disable-next-line react-hooks/immutability\n state.aside.className = mergeClasses(\n tagPickerControlClassNames.aside,\n asideStyles.root,\n asideStyles[state.size],\n state.aside.className,\n );\n }\n\n if (state.expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.expandIcon.className = mergeClasses(\n tagPickerControlClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[state.size],\n state.disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n if (state.secondaryAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryAction.className = mergeClasses(\n tagPickerControlClassNames.secondaryAction,\n secondaryActionStyles.root,\n state.secondaryAction.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","borderRadius","borderRadiusMedium","paddingRight","spacingHorizontalM","paddingLeft","alignItems","columnGap","spacingHorizontalXXS","boxSizing","display","minWidth","position","flexWrap","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","listbox","boxShadow","shadow16","maxHeight","listboxCollapsed","medium","minHeight","large","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","iconSizes","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js CHANGED Viewed

@@ -108,6 +108,7 @@ const useTagPickerGroupStyles_unstable = (state)=>{
     'use no memo';
     (0, _reacttags.useTagGroupStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerGroupClassNames.root, styles[(0, _tagPicker2Tag.tagSizeToTagPickerSize)(state.size)], styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n root: 'fui-TagPickerGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n flexWrap: 'wrap',\n boxSizing: 'border-box',\n cursor: 'text'\n },\n // size variants\n medium: {\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n gap: tokens.spacingHorizontalXS\n },\n large: {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge\n },\n 'extra-large': {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge\n }\n});\n/\n Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n 'use no memo';\n useTagGroupStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCK,wBAAwB;;;IA2BpBkB,gCAAgC;;;;uBA/BR,gBAAgB;2BACd,sBAAsB;+BAE1B,2BAA2B;AAC3D,iCAAiC;IACpCjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,eAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;IACzD,aAAa;QACbtB,qCAA0B,EAACsB,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;~~IAC1BiB~~,KAAK,CAAClB,IAAI,CAACoB,SAAS,OAAGzB,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,KAACrB,qCAAsB,EAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n root: 'fui-TagPickerGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n flexWrap: 'wrap',\n boxSizing: 'border-box',\n cursor: 'text'\n },\n // size variants\n medium: {\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n gap: tokens.spacingHorizontalXS\n },\n large: {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge\n },\n 'extra-large': {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge\n }\n});\n/\n Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n 'use no memo';\n useTagGroupStyles_unstable(state);\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCK,wBAAwB;;;IA2BpBkB,gCAAgC;;;;uBA/BR,gBAAgB;2BACd,sBAAsB;+BAE1B,2BAA2B;AAC3D,iCAAiC;IACpCjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,eAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;IACzD,aAAa;QACbtB,qCAA0B,EAACsB,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,OAAGzB,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,KAACrB,qCAAsB,EAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js CHANGED Viewed

@@ -50,6 +50,7 @@ const useTagPickerGroupStyles_unstable = (state)=>{
     'use no memo';
     (0, _reacttags.useTagGroupStyles_unstable)(state);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerGroupClassNames.root, styles[(0, _tagPicker2Tag.tagSizeToTagPickerSize)(state.size)], styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n root: 'fui-TagPickerGroup',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n flexWrap: 'wrap',\n boxSizing: 'border-box',\n cursor: 'text',\n },\n // size variants\n medium: {\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n gap: tokens.spacingHorizontalXS,\n },\n large: {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge,\n },\n 'extra-large': {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge,\n },\n});\n\n/\n Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n 'use no memo';\n\n useTagGroupStyles_unstable(state);\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerGroupClassNames.root,\n styles[tagSizeToTagPickerSize(state.size)],\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;;;;;;;;;;;;IASaK,wBAAAA;;;oCA+BAc;eAAAA;;;uBAtC4B,iBAAiB;2BAGf,uBAAuB;4BAC3C,wBAAwB;+BACR,4BAA4B;AAE5D,iCAAsE;IAC3Eb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,kBAAAA,CAAOU,qBAAqB,CAAC,GAAG,EAAEV,kBAAAA,CAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,kBAAAA,CAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;AACF;AAKO,yCAAyC,CAACE;IAC/C;QAEAlB,qCAAAA,EAA2BkB;IAC3B,MAAMC,SAASd;~~IACfa~~,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,KAACjB,qCAAAA,EAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n root: 'fui-TagPickerGroup',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n flexWrap: 'wrap',\n boxSizing: 'border-box',\n cursor: 'text',\n },\n // size variants\n medium: {\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n gap: tokens.spacingHorizontalXS,\n },\n large: {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge,\n },\n 'extra-large': {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: tokens.spacingHorizontalSNudge,\n },\n});\n\n/\n Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n 'use no memo';\n\n useTagGroupStyles_unstable(state);\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n tagPickerGroupClassNames.root,\n styles[tagSizeToTagPickerSize(state.size)],\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;;;;;;;;;;;;IASaK,wBAAAA;;;oCA+BAc;eAAAA;;;uBAtC4B,iBAAiB;2BAGf,uBAAuB;4BAC3C,wBAAwB;+BACR,4BAA4B;AAE5D,iCAAsE;IAC3Eb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,kBAAAA,CAAOU,qBAAqB,CAAC,GAAG,EAAEV,kBAAAA,CAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,kBAAAA,CAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;AACF;AAKO,yCAAyC,CAACE;IAC/C;QAEAlB,qCAAAA,EAA2BkB;IAC3B,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,KAACjB,qCAAAA,EAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js CHANGED Viewed

@@ -106,6 +106,7 @@ const useTagPickerInputStyles_unstable = (state)=>{
     'use no memo';
     const baseStyle = useBaseStyle();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
     return state;
 };

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n boxSizing: 'border-box',\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n '&::after': {\n visibility: 'hidden',\n whiteSpace: 'pre-wrap'\n },\n border: 'none',\n minWidth: '24px',\n maxWidth: '100%',\n // by default width is 0,\n // it will be calculated based on the requirement of stretching the component to 100% width\n // see setTagPickerInputStretchStyle method for more details\n width: tagPickerInputTokens.width,\n flexGrow: 1\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n // size variants\n medium: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n },\n large: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n },\n 'extra-large': {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\n/\n Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyle = useBaseStyle();\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICM,wBAAwB;;;oCAuDY;;;;uBA1DS,gBAAgB;AAGnE,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,GAAA,WAAA,OAAGR,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAwBpB,CAAC;AACF;;CAEA,GAAI,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA,eAAA;QAAAR,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;IAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;~~IAC1BoB~~,KAAK,CAACtB,IAAI,CAACyB,SAAS,OAAG9B,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;IAC1J,OAAOH,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n boxSizing: 'border-box',\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n '&::after': {\n visibility: 'hidden',\n whiteSpace: 'pre-wrap'\n },\n border: 'none',\n minWidth: '24px',\n maxWidth: '100%',\n // by default width is 0,\n // it will be calculated based on the requirement of stretching the component to 100% width\n // see setTagPickerInputStretchStyle method for more details\n width: tagPickerInputTokens.width,\n flexGrow: 1\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n // size variants\n medium: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n },\n large: {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n },\n 'extra-large': {\n ...typographyStyles.body1,\n padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\n/\n Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyle = useBaseStyle();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICM,wBAAwB;;;oCAuDY;;;;uBA1DS,gBAAgB;AAGnE,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,GAAA,WAAA,OAAGR,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAwBpB,CAAC;AACF;;CAEA,GAAI,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA,eAAA;QAAAR,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;IAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,OAAG9B,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;IAC1J,OAAOH,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js CHANGED Viewed

@@ -77,6 +77,7 @@ const useTagPickerInputStyles_unstable = (state)=>{
     'use no memo';
     const baseStyle = useBaseStyle();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
     return state;
 };