@fluentui/react-tag-picker 0.0.0-nightly-20240823-1802.1 → 0.0.0-nightly-20240827-0406.1
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.
- package/CHANGELOG.md +51 -22
- package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js +26 -26
- package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map +1 -1
- package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js +40 -40
- package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
- package/lib/components/TagPickerGroup/useTagPickerGroup.js +2 -0
- package/lib/components/TagPickerGroup/useTagPickerGroup.js.map +1 -1
- package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js +6 -6
- package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map +1 -1
- package/lib/components/TagPickerInput/useTagPickerInput.js +1 -1
- package/lib/components/TagPickerInput/useTagPickerInput.js.map +1 -1
- package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js +5 -5
- package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js.map +1 -1
- package/lib/components/TagPickerList/useTagPickerListStyles.styles.js +2 -2
- package/lib/components/TagPickerList/useTagPickerListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js +28 -33
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js +61 -68
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroup.js +2 -0
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroup.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js +6 -6
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js +14 -14
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js +2 -2
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js.map +1 -1
- package/package.json +19 -19
|
@@ -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","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","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: `var(--2213, var(--2214, ${tokens.borderRadiusMedium}))`,\n paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n paddingLeft: `var(--2215, var(--2216, ${tokens.spacingHorizontalM}))`,\n alignItems: 'center',\n columnGap: `var(--2217, var(--2218, ${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: `var(--2219, var(--2220, ${tokens.borderRadiusMedium}))`,\n borderBottomRightRadius: `var(--2221, var(--2222, ${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: `var(--2223, var(--2224, ${tokens.durationUltraFast}))`,\n transitionDelay: `var(--2225, var(--2226, ${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: `var(--2227, var(--2228, ${tokens.durationNormal}))`,\n transitionDelay: `var(--2229, var(--2230, ${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: `var(--2231, var(--2232, ${tokens.colorCompoundBrandStrokePressed}))`\n }\n },\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n borderRadius: `var(--2233, var(--2234, ${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: `var(--2235, var(--2236, ${tokens.colorNeutralBackground1}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: `var(--2237, var(--2238, ${tokens.colorNeutralStrokeAccessible}))`\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: `var(--2239, var(--2240, ${tokens.colorNeutralStrokeAccessible}))`\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: `var(--2241, var(--2242, ${tokens.colorNeutralStrokeAccessible}))`\n }\n },\n underline: {\n backgroundColor: `var(--2243, var(--2244, ${tokens.colorTransparentBackground}))`,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: `var(--2245, var(--2246, ${tokens.colorNeutralBackground1}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n },\n 'filled-darker': {\n backgroundColor: `var(--2247, var(--2248, ${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: `var(--2249, var(--2250, ${tokens.colorPaletteRedBorder2}))`\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: `var(--2251, var(--2252, ${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: 'grid',\n alignItems: 'center',\n position: 'absolute',\n top: '0',\n right: `var(--2253, var(--2254, ${tokens.spacingHorizontalM}))`,\n gridTemplateColumns: 'repeat(2, auto)',\n gridTemplateRows: 'minmax(32px, auto) 1fr',\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: `var(--2255, var(--2256, ${tokens.colorNeutralStrokeAccessible}))`,\n cursor: 'pointer',\n display: 'block',\n fontSize: `var(--2257, var(--2258, ${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: `var(--2259, var(--2260, ${tokens.spacingHorizontalXXS}))`\n },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: `var(--2261, var(--2262, ${tokens.spacingHorizontalXXS}))`\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: `var(--2263, var(--2264, ${tokens.spacingHorizontalSNudge}))`\n },\n disabled: {\n color: `var(--2265, var(--2266, ${tokens.colorNeutralForegroundDisabled}))`,\n cursor: 'not-allowed'\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 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, state.secondaryAction.className);\n }\n return state;\n};\n"],"mappings":"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","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","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","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.colorNeutralStrokeAccessible\n },\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0'\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${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: 'grid',\n alignItems: 'center',\n position: 'absolute',\n top: '0',\n right: tokens.spacingHorizontalM,\n gridTemplateColumns: 'repeat(2, auto)',\n gridTemplateRows: 'minmax(32px, auto) 1fr',\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: 'block',\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 },\n large: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS\n },\n 'extra-large': {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed'\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 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, 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;EAAA;EAAAC,SAAA;IAAA3B,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;EAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAAC,OAAA;IAAAnC,MAAA;IAAAc,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;IAAA8B,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,CAwHrB,CAAC;AACF,MAAMC,cAAc,gBAAG7G,QAAA;EAAAK,IAAA;IAAAgB,MAAA;IAAAH,OAAA;IAAAK,MAAA;IAAAuF,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAhB,OAAA;EAAA;EAAAvC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAA2C,CAAA;AAAA,CAsBtB,CAAC;AACF,OAAO,MAAMY,SAAS,GAAG;EACrBC,KAAK,EAAE,MAAM;EACbzD,MAAM,EAAE,MAAM;EACdE,KAAK,EAAE;AACX,CAAC;AACD,MAAMwD,aAAa,gBAAGrH,QAAA;EAAAsH,IAAA;IAAAlG,OAAA;IAAAmG,MAAA;IAAArB,OAAA;IAAA7E,MAAA;IAAAmG,OAAA;IAAAC,OAAA;EAAA;EAAA9D,MAAA;IAAA6D,OAAA;IAAAE,MAAA;EAAA;EAAA7D,KAAA;IAAA2D,OAAA;IAAAE,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAE,MAAA;EAAA;EAAAzB,QAAA;IAAAsB,MAAA;IAAArB,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CA8BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoB,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGnH,SAAS,CAAC,CAAC;EAC1B,MAAMoH,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,WAAW,GAAGlB,cAAc,CAAC,CAAC;EACpCe,KAAK,CAACvH,IAAI,CAAC2H,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACC,IAAI,EAAEwH,MAAM,CAACxH,IAAI,EAAEwH,MAAM,CAACD,KAAK,CAACK,IAAI,CAAC,EAAEJ,MAAM,CAACD,KAAK,CAACM,UAAU,CAAC,EAAE,CAACN,KAAK,CAAC3B,QAAQ,IAAI2B,KAAK,CAACM,UAAU,KAAK,SAAS,IAAIL,MAAM,CAAC5C,kBAAkB,EAAE2C,KAAK,CAACjC,OAAO,IAAIiC,KAAK,CAACM,UAAU,KAAK,WAAW,IAAIL,MAAM,CAAClC,OAAO,EAAEiC,KAAK,CAACjC,OAAO,IAAIiC,KAAK,CAACM,UAAU,KAAK,WAAW,IAAIL,MAAM,CAAC7B,gBAAgB,EAAE4B,KAAK,CAAC3B,QAAQ,IAAI4B,MAAM,CAAC5B,QAAQ,EAAE2B,KAAK,CAACvH,IAAI,CAAC2H,SAAS,CAAC;EAC3Z,IAAIJ,KAAK,CAACpH,KAAK,EAAE;IACboH,KAAK,CAACpH,KAAK,CAACwH,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACI,KAAK,EAAEuH,WAAW,CAAC1H,IAAI,EAAE0H,WAAW,CAACH,KAAK,CAACK,IAAI,CAAC,EAAEL,KAAK,CAACpH,KAAK,CAACwH,SAAS,CAAC;EAC5I;EACA,IAAIJ,KAAK,CAACtH,UAAU,EAAE;IAClBsH,KAAK,CAACtH,UAAU,CAAC0H,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACE,UAAU,EAAEwH,UAAU,CAACR,IAAI,EAAEQ,UAAU,CAACF,KAAK,CAACK,IAAI,CAAC,EAAEL,KAAK,CAAC3B,QAAQ,IAAI6B,UAAU,CAAC7B,QAAQ,EAAE2B,KAAK,CAACtH,UAAU,CAAC0H,SAAS,CAAC;EAChM;EACA,IAAIJ,KAAK,CAACrH,eAAe,EAAE;IACvBqH,KAAK,CAACrH,eAAe,CAACyH,SAAS,GAAG/H,YAAY,CAACG,0BAA0B,CAACG,eAAe,EAAEqH,KAAK,CAACrH,eAAe,CAACyH,SAAS,CAAC;EAC/H;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -21,6 +21,7 @@ import { ArrowRight } from '@fluentui/keyboard-keys';
|
|
|
21
21
|
const selectOption = useTagPickerContext_unstable((ctx)=>ctx.selectOption);
|
|
22
22
|
const size = useTagPickerContext_unstable((ctx)=>tagPickerSizeToTagSize(ctx.size));
|
|
23
23
|
const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);
|
|
24
|
+
const disabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);
|
|
24
25
|
const arrowNavigationProps = useArrowNavigationGroup({
|
|
25
26
|
circular: false,
|
|
26
27
|
axis: 'both',
|
|
@@ -28,6 +29,7 @@ import { ArrowRight } from '@fluentui/keyboard-keys';
|
|
|
28
29
|
});
|
|
29
30
|
const state = useTagGroup_unstable({
|
|
30
31
|
role: 'listbox',
|
|
32
|
+
disabled,
|
|
31
33
|
...props,
|
|
32
34
|
...arrowNavigationProps,
|
|
33
35
|
size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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\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 ...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","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}
|
|
@@ -22,7 +22,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
22
22
|
B0ocmuz: "fa2pw7h",
|
|
23
23
|
i8kkvl: 0,
|
|
24
24
|
Belr9w4: 0,
|
|
25
|
-
rmohyg: "
|
|
25
|
+
rmohyg: "fkln5zr"
|
|
26
26
|
},
|
|
27
27
|
large: {
|
|
28
28
|
Byoj8tv: 0,
|
|
@@ -32,7 +32,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
32
32
|
B0ocmuz: "fc0zr7g",
|
|
33
33
|
i8kkvl: 0,
|
|
34
34
|
Belr9w4: 0,
|
|
35
|
-
rmohyg: "
|
|
35
|
+
rmohyg: "f1eyhf9v"
|
|
36
36
|
},
|
|
37
37
|
"extra-large": {
|
|
38
38
|
Byoj8tv: 0,
|
|
@@ -42,20 +42,20 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
42
42
|
B0ocmuz: "fc0zr7g",
|
|
43
43
|
i8kkvl: 0,
|
|
44
44
|
Belr9w4: 0,
|
|
45
|
-
rmohyg: "
|
|
45
|
+
rmohyg: "f1eyhf9v"
|
|
46
46
|
}
|
|
47
47
|
}, {
|
|
48
48
|
d: [".fni485r{flex-wrap:wrap;}", ".f1ewtqcl{box-sizing:border-box;}", ".f113hnb5{cursor:text;}", [".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}", {
|
|
49
49
|
p: -1
|
|
50
|
-
}], [".
|
|
50
|
+
}], [".fkln5zr{gap:var(--spacingHorizontalXS);}", {
|
|
51
51
|
p: -1
|
|
52
52
|
}], [".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}", {
|
|
53
53
|
p: -1
|
|
54
|
-
}], [".
|
|
54
|
+
}], [".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}", {
|
|
55
55
|
p: -1
|
|
56
56
|
}], [".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}", {
|
|
57
57
|
p: -1
|
|
58
|
-
}], [".
|
|
58
|
+
}], [".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}", {
|
|
59
59
|
p: -1
|
|
60
60
|
}]]
|
|
61
61
|
});
|
|
@@ -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:
|
|
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":[]}
|
|
@@ -70,7 +70,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
|
|
|
70
70
|
onKeyDown: useEventCallback((event)=>{
|
|
71
71
|
var _props_onKeyDown;
|
|
72
72
|
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
|
|
73
|
-
if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && tagPickerGroupRef.current) {
|
|
73
|
+
if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0 && tagPickerGroupRef.current) {
|
|
74
74
|
var _findLastFocusable;
|
|
75
75
|
(_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
|
|
76
76
|
} else if (event.key === Space) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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 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","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { tagPickerInputTokens } from '../../utils/tokens';
|
|
|
4
4
|
export const tagPickerInputClassNames = {
|
|
5
5
|
root: 'fui-TagPickerInput'
|
|
6
6
|
};
|
|
7
|
-
const useBaseStyle = /*#__PURE__*/__resetStyles("
|
|
7
|
+
const useBaseStyle = /*#__PURE__*/__resetStyles("r1hdk6fw", null, [".r1hdk6fw{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border:none;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}", ".r1hdk6fw:focus{outline-style:none;}", ".r1hdk6fw::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r1hdk6fw::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r1hdk6fw::placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r1hdk6fw::after{visibility:hidden;white-space:pre-wrap;}"]);
|
|
8
8
|
/**
|
|
9
9
|
* Styles for the root slot
|
|
10
10
|
*/
|
|
@@ -43,10 +43,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
43
43
|
B0ocmuz: "f3abo53"
|
|
44
44
|
},
|
|
45
45
|
disabled: {
|
|
46
|
-
sj55zd: "
|
|
47
|
-
De3pzq: "
|
|
46
|
+
sj55zd: "f1s2aq7o",
|
|
47
|
+
De3pzq: "f1c21dwh",
|
|
48
48
|
Bceei9c: "fdrzuqr",
|
|
49
|
-
yvdlaj: "
|
|
49
|
+
yvdlaj: "fahhnxm"
|
|
50
50
|
}
|
|
51
51
|
}, {
|
|
52
52
|
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}", {
|
|
@@ -55,7 +55,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
55
55
|
p: -1
|
|
56
56
|
}], [".f3abo53{padding:var(--spacingVerticalM) 0 var(--spacingVerticalM) 0;}", {
|
|
57
57
|
p: -1
|
|
58
|
-
}], ".
|
|
58
|
+
}], ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"]
|
|
59
59
|
});
|
|
60
60
|
/**
|
|
61
61
|
* Apply styling to the TagPickerInput slots based on the state
|
|
@@ -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:
|
|
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":[]}
|
|
@@ -13,7 +13,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
13
13
|
Bbmb7ep: 0,
|
|
14
14
|
Btl43ni: 0,
|
|
15
15
|
B7oj6ja: 0,
|
|
16
|
-
Dimara: "
|
|
16
|
+
Dimara: "ft85np5",
|
|
17
17
|
Bxyxcbc: "fmmk62d",
|
|
18
18
|
B7ck84d: "f1ewtqcl"
|
|
19
19
|
},
|
|
@@ -21,7 +21,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
21
21
|
mc9l5x: "fjseox"
|
|
22
22
|
}
|
|
23
23
|
}, {
|
|
24
|
-
d: [".f1hg901r{box-shadow:var(--shadow16);}", [".
|
|
24
|
+
d: [".f1hg901r{box-shadow:var(--shadow16);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
25
25
|
p: -1
|
|
26
26
|
}], ".fmmk62d{max-height:80vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".fjseox{display:none;}"]
|
|
27
27
|
});
|
|
@@ -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:
|
|
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":[]}
|
|
@@ -26,7 +26,7 @@ const tagPickerButtonClassNames = {
|
|
|
26
26
|
button: {
|
|
27
27
|
Bt984gj: "f122n59",
|
|
28
28
|
sshi5w: "f1nxs5xn",
|
|
29
|
-
De3pzq: "
|
|
29
|
+
De3pzq: "f1c21dwh",
|
|
30
30
|
Bgfg5da: 0,
|
|
31
31
|
B9xav0g: 0,
|
|
32
32
|
oivjwe: 0,
|
|
@@ -45,10 +45,10 @@ const tagPickerButtonClassNames = {
|
|
|
45
45
|
B4j52fo: 0,
|
|
46
46
|
irswps: "f3bhgqh",
|
|
47
47
|
B7ck84d: "f1ewtqcl",
|
|
48
|
-
sj55zd: "
|
|
49
|
-
i8kkvl: "
|
|
48
|
+
sj55zd: "f19n0e5",
|
|
49
|
+
i8kkvl: "f14mj54c",
|
|
50
50
|
Bceei9c: "f1k6fduh",
|
|
51
|
-
Bahqtrf: "
|
|
51
|
+
Bahqtrf: "fk6fouc",
|
|
52
52
|
fsow6f: [
|
|
53
53
|
"f1o700av",
|
|
54
54
|
"fes3tcz"
|
|
@@ -57,7 +57,7 @@ const tagPickerButtonClassNames = {
|
|
|
57
57
|
Brovlpu: "ftqa4ok"
|
|
58
58
|
},
|
|
59
59
|
placeholder: {
|
|
60
|
-
sj55zd: "
|
|
60
|
+
sj55zd: "fxc4j92"
|
|
61
61
|
},
|
|
62
62
|
medium: {
|
|
63
63
|
Bahqtrf: "fk6fouc",
|
|
@@ -88,7 +88,7 @@ const tagPickerButtonClassNames = {
|
|
|
88
88
|
]
|
|
89
89
|
},
|
|
90
90
|
"extra-large": {
|
|
91
|
-
i8kkvl: "
|
|
91
|
+
i8kkvl: "f1rjii52",
|
|
92
92
|
Bahqtrf: "fk6fouc",
|
|
93
93
|
Be2twd7: "fod5ikn",
|
|
94
94
|
Bhrd7zp: "figsok6",
|
|
@@ -103,9 +103,9 @@ const tagPickerButtonClassNames = {
|
|
|
103
103
|
]
|
|
104
104
|
},
|
|
105
105
|
outline: {
|
|
106
|
-
De3pzq: "
|
|
106
|
+
De3pzq: "fxugw4r",
|
|
107
107
|
Bgfg5da: 0,
|
|
108
|
-
B9xav0g: "
|
|
108
|
+
B9xav0g: "f1c1zstj",
|
|
109
109
|
oivjwe: 0,
|
|
110
110
|
Bn0qgzm: 0,
|
|
111
111
|
B4g9neb: 0,
|
|
@@ -128,7 +128,7 @@ const tagPickerButtonClassNames = {
|
|
|
128
128
|
"f1ub3y4t",
|
|
129
129
|
"f1m52nbi"
|
|
130
130
|
],
|
|
131
|
-
oetu4i: "
|
|
131
|
+
oetu4i: "flmw63s",
|
|
132
132
|
gg5e9n: [
|
|
133
133
|
"f1m52nbi",
|
|
134
134
|
"f1ub3y4t"
|
|
@@ -138,14 +138,14 @@ const tagPickerButtonClassNames = {
|
|
|
138
138
|
"f1assf6x",
|
|
139
139
|
"f4ruux4"
|
|
140
140
|
],
|
|
141
|
-
wmxk5l: "
|
|
141
|
+
wmxk5l: "fqhmt4z",
|
|
142
142
|
B50zh58: [
|
|
143
143
|
"f4ruux4",
|
|
144
144
|
"f1assf6x"
|
|
145
145
|
]
|
|
146
146
|
},
|
|
147
147
|
underline: {
|
|
148
|
-
De3pzq: "
|
|
148
|
+
De3pzq: "f1c21dwh",
|
|
149
149
|
B9xav0g: 0,
|
|
150
150
|
oivjwe: 0,
|
|
151
151
|
Bn0qgzm: 0,
|
|
@@ -157,7 +157,7 @@ const tagPickerButtonClassNames = {
|
|
|
157
157
|
Dimara: "fokr779"
|
|
158
158
|
},
|
|
159
159
|
"filled-lighter": {
|
|
160
|
-
De3pzq: "
|
|
160
|
+
De3pzq: "fxugw4r",
|
|
161
161
|
Bgfg5da: 0,
|
|
162
162
|
B9xav0g: 0,
|
|
163
163
|
oivjwe: 0,
|
|
@@ -177,7 +177,7 @@ const tagPickerButtonClassNames = {
|
|
|
177
177
|
irswps: "fs2rfia"
|
|
178
178
|
},
|
|
179
179
|
"filled-darker": {
|
|
180
|
-
De3pzq: "
|
|
180
|
+
De3pzq: "f16xq7d1",
|
|
181
181
|
Bgfg5da: 0,
|
|
182
182
|
B9xav0g: 0,
|
|
183
183
|
oivjwe: 0,
|
|
@@ -209,11 +209,11 @@ const tagPickerButtonClassNames = {
|
|
|
209
209
|
]
|
|
210
210
|
},
|
|
211
211
|
invalidUnderline: {
|
|
212
|
-
hhx65j: "
|
|
212
|
+
hhx65j: "f1fgmyf4"
|
|
213
213
|
},
|
|
214
214
|
disabled: {
|
|
215
215
|
Bceei9c: "fdrzuqr",
|
|
216
|
-
De3pzq: "
|
|
216
|
+
De3pzq: "f1c21dwh",
|
|
217
217
|
g2u3we: "f1jj8ep1",
|
|
218
218
|
h3c5rm: [
|
|
219
219
|
"f15xbau",
|
|
@@ -236,7 +236,7 @@ const tagPickerButtonClassNames = {
|
|
|
236
236
|
]
|
|
237
237
|
},
|
|
238
238
|
disabledText: {
|
|
239
|
-
sj55zd: "
|
|
239
|
+
sj55zd: "f1s2aq7o",
|
|
240
240
|
Bceei9c: "fdrzuqr"
|
|
241
241
|
},
|
|
242
242
|
hidden: {
|
|
@@ -265,7 +265,7 @@ const tagPickerButtonClassNames = {
|
|
|
265
265
|
d: [
|
|
266
266
|
".f122n59{align-items:center;}",
|
|
267
267
|
".f1nxs5xn{min-height:32px;}",
|
|
268
|
-
".
|
|
268
|
+
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
|
|
269
269
|
[
|
|
270
270
|
".f3bhgqh{border:none;}",
|
|
271
271
|
{
|
|
@@ -273,15 +273,14 @@ const tagPickerButtonClassNames = {
|
|
|
273
273
|
}
|
|
274
274
|
],
|
|
275
275
|
".f1ewtqcl{box-sizing:border-box;}",
|
|
276
|
-
".
|
|
277
|
-
".
|
|
276
|
+
".f19n0e5{color:var(--colorNeutralForeground1);}",
|
|
277
|
+
".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
|
|
278
278
|
".f1k6fduh{cursor:pointer;}",
|
|
279
|
-
".
|
|
279
|
+
".fk6fouc{font-family:var(--fontFamilyBase);}",
|
|
280
280
|
".f1o700av{text-align:left;}",
|
|
281
281
|
".fes3tcz{text-align:right;}",
|
|
282
282
|
".fqerorx{flex-grow:1;}",
|
|
283
|
-
".
|
|
284
|
-
".fk6fouc{font-family:var(--fontFamilyBase);}",
|
|
283
|
+
".fxc4j92{color:var(--colorNeutralForeground4);}",
|
|
285
284
|
".fy9rknc{font-size:var(--fontSizeBase200);}",
|
|
286
285
|
".figsok6{font-weight:var(--fontWeightRegular);}",
|
|
287
286
|
".fwrc4pm{line-height:var(--lineHeightBase200);}",
|
|
@@ -311,7 +310,7 @@ const tagPickerButtonClassNames = {
|
|
|
311
310
|
p: -1
|
|
312
311
|
}
|
|
313
312
|
],
|
|
314
|
-
".
|
|
313
|
+
".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
|
|
315
314
|
".fod5ikn{font-size:var(--fontSizeBase400);}",
|
|
316
315
|
".faaz57k{line-height:var(--lineHeightBase400);}",
|
|
317
316
|
[
|
|
@@ -326,15 +325,14 @@ const tagPickerButtonClassNames = {
|
|
|
326
325
|
p: -1
|
|
327
326
|
}
|
|
328
327
|
],
|
|
329
|
-
".
|
|
328
|
+
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
|
|
330
329
|
[
|
|
331
330
|
".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
|
|
332
331
|
{
|
|
333
332
|
p: -2
|
|
334
333
|
}
|
|
335
334
|
],
|
|
336
|
-
".
|
|
337
|
-
".f3t6axo{background-color:var(--2201, var(--2202, var(--colorTransparentBackground)));}",
|
|
335
|
+
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
|
|
338
336
|
[
|
|
339
337
|
".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
|
|
340
338
|
{
|
|
@@ -347,14 +345,13 @@ const tagPickerButtonClassNames = {
|
|
|
347
345
|
p: -1
|
|
348
346
|
}
|
|
349
347
|
],
|
|
350
|
-
".fgp9vqk{background-color:var(--2203, var(--2204, var(--colorNeutralBackground1)));}",
|
|
351
348
|
[
|
|
352
349
|
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
|
|
353
350
|
{
|
|
354
351
|
p: -2
|
|
355
352
|
}
|
|
356
353
|
],
|
|
357
|
-
".
|
|
354
|
+
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
|
|
358
355
|
[
|
|
359
356
|
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
|
|
360
357
|
{
|
|
@@ -365,14 +362,12 @@ const tagPickerButtonClassNames = {
|
|
|
365
362
|
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
|
|
366
363
|
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
|
|
367
364
|
".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
|
|
368
|
-
".fmvjrdq:not(:focus-within),.fmvjrdq:hover:not(:focus-within){border-bottom-color:var(--2207, var(--2208, var(--colorPaletteRedBorder2)));}",
|
|
369
365
|
".fdrzuqr{cursor:not-allowed;}",
|
|
370
|
-
".f1ada8tb{background-color:var(--2209, var(--2210, var(--colorTransparentBackground)));}",
|
|
371
366
|
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
|
|
372
367
|
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
|
|
373
368
|
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
|
|
374
369
|
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
|
|
375
|
-
".
|
|
370
|
+
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
376
371
|
".fjseox{display:none;}",
|
|
377
372
|
".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}",
|
|
378
373
|
".f1mpe4l3{height:1px;}",
|
|
@@ -404,13 +399,13 @@ const tagPickerButtonClassNames = {
|
|
|
404
399
|
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
|
|
405
400
|
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
|
|
406
401
|
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
|
|
407
|
-
".
|
|
402
|
+
".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
|
|
408
403
|
],
|
|
409
404
|
a: [
|
|
410
405
|
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
|
|
411
406
|
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
|
|
412
407
|
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
|
|
413
|
-
".
|
|
408
|
+
".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
|
|
414
409
|
],
|
|
415
410
|
m: [
|
|
416
411
|
[
|