@fluentui/react-tag-picker 9.0.3 → 9.0.4
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 +17 -2
- package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js +135 -69
- package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map +1 -1
- package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js +90 -54
- package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
- package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js +38 -20
- package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map +1 -1
- package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js +24 -15
- package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js.map +1 -1
- package/lib/components/TagPickerList/useTagPickerListStyles.styles.js +9 -6
- package/lib/components/TagPickerList/useTagPickerListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js +200 -218
- package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js +121 -169
- package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js +60 -46
- package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js +40 -51
- package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js +11 -20
- package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js.map +1 -1
- package/package.json +7 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
|
|
3
3
|
import { tokens } from '@fluentui/react-theme';
|
|
4
4
|
import { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';
|
|
@@ -15,31 +15,49 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
Bceei9c: "f113hnb5"
|
|
16
16
|
},
|
|
17
17
|
medium: {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
Byoj8tv: 0,
|
|
19
|
+
uwmqm3: 0,
|
|
20
|
+
z189sj: 0,
|
|
21
|
+
z8tnut: 0,
|
|
22
|
+
B0ocmuz: "fa2pw7h",
|
|
23
|
+
i8kkvl: 0,
|
|
24
|
+
Belr9w4: 0,
|
|
25
|
+
rmohyg: "fkln5zr"
|
|
24
26
|
},
|
|
25
27
|
large: {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
Byoj8tv: 0,
|
|
29
|
+
uwmqm3: 0,
|
|
30
|
+
z189sj: 0,
|
|
31
|
+
z8tnut: 0,
|
|
32
|
+
B0ocmuz: "fc0zr7g",
|
|
33
|
+
i8kkvl: 0,
|
|
34
|
+
Belr9w4: 0,
|
|
35
|
+
rmohyg: "f1eyhf9v"
|
|
32
36
|
},
|
|
33
37
|
"extra-large": {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
Byoj8tv: 0,
|
|
39
|
+
uwmqm3: 0,
|
|
40
|
+
z189sj: 0,
|
|
41
|
+
z8tnut: 0,
|
|
42
|
+
B0ocmuz: "fc0zr7g",
|
|
43
|
+
i8kkvl: 0,
|
|
44
|
+
Belr9w4: 0,
|
|
45
|
+
rmohyg: "f1eyhf9v"
|
|
40
46
|
}
|
|
41
47
|
}, {
|
|
42
|
-
d: [".fni485r{flex-wrap:wrap;}", ".f1ewtqcl{box-sizing:border-box;}", ".f113hnb5{cursor:text;}", ".
|
|
48
|
+
d: [".fni485r{flex-wrap:wrap;}", ".f1ewtqcl{box-sizing:border-box;}", ".f113hnb5{cursor:text;}", [".fa2pw7h{padding:var(--spacingVerticalSNudge) 0 var(--spacingVerticalSNudge) 0;}", {
|
|
49
|
+
p: -1
|
|
50
|
+
}], [".fkln5zr{gap:var(--spacingHorizontalXS);}", {
|
|
51
|
+
p: -1
|
|
52
|
+
}], [".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}", {
|
|
53
|
+
p: -1
|
|
54
|
+
}], [".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}", {
|
|
55
|
+
p: -1
|
|
56
|
+
}], [".fc0zr7g{padding:var(--spacingVerticalS) 0 var(--spacingVerticalS) 0;}", {
|
|
57
|
+
p: -1
|
|
58
|
+
}], [".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}", {
|
|
59
|
+
p: -1
|
|
60
|
+
}]]
|
|
43
61
|
});
|
|
44
62
|
/**
|
|
45
63
|
* Apply styling to the TagPickerGroup slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
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 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;EACzDtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { typographyStyles, tokens } from '@fluentui/react-theme';
|
|
3
3
|
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
|
*/
|
|
@@ -14,30 +14,33 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
14
14
|
Be2twd7: "fkhj508",
|
|
15
15
|
Bhrd7zp: "figsok6",
|
|
16
16
|
Bg96gwp: "f1i3iumi",
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
Byoj8tv: 0,
|
|
18
|
+
uwmqm3: 0,
|
|
19
|
+
z189sj: 0,
|
|
20
|
+
z8tnut: 0,
|
|
21
|
+
B0ocmuz: "fa2pw7h"
|
|
21
22
|
},
|
|
22
23
|
large: {
|
|
23
24
|
Bahqtrf: "fk6fouc",
|
|
24
25
|
Be2twd7: "fkhj508",
|
|
25
26
|
Bhrd7zp: "figsok6",
|
|
26
27
|
Bg96gwp: "f1i3iumi",
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
Byoj8tv: 0,
|
|
29
|
+
uwmqm3: 0,
|
|
30
|
+
z189sj: 0,
|
|
31
|
+
z8tnut: 0,
|
|
32
|
+
B0ocmuz: "ft37c3"
|
|
31
33
|
},
|
|
32
34
|
"extra-large": {
|
|
33
35
|
Bahqtrf: "fk6fouc",
|
|
34
36
|
Be2twd7: "fkhj508",
|
|
35
37
|
Bhrd7zp: "figsok6",
|
|
36
38
|
Bg96gwp: "f1i3iumi",
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
Byoj8tv: 0,
|
|
40
|
+
uwmqm3: 0,
|
|
41
|
+
z189sj: 0,
|
|
42
|
+
z8tnut: 0,
|
|
43
|
+
B0ocmuz: "f3abo53"
|
|
41
44
|
},
|
|
42
45
|
disabled: {
|
|
43
46
|
sj55zd: "f1s2aq7o",
|
|
@@ -46,7 +49,13 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
46
49
|
yvdlaj: "fahhnxm"
|
|
47
50
|
}
|
|
48
51
|
}, {
|
|
49
|
-
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".
|
|
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;}", {
|
|
53
|
+
p: -1
|
|
54
|
+
}], [".ft37c3{padding:var(--spacingVerticalMNudge) 0 var(--spacingVerticalMNudge) 0;}", {
|
|
55
|
+
p: -1
|
|
56
|
+
}], [".f3abo53{padding:var(--spacingVerticalM) 0 var(--spacingVerticalM) 0;}", {
|
|
57
|
+
p: -1
|
|
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);}"]
|
|
50
59
|
});
|
|
51
60
|
/**
|
|
52
61
|
* Apply styling to the TagPickerInput slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","
|
|
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 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,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1BoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const tagPickerListClassNames = {
|
|
4
4
|
root: 'fui-TagPickerList'
|
|
@@ -9,10 +9,11 @@ export const tagPickerListClassNames = {
|
|
|
9
9
|
const useStyles = /*#__PURE__*/__styles({
|
|
10
10
|
root: {
|
|
11
11
|
E5pizo: "f1hg901r",
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
Beyfa6y: 0,
|
|
13
|
+
Bbmb7ep: 0,
|
|
14
|
+
Btl43ni: 0,
|
|
15
|
+
B7oj6ja: 0,
|
|
16
|
+
Dimara: "ft85np5",
|
|
16
17
|
Bxyxcbc: "fmmk62d",
|
|
17
18
|
B7ck84d: "f1ewtqcl"
|
|
18
19
|
},
|
|
@@ -20,7 +21,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
20
21
|
mc9l5x: "fjseox"
|
|
21
22
|
}
|
|
22
23
|
}, {
|
|
23
|
-
d: [".f1hg901r{box-shadow:var(--shadow16);}", ".
|
|
24
|
+
d: [".f1hg901r{box-shadow:var(--shadow16);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
25
|
+
p: -1
|
|
26
|
+
}], ".fmmk62d{max-height:80vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".fjseox{display:none;}"]
|
|
24
27
|
});
|
|
25
28
|
/**
|
|
26
29
|
* Apply styling to the TagPickerList slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
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 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,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":[]}
|