@fluentui/react-tag-picker 0.0.0-nightly-20240822-1237.1 → 0.0.0-nightly-20240823-1802.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 +22 -51
- 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 +0 -2
- 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/components/TagPickerOption/useTagPickerOption.js +0 -1
- package/lib/components/TagPickerOption/useTagPickerOption.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js +33 -28
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js +68 -61
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroup.js +0 -2
- 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/lib-commonjs/components/TagPickerOption/useTagPickerOption.js +0 -1
- package/lib-commonjs/components/TagPickerOption/useTagPickerOption.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: 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":"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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: `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":[]}
|
|
@@ -21,7 +21,6 @@ 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);
|
|
25
24
|
const arrowNavigationProps = useArrowNavigationGroup({
|
|
26
25
|
circular: false,
|
|
27
26
|
axis: 'both',
|
|
@@ -29,7 +28,6 @@ import { ArrowRight } from '@fluentui/keyboard-keys';
|
|
|
29
28
|
});
|
|
30
29
|
const state = useTagGroup_unstable({
|
|
31
30
|
role: 'listbox',
|
|
32
|
-
disabled,
|
|
33
31
|
...props,
|
|
34
32
|
...arrowNavigationProps,
|
|
35
33
|
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
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;IAErE,MAAMC,uBAAuBf,wBAAwB;QACnDgB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ1B,qBACZ;QACE2B,MAAM;QACN,GAAGjB,KAAK;QACR,GAAGY,oBAAoB;QACvBF;QACAC,YAAYhB,mCAAmCgB;QAC/CO,aAAa;QACbC,WAAW1B,iBAAiB2B,CAAAA;gBAC1BpB;aAAAA,mBAAAA,MAAMmB,SAAS,cAAfnB,uCAAAA,sBAAAA,OAAkBoB;YAClB,IAAI5B,cAAc4B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKxB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;YAC3B;QACF;QACAC,WAAWhC,iBAAiB,CAAC2B,OAAOM;YAClCjB,aAAaW,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIvB,wBAAwB,CAACc,MAAMU,kBAAkB,IAAI;oBACvDvB;iBAAAA,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;YAC3B;QACF;IACF,GACA9B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGQ,KAAK;QACRd;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: "f1dxo8ud"
|
|
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: "f19sr1rh"
|
|
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: "fowfqnk"
|
|
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
|
+
}], [".f1dxo8ud{gap:var(--2267, var(--2268, var(--spacingHorizontalXS)));}", {
|
|
51
51
|
p: -1
|
|
52
52
|
}], [".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}", {
|
|
53
53
|
p: -1
|
|
54
|
-
}], [".
|
|
54
|
+
}], [".f19sr1rh{gap:var(--2269, var(--2270, var(--spacingHorizontalSNudge)));}", {
|
|
55
55
|
p: -1
|
|
56
56
|
}], [".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}", {
|
|
57
57
|
p: -1
|
|
58
|
-
}], [".
|
|
58
|
+
}], [".fowfqnk{gap:var(--2271, var(--2272, 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: tokens.spacingHorizontalXS
|
|
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: `var(--2267, var(--2268, ${tokens.spacingHorizontalXS}))`\n },\n large: {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: `var(--2269, var(--2270, ${tokens.spacingHorizontalSNudge}))`\n },\n 'extra-large': {\n padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n gap: `var(--2271, var(--2272, ${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 &&
|
|
73
|
+
if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 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 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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"}
|
|
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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"}
|
|
@@ -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("r4o7j4p", null, [".r4o7j4p{background-color:var(--2273, var(--2274, var(--colorTransparentBackground)));color:var(--2275, var(--2276, var(--colorNeutralForeground1)));font-family:var(--2277, var(--2278, var(--fontFamilyBase)));box-sizing:border-box;border:none;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}", ".r4o7j4p:focus{outline-style:none;}", ".r4o7j4p::-webkit-input-placeholder{color:var(--2279, var(--2280, var(--colorNeutralForeground4)));opacity:1;}", ".r4o7j4p::-moz-placeholder{color:var(--2279, var(--2280, var(--colorNeutralForeground4)));opacity:1;}", ".r4o7j4p::placeholder{color:var(--2279, var(--2280, var(--colorNeutralForeground4)));opacity:1;}", ".r4o7j4p::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: "fy1a2v8",
|
|
47
|
+
De3pzq: "fqj8v94",
|
|
48
48
|
Bceei9c: "fdrzuqr",
|
|
49
|
-
yvdlaj: "
|
|
49
|
+
yvdlaj: "f5cg1qs"
|
|
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
|
+
}], ".fy1a2v8{color:var(--2281, var(--2282, var(--colorNeutralForegroundDisabled)));}", ".fqj8v94{background-color:var(--2283, var(--2284, var(--colorTransparentBackground)));}", ".fdrzuqr{cursor:not-allowed;}", ".f5cg1qs::-webkit-input-placeholder{color:var(--2285, var(--2286, var(--colorNeutralForegroundDisabled)));}", ".f5cg1qs::-moz-placeholder{color:var(--2285, var(--2286, 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: tokens.colorTransparentBackground
|
|
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: `var(--2273, var(--2274, ${tokens.colorTransparentBackground}))`,\n color: `var(--2275, var(--2276, ${tokens.colorNeutralForeground1}))`,\n fontFamily: `var(--2277, var(--2278, ${tokens.fontFamilyBase}))`,\n boxSizing: 'border-box',\n '&:focus': {\n outlineStyle: 'none'\n },\n '&::placeholder': {\n color: `var(--2279, var(--2280, ${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: `var(--2281, var(--2282, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: `var(--2283, var(--2284, ${tokens.colorTransparentBackground}))`,\n cursor: 'not-allowed',\n '::placeholder': {\n color: `var(--2285, var(--2286, ${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,mwBAwBpB,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: "fkb81lo",
|
|
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);}", [".fkb81lo{border-radius:var(--2287, var(--2288, 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: tokens.borderRadiusMedium
|
|
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: `var(--2287, var(--2288, ${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":[]}
|
|
@@ -13,7 +13,6 @@ import { useOption_unstable } from '@fluentui/react-combobox';
|
|
|
13
13
|
const optionState = useOption_unstable(props, ref);
|
|
14
14
|
const state = {
|
|
15
15
|
components: {
|
|
16
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
17
16
|
...optionState.components,
|
|
18
17
|
media: 'div',
|
|
19
18
|
secondaryContent: 'span'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTagPickerOption.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n props: TagPickerOptionProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n const optionState = useOption_unstable(props, ref);\n const state: TagPickerOptionState = {\n components: {\n
|
|
1
|
+
{"version":3,"sources":["useTagPickerOption.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n props: TagPickerOptionProps,\n ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n const optionState = useOption_unstable(props, ref);\n const state: TagPickerOptionState = {\n components: {\n ...optionState.components,\n media: 'div',\n secondaryContent: 'span',\n },\n media: slot.optional(props.media, {\n elementType: 'div',\n }),\n secondaryContent: slot.optional(props.secondaryContent, {\n elementType: 'span',\n }),\n root: slot.always(\n { ...optionState.root, role: 'option', 'aria-checked': props['aria-checked'] },\n {\n elementType: 'div',\n },\n ),\n };\n\n return state;\n};\n"],"names":["React","slot","useOption_unstable","useTagPickerOption_unstable","props","ref","optionState","state","components","media","secondaryContent","optional","elementType","root","always","role"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBE,OAAOC;IAC9C,MAAME,QAA8B;QAClCC,YAAY;YACV,GAAGF,YAAYE,UAAU;YACzBC,OAAO;YACPC,kBAAkB;QACpB;QACAD,OAAOR,KAAKU,QAAQ,CAACP,MAAMK,KAAK,EAAE;YAChCG,aAAa;QACf;QACAF,kBAAkBT,KAAKU,QAAQ,CAACP,MAAMM,gBAAgB,EAAE;YACtDE,aAAa;QACf;QACAC,MAAMZ,KAAKa,MAAM,CACf;YAAE,GAAGR,YAAYO,IAAI;YAAEE,MAAM;YAAU,gBAAgBX,KAAK,CAAC,eAAe;QAAC,GAC7E;YACEQ,aAAa;QACf;IAEJ;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -26,7 +26,7 @@ const tagPickerButtonClassNames = {
|
|
|
26
26
|
button: {
|
|
27
27
|
Bt984gj: "f122n59",
|
|
28
28
|
sshi5w: "f1nxs5xn",
|
|
29
|
-
De3pzq: "
|
|
29
|
+
De3pzq: "f1qqy65v",
|
|
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: "f11dm49f",
|
|
49
|
+
i8kkvl: "f1ln167q",
|
|
50
50
|
Bceei9c: "f1k6fduh",
|
|
51
|
-
Bahqtrf: "
|
|
51
|
+
Bahqtrf: "f8w1308",
|
|
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: "f5nzmq1"
|
|
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: "f7edm4j",
|
|
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: "fvk20yq",
|
|
107
107
|
Bgfg5da: 0,
|
|
108
|
-
B9xav0g: "
|
|
108
|
+
B9xav0g: "fgb8y08",
|
|
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: "fyggvs6",
|
|
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: "faidhye",
|
|
142
142
|
B50zh58: [
|
|
143
143
|
"f4ruux4",
|
|
144
144
|
"f1assf6x"
|
|
145
145
|
]
|
|
146
146
|
},
|
|
147
147
|
underline: {
|
|
148
|
-
De3pzq: "
|
|
148
|
+
De3pzq: "f3t6axo",
|
|
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: "fgp9vqk",
|
|
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: "f1odxwhw",
|
|
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: "fmvjrdq"
|
|
213
213
|
},
|
|
214
214
|
disabled: {
|
|
215
215
|
Bceei9c: "fdrzuqr",
|
|
216
|
-
De3pzq: "
|
|
216
|
+
De3pzq: "f1ada8tb",
|
|
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: "fcxmxs1",
|
|
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
|
+
".f1qqy65v{background-color:var(--2181, var(--2182, var(--colorTransparentBackground)));}",
|
|
269
269
|
[
|
|
270
270
|
".f3bhgqh{border:none;}",
|
|
271
271
|
{
|
|
@@ -273,14 +273,15 @@ const tagPickerButtonClassNames = {
|
|
|
273
273
|
}
|
|
274
274
|
],
|
|
275
275
|
".f1ewtqcl{box-sizing:border-box;}",
|
|
276
|
-
".
|
|
277
|
-
".
|
|
276
|
+
".f11dm49f{color:var(--2183, var(--2184, var(--colorNeutralForeground1)));}",
|
|
277
|
+
".f1ln167q{column-gap:var(--2185, var(--2186, var(--spacingHorizontalXXS)));}",
|
|
278
278
|
".f1k6fduh{cursor:pointer;}",
|
|
279
|
-
".
|
|
279
|
+
".f8w1308{font-family:var(--2187, var(--2188, var(--fontFamilyBase)));}",
|
|
280
280
|
".f1o700av{text-align:left;}",
|
|
281
281
|
".fes3tcz{text-align:right;}",
|
|
282
282
|
".fqerorx{flex-grow:1;}",
|
|
283
|
-
".
|
|
283
|
+
".f5nzmq1{color:var(--2189, var(--2190, var(--colorNeutralForeground4)));}",
|
|
284
|
+
".fk6fouc{font-family:var(--fontFamilyBase);}",
|
|
284
285
|
".fy9rknc{font-size:var(--fontSizeBase200);}",
|
|
285
286
|
".figsok6{font-weight:var(--fontWeightRegular);}",
|
|
286
287
|
".fwrc4pm{line-height:var(--lineHeightBase200);}",
|
|
@@ -310,7 +311,7 @@ const tagPickerButtonClassNames = {
|
|
|
310
311
|
p: -1
|
|
311
312
|
}
|
|
312
313
|
],
|
|
313
|
-
".
|
|
314
|
+
".f7edm4j{column-gap:var(--2191, var(--2192, var(--spacingHorizontalSNudge)));}",
|
|
314
315
|
".fod5ikn{font-size:var(--fontSizeBase400);}",
|
|
315
316
|
".faaz57k{line-height:var(--lineHeightBase400);}",
|
|
316
317
|
[
|
|
@@ -325,14 +326,15 @@ const tagPickerButtonClassNames = {
|
|
|
325
326
|
p: -1
|
|
326
327
|
}
|
|
327
328
|
],
|
|
328
|
-
".
|
|
329
|
+
".fvk20yq{background-color:var(--2193, var(--2194, var(--colorNeutralBackground1)));}",
|
|
329
330
|
[
|
|
330
331
|
".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
|
|
331
332
|
{
|
|
332
333
|
p: -2
|
|
333
334
|
}
|
|
334
335
|
],
|
|
335
|
-
".
|
|
336
|
+
".fgb8y08{border-bottom-color:var(--2195, var(--2196, var(--colorNeutralStrokeAccessible)));}",
|
|
337
|
+
".f3t6axo{background-color:var(--2201, var(--2202, var(--colorTransparentBackground)));}",
|
|
336
338
|
[
|
|
337
339
|
".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
|
|
338
340
|
{
|
|
@@ -345,13 +347,14 @@ const tagPickerButtonClassNames = {
|
|
|
345
347
|
p: -1
|
|
346
348
|
}
|
|
347
349
|
],
|
|
350
|
+
".fgp9vqk{background-color:var(--2203, var(--2204, var(--colorNeutralBackground1)));}",
|
|
348
351
|
[
|
|
349
352
|
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
|
|
350
353
|
{
|
|
351
354
|
p: -2
|
|
352
355
|
}
|
|
353
356
|
],
|
|
354
|
-
".
|
|
357
|
+
".f1odxwhw{background-color:var(--2205, var(--2206, var(--colorNeutralBackground3)));}",
|
|
355
358
|
[
|
|
356
359
|
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
|
|
357
360
|
{
|
|
@@ -362,12 +365,14 @@ const tagPickerButtonClassNames = {
|
|
|
362
365
|
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
|
|
363
366
|
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
|
|
364
367
|
".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)));}",
|
|
365
369
|
".fdrzuqr{cursor:not-allowed;}",
|
|
370
|
+
".f1ada8tb{background-color:var(--2209, var(--2210, var(--colorTransparentBackground)));}",
|
|
366
371
|
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
|
|
367
372
|
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
|
|
368
373
|
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
|
|
369
374
|
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
|
|
370
|
-
".
|
|
375
|
+
".fcxmxs1{color:var(--2211, var(--2212, var(--colorNeutralForegroundDisabled)));}",
|
|
371
376
|
".fjseox{display:none;}",
|
|
372
377
|
".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}",
|
|
373
378
|
".f1mpe4l3{height:1px;}",
|
|
@@ -399,13 +404,13 @@ const tagPickerButtonClassNames = {
|
|
|
399
404
|
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
|
|
400
405
|
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
|
|
401
406
|
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
|
|
402
|
-
".
|
|
407
|
+
".fyggvs6:hover{border-bottom-color:var(--2197, var(--2198, var(--colorNeutralStrokeAccessible)));}"
|
|
403
408
|
],
|
|
404
409
|
a: [
|
|
405
410
|
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
|
|
406
411
|
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
|
|
407
412
|
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
|
|
408
|
-
".
|
|
413
|
+
".faidhye:active{border-bottom-color:var(--2199, var(--2200, var(--colorNeutralStrokeAccessible)));}"
|
|
409
414
|
],
|
|
410
415
|
m: [
|
|
411
416
|
[
|