@fluentui/react-tree 9.4.0 → 9.4.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.
Files changed (23) hide show
  1. package/CHANGELOG.json +89 -8
  2. package/CHANGELOG.md +29 -9
  3. package/lib/components/FlatTree/useFlatTreeStyles.styles.js +4 -12
  4. package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
  5. package/lib/components/Tree/useTreeStyles.styles.js +5 -8
  6. package/lib/components/Tree/useTreeStyles.styles.js.map +1 -1
  7. package/lib/components/TreeItem/useTreeItemStyles.styles.js +10 -50
  8. package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -1
  9. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +23 -117
  10. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
  11. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +24 -141
  12. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -1
  13. package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js +5 -15
  14. package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
  15. package/lib-commonjs/components/Tree/useTreeStyles.styles.js +5 -9
  16. package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -1
  17. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +15 -134
  18. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -1
  19. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +43 -232
  20. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
  21. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +46 -281
  22. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -1
  23. package/package.json +11 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,88 @@
2
2
  "name": "@fluentui/react-tree",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 02 Oct 2023 08:53:05 GMT",
5
+ "date": "Wed, 04 Oct 2023 08:41:54 GMT",
6
+ "tag": "@fluentui/react-tree_v9.4.1",
7
+ "version": "9.4.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "bernardo.sunderhus@gmail.com",
12
+ "package": "@fluentui/react-tree",
13
+ "commit": "eb4533eee19eba7b7177e9938e5c5fd642f0e691",
14
+ "comment": "chore: replace makeStyles with makeResetStyles"
15
+ },
16
+ {
17
+ "author": "bernardo.sunderhus@gmail.com",
18
+ "package": "@fluentui/react-tree",
19
+ "commit": "3b210c90f667620c54a8b85b99bf33888afa1f57",
20
+ "comment": "chore: delegate focus outline to layout components"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-tree",
25
+ "comment": "Bump @fluentui/react-aria to v9.3.39",
26
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-tree",
31
+ "comment": "Bump @fluentui/react-avatar to v9.5.36",
32
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-tree",
37
+ "comment": "Bump @fluentui/react-button to v9.3.45",
38
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-tree",
43
+ "comment": "Bump @fluentui/react-checkbox to v9.1.46",
44
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-tree",
49
+ "comment": "Bump @fluentui/react-context-selector to v9.1.37",
50
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-tree",
55
+ "comment": "Bump @fluentui/react-portal to v9.3.20",
56
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-tree",
61
+ "comment": "Bump @fluentui/react-radio to v9.1.46",
62
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-tree",
67
+ "comment": "Bump @fluentui/react-tabster to v9.13.3",
68
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
69
+ },
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui/react-tree",
73
+ "comment": "Bump @fluentui/react-utilities to v9.14.0",
74
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
75
+ },
76
+ {
77
+ "author": "beachball",
78
+ "package": "@fluentui/react-tree",
79
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.13",
80
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
81
+ }
82
+ ]
83
+ }
84
+ },
85
+ {
86
+ "date": "Mon, 02 Oct 2023 08:56:05 GMT",
6
87
  "tag": "@fluentui/react-tree_v9.4.0",
7
88
  "version": "9.4.0",
8
89
  "comments": {
@@ -17,43 +98,43 @@
17
98
  "author": "beachball",
18
99
  "package": "@fluentui/react-tree",
19
100
  "comment": "Bump @fluentui/react-avatar to v9.5.35",
20
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
101
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
21
102
  },
22
103
  {
23
104
  "author": "beachball",
24
105
  "package": "@fluentui/react-tree",
25
106
  "comment": "Bump @fluentui/react-button to v9.3.44",
26
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
107
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
27
108
  },
28
109
  {
29
110
  "author": "beachball",
30
111
  "package": "@fluentui/react-tree",
31
112
  "comment": "Bump @fluentui/react-checkbox to v9.1.45",
32
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
113
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
33
114
  },
34
115
  {
35
116
  "author": "beachball",
36
117
  "package": "@fluentui/react-tree",
37
118
  "comment": "Bump @fluentui/react-portal to v9.3.19",
38
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
119
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
39
120
  },
40
121
  {
41
122
  "author": "beachball",
42
123
  "package": "@fluentui/react-tree",
43
124
  "comment": "Bump @fluentui/react-radio to v9.1.45",
44
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
125
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
45
126
  },
46
127
  {
47
128
  "author": "beachball",
48
129
  "package": "@fluentui/react-tree",
49
130
  "comment": "Bump @fluentui/react-shared-contexts to v9.9.2",
50
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
131
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
51
132
  },
52
133
  {
53
134
  "author": "beachball",
54
135
  "package": "@fluentui/react-tree",
55
136
  "comment": "Bump @fluentui/react-tabster to v9.13.2",
56
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
137
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
57
138
  }
58
139
  ]
59
140
  }
package/CHANGELOG.md CHANGED
@@ -1,24 +1,44 @@
1
1
  # Change Log - @fluentui/react-tree
2
2
 
3
- This log was last generated on Mon, 02 Oct 2023 08:53:05 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 04 Oct 2023 08:41:54 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.1)
8
+
9
+ Wed, 04 Oct 2023 08:41:54 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.0..@fluentui/react-tree_v9.4.1)
11
+
12
+ ### Patches
13
+
14
+ - chore: replace makeStyles with makeResetStyles ([PR #29338](https://github.com/microsoft/fluentui/pull/29338) by bernardo.sunderhus@gmail.com)
15
+ - chore: delegate focus outline to layout components ([PR #29293](https://github.com/microsoft/fluentui/pull/29293) by bernardo.sunderhus@gmail.com)
16
+ - Bump @fluentui/react-aria to v9.3.39 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
17
+ - Bump @fluentui/react-avatar to v9.5.36 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
18
+ - Bump @fluentui/react-button to v9.3.45 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
19
+ - Bump @fluentui/react-checkbox to v9.1.46 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
20
+ - Bump @fluentui/react-context-selector to v9.1.37 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
21
+ - Bump @fluentui/react-portal to v9.3.20 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
22
+ - Bump @fluentui/react-radio to v9.1.46 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
23
+ - Bump @fluentui/react-tabster to v9.13.3 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
24
+ - Bump @fluentui/react-utilities to v9.14.0 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
25
+ - Bump @fluentui/react-jsx-runtime to v9.0.13 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
26
+
7
27
  ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.0)
8
28
 
9
- Mon, 02 Oct 2023 08:53:05 GMT
29
+ Mon, 02 Oct 2023 08:56:05 GMT
10
30
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.3.1..@fluentui/react-tree_v9.4.0)
11
31
 
12
32
  ### Minor changes
13
33
 
14
34
  - feat: creates SubtreeContext ([PR #29194](https://github.com/microsoft/fluentui/pull/29194) by bernardo.sunderhus@gmail.com)
15
- - Bump @fluentui/react-avatar to v9.5.35 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
16
- - Bump @fluentui/react-button to v9.3.44 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
17
- - Bump @fluentui/react-checkbox to v9.1.45 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
18
- - Bump @fluentui/react-portal to v9.3.19 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
19
- - Bump @fluentui/react-radio to v9.1.45 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
20
- - Bump @fluentui/react-shared-contexts to v9.9.2 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
21
- - Bump @fluentui/react-tabster to v9.13.2 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
35
+ - Bump @fluentui/react-avatar to v9.5.35 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
36
+ - Bump @fluentui/react-button to v9.3.44 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
37
+ - Bump @fluentui/react-checkbox to v9.1.45 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
38
+ - Bump @fluentui/react-portal to v9.3.19 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
39
+ - Bump @fluentui/react-radio to v9.1.45 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
40
+ - Bump @fluentui/react-shared-contexts to v9.9.2 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
41
+ - Bump @fluentui/react-tabster to v9.13.2 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
22
42
 
23
43
  ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.3.1)
24
44
 
package/lib/components/FlatTree/useFlatTreeStyles.styles.js CHANGED
@@ -1,20 +1,12 @@
1
- import { __styles, mergeClasses } from '@griffel/react';
1
+ import { __resetStyles, mergeClasses } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  export const flatTreeClassNames = {
4
4
  root: 'fui-FlatTree'
5
5
  };
6
- const useStyles = /*#__PURE__*/__styles({
7
- root: {
8
- mc9l5x: "f22iagw",
9
- Beiy3e4: "f1vx9l62",
10
- Belr9w4: "f1j0q4x9"
11
- }
12
- }, {
13
- d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
14
- });
6
+ const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
15
7
  export const useFlatTreeStyles_unstable = state => {
16
- const styles = useStyles();
17
- state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
8
+ const baseStyles = useBaseStyles();
9
+ state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
18
10
  return state;
19
11
  };
20
12
  //# sourceMappingURL=useFlatTreeStyles.styles.js.map
package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","tokens","flatTreeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","d","useFlatTreeStyles_unstable","state","styles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n }\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGZ,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGL,aAAA,qGAIrB,CAAC;AACF,OAAO,MAAMM,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;EAClCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
package/lib/components/Tree/useTreeStyles.styles.js CHANGED
@@ -1,24 +1,21 @@
1
- import { __styles, mergeClasses } from '@griffel/react';
1
+ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  export const treeClassNames = {
4
4
  root: 'fui-Tree'
5
5
  };
6
+ const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
6
7
  const useStyles = /*#__PURE__*/__styles({
7
- root: {
8
- mc9l5x: "f22iagw",
9
- Beiy3e4: "f1vx9l62",
10
- Belr9w4: "f1j0q4x9"
11
- },
12
8
  subtree: {
13
9
  z8tnut: "fclwglc"
14
10
  }
15
11
  }, {
16
- d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
12
+ d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
17
13
  });
18
14
  export const useTreeStyles_unstable = state => {
15
+ const baseStyles = useBaseStyles();
19
16
  const styles = useStyles();
20
17
  const isSubTree = state.level > 1;
21
- state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
18
+ state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
22
19
  return state;
23
20
  };
24
21
  //# sourceMappingURL=useTreeStyles.styles.js.map
package/lib/components/Tree/useTreeStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n },\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n const styles = useStyles();\n const isSubTree = state.level > 1;\n state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEW,SAAS,IAAID,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACT,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGN,aAAA,qGAIrB,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;EACjCJ,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;EACvH,OAAOL,KAAK;AAChB,CAAC"}
package/lib/components/TreeItem/useTreeItemStyles.styles.js CHANGED
@@ -1,11 +1,14 @@
1
- import { __styles, mergeClasses } from '@griffel/react';
1
+ import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
- import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
4
4
  import { treeItemLevelToken } from '../../utils/tokens';
5
+ import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
6
+ import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
5
7
  export const treeItemClassNames = {
6
8
  root: 'fui-TreeItem'
7
9
  };
8
- const useRootStyles = /*#__PURE__*/__styles({
10
+ const useBaseStyles = /*#__PURE__*/__resetStyles("r1hiwysc", "r1eoub7o", [".r1hiwysc{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}", ".r1hiwysc:focus{outline-style:none;}", ".r1hiwysc:focus-visible{outline-style:none;}", ".r1hiwysc[data-fui-focus-visible]>.fui-TreeItemLayout,.r1hiwysc[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}", ".r1eoub7o{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}", ".r1eoub7o:focus{outline-style:none;}", ".r1eoub7o:focus-visible{outline-style:none;}", ".r1eoub7o[data-fui-focus-visible]>.fui-TreeItemLayout,.r1eoub7o[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}"]);
11
+ const useStyles = /*#__PURE__*/__styles({
9
12
  level1: {
10
13
  iytv0q: "f10bgyvd"
11
14
  },
@@ -35,63 +38,20 @@ const useRootStyles = /*#__PURE__*/__styles({
35
38
  },
36
39
  level10: {
37
40
  iytv0q: "fyat3t"
38
- },
39
- base: {
40
- qhf8xq: "f10pi13n",
41
- Bceei9c: "f1k6fduh",
42
- mc9l5x: "f22iagw",
43
- Beiy3e4: "f1vx9l62",
44
- B7ck84d: "f1ewtqcl",
45
- De3pzq: "fhovq9v",
46
- sj55zd: "fkfq4zb",
47
- z189sj: ["flk2ux3", "fkl3uby"]
48
- },
49
- focusIndicator: {
50
- Brovlpu: "ftqa4ok",
51
- B486eqv: "f2hkw1w",
52
- B8q5s1w: "f8hki3x",
53
- Bci5o5g: ["f1d2448m", "ffh67wi"],
54
- n8qw10: "f1bjia2o",
55
- Bdrgwmp: ["ffh67wi", "f1d2448m"],
56
- Bm4h7ae: "f15bsgw9",
57
- B7ys5i9: "f14e48fq",
58
- Busjfv9: "f18yb2kv",
59
- Bhk32uz: "fd6o370",
60
- Bf4ptjt: "fh1cnn4",
61
- kclons: ["fy7oxxb", "f184ne2d"],
62
- Bhdgwq3: "fpukqih",
63
- Blkhhs4: ["f184ne2d", "fy7oxxb"],
64
- Bqtpl0w: "frrh606",
65
- clg4pj: ["f1v5zibi", "fo2hd23"],
66
- hgwjuy: "ful5kiu",
67
- Bonggc9: ["fo2hd23", "f1v5zibi"],
68
- B1tsrr9: ["f1jqcqds", "ftffrms"],
69
- Dah5zi: ["ftffrms", "f1jqcqds"],
70
- Bkh64rk: ["f2e7qr6", "fsr1zz6"],
71
- qqdqy8: ["fsr1zz6", "f2e7qr6"],
72
- B6dhp37: "f1dvezut",
73
- i03rao: ["fd0oaoj", "f1cwg4i8"],
74
- Boxcth7: "fjvm52t",
75
- Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
76
- J0r882: "f57olzd",
77
- Bule8hv: ["f4stah7", "fs1por5"],
78
- Bjwuhne: "f480a47",
79
- Ghsupd: ["fs1por5", "f4stah7"]
80
41
  }
81
42
  }, {
82
- d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}", ".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1ewtqcl{box-sizing:border-box;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}"],
83
- f: [".ftqa4ok:focus{outline-style:none;}"],
84
- i: [".f2hkw1w:focus-visible{outline-style:none;}"]
43
+ d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
85
44
  });
86
45
  /**
87
46
  * Apply styling to the TreeItem slots based on the state
88
47
  */
89
48
  export const useTreeItemStyles_unstable = state => {
90
- const rootStyles = useRootStyles();
49
+ const baseStyles = useBaseStyles();
50
+ const styles = useStyles();
91
51
  const {
92
52
  level
93
53
  } = state;
94
- state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);
54
+ state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
95
55
  return state;
96
56
  };
97
57
  function isStaticallyDefinedLevel(level) {
package/lib/components/TreeItem/useTreeItemStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","tokens","createFocusOutlineStyle","treeItemLevelToken","treeItemClassNames","root","useRootStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","base","qhf8xq","Bceei9c","mc9l5x","Beiy3e4","B7ck84d","De3pzq","sj55zd","z189sj","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","d","f","i","useTreeItemStyles_unstable","state","rootStyles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nexport const treeItemClassNames = {\n root: 'fui-TreeItem'\n};\nconst useRootStyles = makeStyles({\n ...Object.fromEntries(Array.from({\n length: 10\n }, (_, index)=>[\n `level${index + 1}`,\n {\n [treeItemLevelToken]: index + 1\n }\n ])),\n base: {\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone\n },\n focusIndicator: createFocusOutlineStyle()\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const { level } = state;\n state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);\n return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;EAAAU,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGzD,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE0D;EAAM,CAAC,GAAGF,KAAK;EACvBA,KAAK,CAACzD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE6D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC7C,IAAI,EAAE6C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAACzD,IAAI,CAAC4D,SAAS,CAAC;EAC9L,OAAOH,KAAK;AAChB,CAAC;AACD,SAASI,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none'\n },\n ':focus-visible': {\n outlineStyle: 'none'\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid'\n }, {\n customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n })\n});\nconst useStyles = makeStyles({\n ...Object.fromEntries(Array.from({\n length: 10\n }, (_, index)=>[\n `level${index + 1}`,\n {\n [treeItemLevelToken]: index + 1\n }\n ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const { level } = state;\n state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGX,aAAA,0gDA2BrB,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG5B,YAAY,CAACO,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}
package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __styles, mergeClasses, shorthands } from '@griffel/react';
1
+ import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
2
2
  import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  import { useTreeContext_unstable } from '../../contexts/treeContext';
4
4
  import { treeItemLevelToken } from '../../utils/tokens';
@@ -13,30 +13,11 @@ export const treeItemLayoutClassNames = {
13
13
  actions: 'fui-TreeItemLayout__actions',
14
14
  selector: 'fui-TreeItemLayout__selector'
15
15
  };
16
+ const useRootBaseStyles = /*#__PURE__*/__resetStyles("rcu2h5o", null, [".rcu2h5o{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-row-start:layout;grid-column-start:layout;grid-row-end:layout;grid-column-end:layout;}", ".rcu2h5o:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".rcu2h5o:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".rcu2h5o:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".rcu2h5o:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
16
17
  /**
17
18
  * Styles for the root slot
18
19
  */
19
20
  const useRootStyles = /*#__PURE__*/__styles({
20
- base: {
21
- mc9l5x: "f22iagw",
22
- Bt984gj: "f122n59",
23
- sshi5w: "f1nxs5xn",
24
- B7ck84d: "f1ewtqcl",
25
- Ijaq50: "f15ws6j",
26
- Br312pm: "f135tdbu",
27
- nk6f5a: "f2e2169",
28
- Bw0ie65: "f4rqp6x",
29
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
30
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
31
- B7oj6ja: ["f1jar5jt", "fyu767a"],
32
- Btl43ni: ["fyu767a", "f1jar5jt"],
33
- lj723h: "flvvhsy",
34
- ecr2s2: "f1wfn5kd",
35
- qya0sb: "f1ih54s9",
36
- Bi91k9c: "fnwyq0v",
37
- Jwef8y: "f1t94bn6",
38
- Becwuud: "f1jk1nfw"
39
- },
40
21
  leaf: {
41
22
  uwmqm3: ["f1k1erfc", "faevyjx"]
42
23
  },
@@ -67,103 +48,30 @@ const useRootStyles = /*#__PURE__*/__styles({
67
48
  ecr2s2: "fophhak"
68
49
  }
69
50
  }, {
70
- d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f15ws6j{grid-row-start:layout;}", ".f135tdbu{grid-column-start:layout;}", ".f2e2169{grid-row-end:layout;}", ".f4rqp6x{grid-column-end:layout;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
71
- a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
72
- h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"]
51
+ d: [".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
52
+ h: [".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
53
+ a: [".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"]
73
54
  });
74
55
  /**
75
56
  * Styles for the action icon slot
76
57
  */
77
- const useActionsStyles = /*#__PURE__*/__styles({
78
- base: {
79
- mc9l5x: "f22iagw",
80
- Frg6f3: ["fcgxt0o", "f1ujusj6"],
81
- qhf8xq: "f10pi13n",
82
- Bj3rh1h: "f19g0ac",
83
- Ijaq50: "fobksn0",
84
- Br312pm: "fmy5l6f",
85
- nk6f5a: "fzqypwc",
86
- Bw0ie65: "f1tmftl3",
87
- z8tnut: "f1g0x7ka",
88
- z189sj: ["f1vdfbxk", "f1f5gg8d"],
89
- Byoj8tv: "f1qch9an",
90
- uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
91
- }
92
- }, {
93
- d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
94
- });
58
+ const useActionsBaseStyles = /*#__PURE__*/__resetStyles("r1i8xcbw", "r12wgp0u", [".r1i8xcbw{display:flex;margin-left:auto;position:relative;z-index:1;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-right:var(--spacingHorizontalS);padding-bottom:0;padding-left:var(--spacingHorizontalS);}", ".r12wgp0u{display:flex;margin-right:auto;position:relative;z-index:1;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-left:var(--spacingHorizontalS);padding-bottom:0;padding-right:var(--spacingHorizontalS);}"]);
95
59
  /**
96
60
  * Styles for the action icon slot
97
61
  */
98
- const useAsideStyles = /*#__PURE__*/__styles({
99
- base: {
100
- mc9l5x: "f22iagw",
101
- Frg6f3: ["fcgxt0o", "f1ujusj6"],
102
- Bt984gj: "f122n59",
103
- Bj3rh1h: "f11zp4z2",
104
- Ijaq50: "fobksn0",
105
- Br312pm: "fmy5l6f",
106
- nk6f5a: "fzqypwc",
107
- Bw0ie65: "f1tmftl3",
108
- z8tnut: "f1g0x7ka",
109
- z189sj: ["fw5db7e", "f1uw59to"],
110
- Byoj8tv: "f1qch9an",
111
- uwmqm3: ["f1uw59to", "fw5db7e"],
112
- i8kkvl: "f1ufnopg",
113
- Belr9w4: "f14sijuj"
114
- }
115
- }, {
116
- d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
117
- });
62
+ const useAsideBaseStyles = /*#__PURE__*/__resetStyles("rviw63k", "r1kawtgt", [".rviw63k{display:flex;margin-left:auto;align-items:center;z-index:0;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-right:var(--spacingHorizontalM);padding-bottom:0;padding-left:var(--spacingHorizontalM);column-gap:var(--spacingHorizontalXS);row-gap:var(--spacingHorizontalXS);}", ".r1kawtgt{display:flex;margin-right:auto;align-items:center;z-index:0;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-left:var(--spacingHorizontalM);padding-bottom:0;padding-right:var(--spacingHorizontalM);column-gap:var(--spacingHorizontalXS);row-gap:var(--spacingHorizontalXS);}"]);
118
63
  /**
119
64
  * Styles for the expand icon slot
120
65
  */
121
- const useExpandIconStyles = /*#__PURE__*/__styles({
122
- base: {
123
- mc9l5x: "f22iagw",
124
- Bt984gj: "f122n59",
125
- Brf1p80: "f4d9j23",
126
- Bf4jedk: "f17fgpbq",
127
- B7ck84d: "f1ewtqcl",
128
- sj55zd: "f11d4kpn",
129
- Bh6795r: "f1jhi6b8",
130
- Bnnss6s: "fi64zpg",
131
- xawz: "f1rmlqtg",
132
- z8tnut: "f1ywm7hm",
133
- z189sj: ["fhxju0i", "f1cnd47f"],
134
- Byoj8tv: "f14wxoun",
135
- uwmqm3: ["f1cnd47f", "fhxju0i"]
136
- }
137
- }, {
138
- d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1jhi6b8{flex-grow:0;}", ".fi64zpg{flex-shrink:0;}", ".f1rmlqtg{flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
139
- });
66
+ const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rogdio4", "rkb1wm1", [".rogdio4{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex-grow:0;flex-shrink:0;flex-basis:auto;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}", ".rkb1wm1{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex-grow:0;flex-shrink:0;flex-basis:auto;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"]);
140
67
  /**
141
68
  * Styles for the content slot
142
69
  */
143
- const useMainStyles = /*#__PURE__*/__styles({
144
- base: {
145
- z8tnut: "f1g0x7ka",
146
- z189sj: ["ffczdla", "fgiv446"],
147
- Byoj8tv: "f1qch9an",
148
- uwmqm3: ["fgiv446", "ffczdla"]
149
- }
150
- }, {
151
- d: [".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}"]
152
- });
70
+ const useMainBaseStyles = /*#__PURE__*/__resetStyles("rfjd92f", "r9y1vtu", [".rfjd92f{padding-top:0;padding-right:var(--spacingHorizontalXXS);padding-bottom:0;padding-left:var(--spacingHorizontalXXS);}", ".r9y1vtu{padding-top:0;padding-left:var(--spacingHorizontalXXS);padding-bottom:0;padding-right:var(--spacingHorizontalXXS);}"]);
153
71
  /**
154
72
  * Styles for the before/after icon slot
155
73
  */
156
- const useIconStyles = /*#__PURE__*/__styles({
157
- base: {
158
- mc9l5x: "f22iagw",
159
- Bt984gj: "f122n59",
160
- sj55zd: "fkfq4zb",
161
- Bg96gwp: "f106mvju",
162
- Be2twd7: "f1pp30po"
163
- }
164
- }, {
165
- d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
166
- });
74
+ const useIconBaseStyles = /*#__PURE__*/__resetStyles("rphzgg1", null, [".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"]);
167
75
  const useIconBeforeStyles = /*#__PURE__*/__styles({
168
76
  medium: {
169
77
  z189sj: ["f7x41pl", "fruq291"]
@@ -199,35 +107,33 @@ export const useTreeItemLayoutStyles_unstable = state => {
199
107
  selector
200
108
  } = state;
201
109
  const rootStyles = useRootStyles();
202
- const actionsStyles = useActionsStyles();
203
- const asideStyles = useAsideStyles();
204
- const mainStyles = useMainStyles();
205
- const expandIconStyles = useExpandIconStyles();
206
- const iconStyles = useIconStyles();
110
+ const rootBaseStyles = useRootBaseStyles();
111
+ const actionsBaseStyles = useActionsBaseStyles();
112
+ const asideBaseStyles = useAsideBaseStyles();
113
+ const mainBaseStyles = useMainBaseStyles();
114
+ const expandIconBaseStyles = useExpandIconBaseStyles();
115
+ const iconBaseStyles = useIconBaseStyles();
207
116
  const iconBeforeStyles = useIconBeforeStyles();
208
117
  const iconAfterStyles = useIconAfterStyles();
209
118
  const size = useTreeContext_unstable(ctx => ctx.size);
210
119
  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
211
120
  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
212
- root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
213
- main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.className);
121
+ root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
122
+ main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
214
123
  if (expandIcon) {
215
- expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
124
+ expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
216
125
  }
217
126
  if (iconBefore) {
218
- iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);
127
+ iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
219
128
  }
220
129
  if (iconAfter) {
221
- iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);
130
+ iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
222
131
  }
223
132
  if (actions) {
224
- actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);
133
+ actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
225
134
  }
226
135
  if (aside) {
227
- aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
228
- }
229
- if (expandIcon) {
230
- expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
136
+ aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
231
137
  }
232
138
  if (selector) {
233
139
  selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);