npm - @fluentui/react-tag-picker - Versions diffs - 9.7.5 → 9.7.7 - Mend

@fluentui/react-tag-picker 9.7.5 → 9.7.7

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 (155) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"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","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { 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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE,sBAAsB;EAC5BC,UAAU,EAAE,kCAAkC;EAC9CC,eAAe,EAAE,uCAAuC;EACxDC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAG,oCAAoC;AACnF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAK,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAA7C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA0C,OAAA;IAAArC,OAAA;EAAA;EAAAsC,gBAAA;IAAArC,MAAA;EAAA;EAAAsC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;EAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAA/B,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAH,OAAA;IAAArD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAgD,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAjB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAe,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAAC,OAAA;IAAAvC,MAAA;IAAAc,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;IAAAkC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA4HrB,CAAC;AACF,MAAMC,cAAc,gBAAGjH,QAAA;EAAAK,IAAA;IAAAgB,MAAA;IAAAE,MAAA;IAAA2F,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,OAAA;EAAA;EAAA3C,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAA+C,CAAA;AAAA,CAmBtB,CAAC;AACF,OAAO,MAAMU,SAAS,GAAG;EACrBC,KAAK,EAAE,MAAM;EACb3D,MAAM,EAAE,MAAM;EACdE,KAAK,EAAE;AACX,CAAC;AACD,MAAM0D,aAAa,gBAAGvH,QAAA;EAAAwH,IAAA;IAAApG,OAAA;IAAAqG,MAAA;IAAAnB,OAAA;IAAAjF,MAAA;IAAAqG,OAAA;IAAAxG,OAAA;IAAAyG,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAlE,MAAA;IAAAiE,OAAA;IAAAE,MAAA;IAAAlE,MAAA;EAAA;EAAAC,KAAA;IAAA+D,OAAA;IAAAE,MAAA;IAAAlE,MAAA;EAAA;EAAA;IAAAgE,OAAA;IAAAE,MAAA;IAAAlE,MAAA;EAAA;EAAAyC,QAAA;IAAAoB,MAAA;IAAAnB,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAoCrB,CAAC;AACF,MAAMoB,wBAAwB,gBAAG/H,QAAA;EAAAK,IAAA;IAAAgB,MAAA;EAAA;AAAA;EAAAsF,CAAA;AAAA,CAIhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMqB,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGxH,SAAS,CAAC,CAAC;EAC1B,MAAMyH,UAAU,GAAGZ,aAAa,CAAC,CAAC;EAClC,MAAMa,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,qBAAqB,GAAGN,wBAAwB,CAAC,CAAC;EACxDE,KAAK,CAAC5H,IAAI,CAACiI,SAAS,GAAGrI,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAE6H,MAAM,CAAC7H,IAAI,EAAE6H,MAAM,CAACD,KAAK,CAACM,IAAI,CAAC,EAAEL,MAAM,CAACD,KAAK,CAACO,UAAU,CAAC,EAAE,CAACP,KAAK,CAAC5B,QAAQ,IAAI4B,KAAK,CAACO,UAAU,KAAK,SAAS,IAAIN,MAAM,CAACjD,kBAAkB,EAAEgD,KAAK,CAAClC,OAAO,IAAIkC,KAAK,CAACO,UAAU,KAAK,WAAW,IAAIN,MAAM,CAACnC,OAAO,EAAEkC,KAAK,CAAClC,OAAO,IAAIkC,KAAK,CAACO,UAAU,KAAK,WAAW,IAAIN,MAAM,CAAC9B,gBAAgB,EAAE6B,KAAK,CAAC5B,QAAQ,IAAI6B,MAAM,CAAC7B,QAAQ,EAAE4B,KAAK,CAAC5H,IAAI,CAACiI,SAAS,CAAC;EAC3Z,IAAIL,KAAK,CAACzH,KAAK,EAAE;IACbyH,KAAK,CAACzH,KAAK,CAAC8H,SAAS,GAAGrI,YAAY,CAACG,0BAA0B,CAACI,KAAK,EAAE4H,WAAW,CAAC/H,IAAI,EAAE+H,WAAW,CAACH,KAAK,CAACM,IAAI,CAAC,EAAEN,KAAK,CAACzH,KAAK,CAAC8H,SAAS,CAAC;EAC5I;EACA,IAAIL,KAAK,CAAC3H,UAAU,EAAE;IAClB2H,KAAK,CAAC3H,UAAU,CAACgI,SAAS,GAAGrI,YAAY,CAACG,0BAA0B,CAACE,UAAU,EAAE6H,UAAU,CAACX,IAAI,EAAEW,UAAU,CAACF,KAAK,CAACM,IAAI,CAAC,EAAEN,KAAK,CAAC5B,QAAQ,IAAI8B,UAAU,CAAC9B,QAAQ,EAAE4B,KAAK,CAAC3H,UAAU,CAACgI,SAAS,CAAC;EAChM;EACA,IAAIL,KAAK,CAAC1H,eAAe,EAAE;IACvB0H,KAAK,CAAC1H,eAAe,CAAC+H,SAAS,GAAGrI,YAAY,CAACG,0BAA0B,CAACG,eAAe,EAAE8H,qBAAqB,CAAChI,IAAI,EAAE4H,KAAK,CAAC1H,eAAe,CAAC+H,SAAS,CAAC;EAC3J;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"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","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tagPickerControlClassNames = {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["import { 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 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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"}

package/lib/components/TagPickerGroup/TagPickerGroup.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPickerGroup_unstable } from './useTagPickerGroup';
 import { useTagGroupContextValues_unstable } from '@fluentui/react-tags';

package/lib/components/TagPickerGroup/TagPickerGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerGroup/TagPickerGroup.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerGroup_unstable } from './useTagPickerGroup';\nimport type { TagPickerGroupProps } from './TagPickerGroup.types';\nimport { useTagGroupContextValues_unstable } from '@fluentui/react-tags';\nimport { renderTagPickerGroup_unstable } from './renderTagPickerGroup';\nimport { useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerGroup component -\n * A TagPickerGroup is a composite component that allows users to group tags together.\n */\nexport const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerGroup_unstable(props, ref);\n\n useTagPickerGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerGroupStyles_unstable')(state);\n return renderTagPickerGroup_unstable(state, useTagGroupContextValues_unstable(state));\n});\n\nTagPickerGroup.displayName = 'TagPickerGroup';\n"],"names":["React","useTagPickerGroup_unstable","useTagGroupContextValues_unstable","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useCustomStyleHook_unstable","TagPickerGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AAEjE,SAASC,iCAAiC,QAAQ,uBAAuB;AACzE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAChE,OAAOP,8BAA8BO,OAAOR,kCAAkCQ;AAChF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/TagPickerGroup/TagPickerGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerGroup_unstable } from './useTagPickerGroup';\nimport type { TagPickerGroupProps } from './TagPickerGroup.types';\nimport { useTagGroupContextValues_unstable } from '@fluentui/react-tags';\nimport { renderTagPickerGroup_unstable } from './renderTagPickerGroup';\nimport { useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerGroup component -\n * A TagPickerGroup is a composite component that allows users to group tags together.\n */\nexport const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerGroup_unstable(props, ref);\n\n useTagPickerGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerGroupStyles_unstable')(state);\n return renderTagPickerGroup_unstable(state, useTagGroupContextValues_unstable(state));\n});\n\nTagPickerGroup.displayName = 'TagPickerGroup';\n"],"names":["React","useTagPickerGroup_unstable","useTagGroupContextValues_unstable","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useCustomStyleHook_unstable","TagPickerGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AAEjE,SAASC,iCAAiC,QAAQ,uBAAuB;AACzE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAChE,OAAOP,8BAA8BO,OAAOR,kCAAkCQ;AAChF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/TagPickerGroup/renderTagPickerGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerGroup/renderTagPickerGroup.ts"],"sourcesContent":["import { TagPickerGroupState } from './TagPickerGroup.types';\nimport { renderTagGroup_unstable, type TagGroupContextValues } from '@fluentui/react-tags';\n\nexport function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues) {\n if (!state.hasSelectedOptions) {\n return null;\n }\n\n return renderTagGroup_unstable(state, contexts);\n}\n"],"names":["renderTagGroup_unstable","renderTagPickerGroup_unstable","state","contexts","hasSelectedOptions"],"mappings":"~~AACA~~,SAASA,uBAAuB,QAAoC,uBAAuB;AAE3F,OAAO,SAASC,~~8BAA8BC~~,KAA0B,~~EAAEC~~,QAA+B;~~IACvG~~,IAAI,CAACD,MAAME,kBAAkB,EAAE;QAC7B,OAAO;IACT;IAEA,OAAOJ,wBAAwBE,OAAOC;AACxC"}
1	+ {"version":3,"sources":["../src/components/TagPickerGroup/renderTagPickerGroup.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport { TagPickerGroupState } from './TagPickerGroup.types';\nimport { renderTagGroup_unstable, type TagGroupContextValues } from '@fluentui/react-tags';\n\nexport function renderTagPickerGroup_unstable(\n state: TagPickerGroupState,\n contexts: TagGroupContextValues,\n): JSXElement \| null {\n if (!state.hasSelectedOptions) {\n return null;\n }\n\n return renderTagGroup_unstable(state, contexts);\n}\n"],"names":["renderTagGroup_unstable","renderTagPickerGroup_unstable","state","contexts","hasSelectedOptions"],"mappings":"AAEA,SAASA,uBAAuB,QAAoC,uBAAuB;AAE3F,OAAO,SAASC,8BACdC,KAA0B,EAC1BC,QAA+B;IAE/B,IAAI,CAACD,MAAME,kBAAkB,EAAE;QAC7B,OAAO;IACT;IAEA,OAAOJ,wBAAwBE,OAAOC;AACxC"}

package/lib/components/TagPickerGroup/useTagPickerGroup.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagGroup_unstable } from '@fluentui/react-tags';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';

package/lib/components/TagPickerGroup/useTagPickerGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroup.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { TagPickerGroupProps, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroup_unstable } from '@fluentui/react-tags';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ArrowRight } from '@fluentui/keyboard-keys';\n\n/*\n Create the state required to render TagPickerGroup.\n \n The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,\n * before being passed to renderPickerTagGroup_unstable.\n \n @param props - props from this instance of TagPickerGroup\n * @param ref - reference to root HTMLDivElement of TagPickerGroup\n */\nexport const useTagPickerGroup_unstable = (\n props: TagPickerGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerGroupState => {\n const hasSelectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n const hasOneSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length === 1);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const size = useTagPickerContext_unstable(ctx => tagPickerSizeToTagSize(ctx.size));\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: false,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const state = useTagGroup_unstable(\n {\n role: 'listbox',\n disabled,\n ...props,\n ...arrowNavigationProps,\n size,\n appearance: tagPickerAppearanceToTagAppearance(appearance),\n dismissible: true,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (isHTMLElement(event.target) && event.key === ArrowRight) {\n triggerRef.current?.focus();\n }\n }),\n onDismiss: useEventCallback((event, data) => {\n selectOption(event as React.MouseEvent<HTMLDivElement> \| React.KeyboardEvent<HTMLDivElement>, {\n value: data.value,\n // These values no longer exist because the option has unregistered itself\n // for the purposes of selection - these values aren't actually used\n id: 'ERROR_DO_NOT_USE',\n text: 'ERROR_DO_NOT_USE',\n });\n if (hasOneSelectedOption && !event.isDefaultPrevented()) {\n triggerRef.current?.focus();\n }\n }),\n },\n useMergedRefs(ref, tagPickerGroupRef),\n );\n\n return {\n ...state,\n hasSelectedOptions,\n };\n};\n"],"names":["React","useTagGroup_unstable","useTagPickerContext_unstable","isHTMLElement","useEventCallback","useMergedRefs","tagPickerAppearanceToTagAppearance","tagPickerSizeToTagSize","useArrowNavigationGroup","ArrowRight","useTagPickerGroup_unstable","props","ref","hasSelectedOptions","ctx","selectedOptions","length","hasOneSelectedOption","triggerRef","tagPickerGroupRef","selectOption","size","appearance","disabled","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC3F,SAASC,kCAAkC,EAAEC,sBAAsB,QAAQ,4BAA4B;AACvG,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,UAAU,QAAQ,0BAA0B;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,qBAAqBX,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,GAAG;IAC5F,MAAMC,uBAAuBf,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,KAAK;IAChG,MAAME,aAAahB,6BAA6BY,CAAAA,MAAOA,IAAII,UAAU;IACrE,MAAMC,oBAAoBjB,6BAA6BY,CAAAA,MAAOA,IAAIK,iBAAiB;IACnF,MAAMC,eAAelB,6BAA6BY,CAAAA,MAAOA,IAAIM,YAAY;IACzE,MAAMC,OAAOnB,6BAA6BY,CAAAA,MAAOP,uBAAuBO,IAAIO,IAAI;IAChF,MAAMC,aAAapB,6BAA6BY,CAAAA,MAAOA,IAAIQ,UAAU;IACrE,MAAMC,WAAWrB,6BAA6BY,CAAAA,MAAOA,IAAIS,QAAQ;IAEjE,MAAMC,uBAAuBhB,wBAAwB;QACnDiB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ3B,qBACZ;QACE4B,MAAM;QACNN;QACA,GAAGZ,KAAK;QACR,GAAGa,oBAAoB;QACvBH;QACAC,YAAYhB,mCAAmCgB;QAC/CQ,aAAa;QACbC,WAAW3B,iBAAiB4B,CAAAA;gBAC1BrB;aAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBqB;YAClB,IAAI7B,cAAc6B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKzB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;QACAC,WAAWjC,iBAAiB,CAAC4B,OAAOM;YAClClB,aAAaY,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIxB,wBAAwB,CAACe,MAAMU,kBAAkB,IAAI;oBACvDxB;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;IACF,GACA/B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGS,KAAK;QACRf;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagPickerGroupProps, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroup_unstable } from '@fluentui/react-tags';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ArrowRight } from '@fluentui/keyboard-keys';\n\n/*\n Create the state required to render TagPickerGroup.\n \n The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,\n * before being passed to renderPickerTagGroup_unstable.\n \n @param props - props from this instance of TagPickerGroup\n * @param ref - reference to root HTMLDivElement of TagPickerGroup\n */\nexport const useTagPickerGroup_unstable = (\n props: TagPickerGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerGroupState => {\n const hasSelectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n const hasOneSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length === 1);\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const size = useTagPickerContext_unstable(ctx => tagPickerSizeToTagSize(ctx.size));\n const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: false,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const state = useTagGroup_unstable(\n {\n role: 'listbox',\n disabled,\n ...props,\n ...arrowNavigationProps,\n size,\n appearance: tagPickerAppearanceToTagAppearance(appearance),\n dismissible: true,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (isHTMLElement(event.target) && event.key === ArrowRight) {\n triggerRef.current?.focus();\n }\n }),\n onDismiss: useEventCallback((event, data) => {\n selectOption(event as React.MouseEvent<HTMLDivElement> \| React.KeyboardEvent<HTMLDivElement>, {\n value: data.value,\n // These values no longer exist because the option has unregistered itself\n // for the purposes of selection - these values aren't actually used\n id: 'ERROR_DO_NOT_USE',\n text: 'ERROR_DO_NOT_USE',\n });\n if (hasOneSelectedOption && !event.isDefaultPrevented()) {\n triggerRef.current?.focus();\n }\n }),\n },\n useMergedRefs(ref, tagPickerGroupRef),\n );\n\n return {\n ...state,\n hasSelectedOptions,\n };\n};\n"],"names":["React","useTagGroup_unstable","useTagPickerContext_unstable","isHTMLElement","useEventCallback","useMergedRefs","tagPickerAppearanceToTagAppearance","tagPickerSizeToTagSize","useArrowNavigationGroup","ArrowRight","useTagPickerGroup_unstable","props","ref","hasSelectedOptions","ctx","selectedOptions","length","hasOneSelectedOption","triggerRef","tagPickerGroupRef","selectOption","size","appearance","disabled","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC3F,SAASC,kCAAkC,EAAEC,sBAAsB,QAAQ,4BAA4B;AACvG,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,UAAU,QAAQ,0BAA0B;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,qBAAqBX,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,GAAG;IAC5F,MAAMC,uBAAuBf,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,KAAK;IAChG,MAAME,aAAahB,6BAA6BY,CAAAA,MAAOA,IAAII,UAAU;IACrE,MAAMC,oBAAoBjB,6BAA6BY,CAAAA,MAAOA,IAAIK,iBAAiB;IACnF,MAAMC,eAAelB,6BAA6BY,CAAAA,MAAOA,IAAIM,YAAY;IACzE,MAAMC,OAAOnB,6BAA6BY,CAAAA,MAAOP,uBAAuBO,IAAIO,IAAI;IAChF,MAAMC,aAAapB,6BAA6BY,CAAAA,MAAOA,IAAIQ,UAAU;IACrE,MAAMC,WAAWrB,6BAA6BY,CAAAA,MAAOA,IAAIS,QAAQ;IAEjE,MAAMC,uBAAuBhB,wBAAwB;QACnDiB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ3B,qBACZ;QACE4B,MAAM;QACNN;QACA,GAAGZ,KAAK;QACR,GAAGa,oBAAoB;QACvBH;QACAC,YAAYhB,mCAAmCgB;QAC/CQ,aAAa;QACbC,WAAW3B,iBAAiB4B,CAAAA;gBAC1BrB;aAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBqB;YAClB,IAAI7B,cAAc6B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKzB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;QACAC,WAAWjC,iBAAiB,CAAC4B,OAAOM;YAClClB,aAAaY,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIxB,wBAAwB,CAACe,MAAMU,kBAAkB,IAAI;oBACvDxB;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;IACF,GACA/B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGS,KAAK;QACRf;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
 import { tokens } from '@fluentui/react-theme';

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

	@@ -1 +1 @@
1	- {"version":3,"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"],"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["~~import~~ { 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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACbtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACbtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
 import { tokens } from '@fluentui/react-theme';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["~~import~~ { 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,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,4BAA4B;AAEnE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,OAAOU,qBAAqB,CAAC,GAAG,EAAEV,OAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,OAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEAlB,2BAA2BkB;IAC3B,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,CAACjB,uBAAuBgB,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 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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,4BAA4B;AAEnE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,OAAOU,qBAAqB,CAAC,GAAG,EAAEV,OAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,OAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEAlB,2BAA2BkB;IAC3B,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,CAACjB,uBAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/TagPickerInput/TagPickerInput.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPickerInput_unstable } from './useTagPickerInput';
 import { renderTagPickerInput_unstable } from './renderTagPickerInput';

package/lib/components/TagPickerInput/TagPickerInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerInput_unstable } from './useTagPickerInput';\nimport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nimport { useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\nimport type { TagPickerInputProps } from './TagPickerInput.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerInput component -\n * A TagPickerInput is a composite component that allows users to query tags.\n */\nexport const TagPickerInput: ForwardRefComponent<TagPickerInputProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerInput_unstable(props, ref);\n\n useTagPickerInputStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerInputStyles_unstable')(state);\n\n return renderTagPickerInput_unstable(state);\n});\n\nTagPickerInput.displayName = 'TagPickerInput';\n"],"names":["React","useTagPickerInput_unstable","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useCustomStyleHook_unstable","TagPickerInput","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerInput_unstable } from './useTagPickerInput';\nimport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nimport { useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\nimport type { TagPickerInputProps } from './TagPickerInput.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerInput component -\n * A TagPickerInput is a composite component that allows users to query tags.\n */\nexport const TagPickerInput: ForwardRefComponent<TagPickerInputProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerInput_unstable(props, ref);\n\n useTagPickerInputStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerInputStyles_unstable')(state);\n\n return renderTagPickerInput_unstable(state);\n});\n\nTagPickerInput.displayName = 'TagPickerInput';\n"],"names":["React","useTagPickerInput_unstable","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useCustomStyleHook_unstable","TagPickerInput","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/TagPickerInput/renderTagPickerInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerInput/renderTagPickerInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerInputState, TagPickerInputSlots } from './TagPickerInput.types';\n\n/\n Render the final JSX of TagPickerInput\n */\nexport const renderTagPickerInput_unstable = (state: TagPickerInputState) => {\n assertSlots<TagPickerInputSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerInput_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAGxD~~;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerInput/renderTagPickerInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagPickerInputState, TagPickerInputSlots } from './TagPickerInput.types';\n\n/\n Render the final JSX of TagPickerInput\n */\nexport const renderTagPickerInput_unstable = (state: TagPickerInputState): JSXElement => {\n assertSlots<TagPickerInputSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerInput_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TagPickerInput/useTagPickerInput.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useActiveDescendantContext } from '@fluentui/react-aria';

package/lib/components/TagPickerInput/useTagPickerInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n useMergedRefs,\n getIntrinsicElementProps,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render TagPickerInput.\n \n The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n \n @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n /\nexport const useTagPickerInput_unstable = (\n propsArg: TagPickerInputProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n const props = useFieldControlProps_unstable(propsArg, {\n supportsLabelFor: true,\n supportsRequired: true,\n supportsSize: true,\n });\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n useIsomorphicLayoutEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n setTagPickerInputStretchStyle(triggerRef.current);\n }, [selectedOptions, triggerRef]);\n\n useIsomorphicLayoutEffect(() => {\n if (triggerRef.current) {\n const input = triggerRef.current;\n const cb = () => setTagPickerInputStretchStyle(input);\n input.addEventListener('input', cb);\n return () => {\n input.removeEventListener('input', cb);\n };\n }\n }, [triggerRef]);\n\n const { value = contextValue, disabled = contextDisabled } = props;\n const { findLastFocusable } = useFocusFinders();\n\n const isTypingRef = React.useRef(false);\n\n const root = useInputTriggerSlot(\n {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? popoverId : undefined,\n disabled,\n ...getIntrinsicElementProps('input', props),\n onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n props.onKeyDown?.(event);\n if (\n (event.key === ArrowLeft \|\| event.key === Backspace) &&\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd === 0 &&\n tagPickerGroupRef.current\n ) {\n findLastFocusable(tagPickerGroupRef.current)?.focus();\n } else if (event.key === Space) {\n if (open && !isTypingRef.current) {\n setOpen(event, false);\n }\n } else if (event.key === Enter) {\n if (open) {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n setOpen(event, false);\n });\n } else {\n setOpen(event, true);\n }\n }\n isTypingRef.current =\n event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n }),\n },\n useMergedRefs(triggerRef, ref),\n {\n activeDescendantController,\n freeform: false,\n state: {\n clearSelection,\n getOptionById,\n open,\n selectedOptions,\n selectOption,\n setHasFocus,\n setOpen,\n setValue,\n multiselect: true,\n value: props.value,\n },\n },\n );\n\n const state: TagPickerInputState = {\n components: {\n root: 'input',\n },\n root,\n disabled,\n size,\n };\n\n return state;\n};\n\n/\n while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n \n This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n \n @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n // first we need to remove the CSS variable\n // to properly calculate the difference between scrollWidth and offsetWidth\n input.style.removeProperty(tagPickerInputCSSRules.width);\n if (input.scrollWidth > input.offsetWidth + 1) {\n input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n } else {\n input.style.removeProperty(tagPickerInputCSSRules.width);\n }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInput_unstable","propsArg","ref","props","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","size","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","isTypingRef","useRef","root","type","onKeyDown","event","key","currentTarget","selectionStart","selectionEnd","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n useMergedRefs,\n getIntrinsicElementProps,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render TagPickerInput.\n \n The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n \n @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n /\nexport const useTagPickerInput_unstable = (\n propsArg: TagPickerInputProps,\n ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n const props = useFieldControlProps_unstable(propsArg, {\n supportsLabelFor: true,\n supportsRequired: true,\n supportsSize: true,\n });\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const size = useTagPickerContext_unstable(ctx => ctx.size);\n const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n useIsomorphicLayoutEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n setTagPickerInputStretchStyle(triggerRef.current);\n }, [selectedOptions, triggerRef]);\n\n useIsomorphicLayoutEffect(() => {\n if (triggerRef.current) {\n const input = triggerRef.current;\n const cb = () => setTagPickerInputStretchStyle(input);\n input.addEventListener('input', cb);\n return () => {\n input.removeEventListener('input', cb);\n };\n }\n }, [triggerRef]);\n\n const { value = contextValue, disabled = contextDisabled } = props;\n const { findLastFocusable } = useFocusFinders();\n\n const isTypingRef = React.useRef(false);\n\n const root = useInputTriggerSlot(\n {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? popoverId : undefined,\n disabled,\n ...getIntrinsicElementProps('input', props),\n onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n props.onKeyDown?.(event);\n if (\n (event.key === ArrowLeft \|\| event.key === Backspace) &&\n event.currentTarget.selectionStart === 0 &&\n event.currentTarget.selectionEnd === 0 &&\n tagPickerGroupRef.current\n ) {\n findLastFocusable(tagPickerGroupRef.current)?.focus();\n } else if (event.key === Space) {\n if (open && !isTypingRef.current) {\n setOpen(event, false);\n }\n } else if (event.key === Enter) {\n if (open) {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n setOpen(event, false);\n });\n } else {\n setOpen(event, true);\n }\n }\n isTypingRef.current =\n event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n }),\n },\n useMergedRefs(triggerRef, ref),\n {\n activeDescendantController,\n freeform: false,\n state: {\n clearSelection,\n getOptionById,\n open,\n selectedOptions,\n selectOption,\n setHasFocus,\n setOpen,\n setValue,\n multiselect: true,\n value: props.value,\n },\n },\n );\n\n const state: TagPickerInputState = {\n components: {\n root: 'input',\n },\n root,\n disabled,\n size,\n };\n\n return state;\n};\n\n/\n while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n \n This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n \n @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n // first we need to remove the CSS variable\n // to properly calculate the difference between scrollWidth and offsetWidth\n input.style.removeProperty(tagPickerInputCSSRules.width);\n if (input.scrollWidth > input.offsetWidth + 1) {\n input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n } else {\n input.style.removeProperty(tagPickerInputCSSRules.width);\n }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInput_unstable","propsArg","ref","props","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","size","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","isTypingRef","useRef","root","type","onKeyDown","event","key","currentTarget","selectionStart","selectionEnd","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

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

@@ -1,3 +1,5 @@
+'use client';
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { typographyStyles, tokens } from '@fluentui/react-theme';
 import { tagPickerInputTokens } from '../../utils/tokens';

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

	@@ -1 +1 @@
1	- {"version":3,"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"],"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["~~import~~ { 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"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGR,aAAA,8mBAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,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;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGR,aAAA,8mBAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,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;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { typographyStyles, tokens } from '@fluentui/react-theme';
 import { tagPickerInputTokens } from '../../utils/tokens';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["~~import~~ { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n boxSizing: 'border-box',\n\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/*\n Styles for the root slot\n /\nconst 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/\n Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n 'use no memo';\n\n const baseStyle = useBaseStyle();\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerInputClassNames.root,\n baseStyle,\n styles[state.size],\n state.disabled && styles.disabled,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,qBAAqB;AAE1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,eAAeR,gBAAgB;IACnCS,iBAAiBL,OAAOM,0BAA0B;IAClDC,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAYT,OAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,OAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,qBAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYzB,WAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,OAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,OAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,OAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,OAAO+B,8BAA8B;QAC5C1B,iBAAiBL,OAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,OAAO+B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACfY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n boxSizing: 'border-box',\n\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/*\n Styles for the root slot\n /\nconst 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/\n Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n 'use no memo';\n\n const baseStyle = useBaseStyle();\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerInputClassNames.root,\n baseStyle,\n styles[state.size],\n state.disabled && styles.disabled,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,qBAAqB;AAE1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,eAAeR,gBAAgB;IACnCS,iBAAiBL,OAAOM,0BAA0B;IAClDC,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAYT,OAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,OAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,qBAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYzB,WAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,OAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,OAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,OAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,OAAO+B,8BAA8B;QAC5C1B,iBAAiBL,OAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,OAAO+B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACfY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}

package/lib/components/TagPickerList/TagPickerList.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPickerList_unstable } from './useTagPickerList';
 import { renderTagPickerList_unstable } from './renderTagPickerList';

package/lib/components/TagPickerList/TagPickerList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerList/TagPickerList.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerList_unstable } from './useTagPickerList';\nimport { renderTagPickerList_unstable } from './renderTagPickerList';\nimport { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\nimport type { TagPickerListProps } from './TagPickerList.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerList component -\n * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.\n */\nexport const TagPickerList: ForwardRefComponent<TagPickerListProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerList_unstable(props, ref);\n\n useTagPickerListStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);\n return renderTagPickerList_unstable(state);\n});\n\nTagPickerList.displayName = 'TagPickerList';\n"],"names":["React","useTagPickerList_unstable","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useCustomStyleHook_unstable","TagPickerList","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAElF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,4BAA4B,mCAAmCK;IAC/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/TagPickerList/TagPickerList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerList_unstable } from './useTagPickerList';\nimport { renderTagPickerList_unstable } from './renderTagPickerList';\nimport { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\nimport type { TagPickerListProps } from './TagPickerList.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerList component -\n * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.\n */\nexport const TagPickerList: ForwardRefComponent<TagPickerListProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerList_unstable(props, ref);\n\n useTagPickerListStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);\n return renderTagPickerList_unstable(state);\n});\n\nTagPickerList.displayName = 'TagPickerList';\n"],"names":["React","useTagPickerList_unstable","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useCustomStyleHook_unstable","TagPickerList","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAElF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,4BAA4B,mCAAmCK;IAC/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/TagPickerList/renderTagPickerList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerList/renderTagPickerList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerListState, TagPickerListSlots } from './TagPickerList.types';\n\n/\n Render the final JSX of TagPickerList\n */\nexport const renderTagPickerList_unstable = (state: TagPickerListState) => {\n assertSlots<TagPickerListSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerList_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAGxD~~;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAChC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerList/renderTagPickerList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagPickerListState, TagPickerListSlots } from './TagPickerList.types';\n\n/\n Render the final JSX of TagPickerList\n */\nexport const renderTagPickerList_unstable = (state: TagPickerListState): JSXElement => {\n assertSlots<TagPickerListSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerList_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAChC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TagPickerList/useTagPickerList.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { Listbox } from '@fluentui/react-combobox';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';

package/lib/components/TagPickerList/useTagPickerList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerList/useTagPickerList.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/*\n Create the state required to render TagPickerList.\n \n The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n \n @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n props: TagPickerListProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n \| React.RefObject<HTMLInputElement>\n \| React.RefObject<HTMLButtonElement>;\n const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n return {\n open,\n components: {\n root: Listbox,\n },\n root: slot.always(\n {\n ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n state: { multiselect: true },\n triggerRef,\n defaultProps: { id: popoverId },\n }),\n role: 'listbox',\n },\n { elementType: Listbox },\n ),\n };\n};\n"],"names":["React","Listbox","useTagPickerContext_unstable","slot","useMergedRefs","useListboxSlot","useTagPickerList_unstable","props","ref","triggerRef","ctx","popoverRef","popoverId","open","components","root","always","state","multiselect","defaultProps","id","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,2BAA2B;AACnD,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,2BAA2B;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IAGrE,MAAME,aAAaT,6BAA6BQ,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,YAAYV,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS;IACnE,MAAMC,OAAOX,6BAA6BQ,CAAAA,MAAOA,IAAIG,IAAI;IAEzD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAMd;QACR;QACAc,MAAMZ,KAAKa,MAAM,CACf;YACE,GAAGX,eAAeE,OAAOH,cAAcO,YAAYH,MAAM;gBACvDS,OAAO;oBAAEC,aAAa;gBAAK;gBAC3BT;gBACAU,cAAc;oBAAEC,IAAIR;gBAAU;YAChC,EAAE;YACFS,MAAM;QACR,GACA;YAAEC,aAAarB;QAAQ;IAE3B;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerList/useTagPickerList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/*\n Create the state required to render TagPickerList.\n \n The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n \n @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n props: TagPickerListProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n \| React.RefObject<HTMLInputElement>\n \| React.RefObject<HTMLButtonElement>;\n const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n return {\n open,\n components: {\n root: Listbox,\n },\n root: slot.always(\n {\n ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n state: { multiselect: true },\n triggerRef,\n defaultProps: { id: popoverId },\n }),\n role: 'listbox',\n },\n { elementType: Listbox },\n ),\n };\n};\n"],"names":["React","Listbox","useTagPickerContext_unstable","slot","useMergedRefs","useListboxSlot","useTagPickerList_unstable","props","ref","triggerRef","ctx","popoverRef","popoverId","open","components","root","always","state","multiselect","defaultProps","id","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,2BAA2B;AACnD,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,2BAA2B;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IAGrE,MAAME,aAAaT,6BAA6BQ,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,YAAYV,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS;IACnE,MAAMC,OAAOX,6BAA6BQ,CAAAA,MAAOA,IAAIG,IAAI;IAEzD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAMd;QACR;QACAc,MAAMZ,KAAKa,MAAM,CACf;YACE,GAAGX,eAAeE,OAAOH,cAAcO,YAAYH,MAAM;gBACvDS,OAAO;oBAAEC,aAAa;gBAAK;gBAC3BT;gBACAU,cAAc;oBAAEC,IAAIR;gBAAU;YAChC,EAAE;YACFS,MAAM;QACR,GACA;YAAEC,aAAarB;QAAQ;IAE3B;AACF,EAAE"}

package/lib/components/TagPickerList/useTagPickerListStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tagPickerListClassNames = {

package/lib/components/TagPickerList/useTagPickerListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n root: 'fui-TagPickerList'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n collapsed: {\n display: 'none'\n }\n});\n/\n Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGpB,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACrI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n root: 'fui-TagPickerList'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box'\n },\n collapsed: {\n display: 'none'\n }\n});\n/\n Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGpB,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACrI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerList/useTagPickerListStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tagPickerListClassNames = {

package/lib/components/TagPickerList/useTagPickerListStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n root: 'fui-TagPickerList',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\n },\n\n collapsed: {\n display: 'none',\n },\n});\n\n/\n Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerListClassNames.root,\n styles.root,\n !state.open && styles.collapsed,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,OAAOK,QAAQ,EAAE;QAC/BC,cAAcN,OAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n root: 'fui-TagPickerList',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\n },\n\n collapsed: {\n display: 'none',\n },\n});\n\n/\n Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n tagPickerListClassNames.root,\n styles.root,\n !state.open && styles.collapsed,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,OAAOK,QAAQ,EAAE;QAC/BC,cAAcN,OAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}

package/lib/components/TagPickerOption/TagPickerOption.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPickerOption_unstable } from './useTagPickerOption';
 import { renderTagPickerOption_unstable } from './renderTagPickerOption';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOption_unstable } from './useTagPickerOption';\nimport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nimport { useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\nimport type { TagPickerOptionProps } from './TagPickerOption.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerOption component -\n * A TagPickerOption is a composite component that allows users to select tags.\n */\nexport const TagPickerOption: ForwardRefComponent<TagPickerOptionProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerOption_unstable(props, ref);\n\n useTagPickerOptionStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerOptionStyles_unstable')(state);\n return renderTagPickerOption_unstable(state);\n});\n\nTagPickerOption.displayName = 'TagPickerOption';\n"],"names":["React","useTagPickerOption_unstable","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useCustomStyleHook_unstable","TagPickerOption","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/TagPickerOption/TagPickerOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOption_unstable } from './useTagPickerOption';\nimport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nimport { useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\nimport type { TagPickerOptionProps } from './TagPickerOption.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n TagPickerOption component -\n * A TagPickerOption is a composite component that allows users to select tags.\n */\nexport const TagPickerOption: ForwardRefComponent<TagPickerOptionProps> = React.forwardRef((props, ref) => {\n const state = useTagPickerOption_unstable(props, ref);\n\n useTagPickerOptionStyles_unstable(state);\n useCustomStyleHook_unstable('useTagPickerOptionStyles_unstable')(state);\n return renderTagPickerOption_unstable(state);\n});\n\nTagPickerOption.displayName = 'TagPickerOption';\n"],"names":["React","useTagPickerOption_unstable","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useCustomStyleHook_unstable","TagPickerOption","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/TagPickerOption/renderTagPickerOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TagPickerOption/renderTagPickerOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerOptionState, TagPickerOptionSlots } from './TagPickerOption.types';\n\n/\n Render the final JSX of TagPickerOption\n */\nexport const renderTagPickerOption_unstable = (state: TagPickerOptionState) => {\n assertSlots<TagPickerOptionSlots>(state);\n\n return (\n <state.root>\n {state.media && <state.media />}\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTagPickerOption_unstable","state","root","media","children","secondaryContent"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAGxD~~;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;YACnBH,MAAMI,gBAAgB,kBAAI,KAACJ,MAAMI,gBAAgB;;;AAGxD,EAAE"}
1	+ {"version":3,"sources":["../src/components/TagPickerOption/renderTagPickerOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagPickerOptionState, TagPickerOptionSlots } from './TagPickerOption.types';\n\n/\n Render the final JSX of TagPickerOption\n */\nexport const renderTagPickerOption_unstable = (state: TagPickerOptionState): JSXElement => {\n assertSlots<TagPickerOptionSlots>(state);\n\n return (\n <state.root>\n {state.media && <state.media />}\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTagPickerOption_unstable","state","root","media","children","secondaryContent"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;YACnBH,MAAMI,gBAAgB,kBAAI,KAACJ,MAAMI,gBAAgB;;;AAGxD,EAAE"}

package/lib/components/TagPickerOption/useTagPickerOption.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
 import { useOption_unstable } from '@fluentui/react-combobox';