@fluentui/react-infobutton 9.0.0-beta.33 → 9.0.0-beta.35

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 (123) hide show
  1. package/CHANGELOG.json +127 -1
  2. package/CHANGELOG.md +36 -2
  3. package/dist/index.d.ts +84 -0
  4. package/lib/InfoButton.js +0 -1
  5. package/lib/InfoButton.js.map +1 -1
  6. package/lib/InfoIcon.js +1 -0
  7. package/lib/InfoIcon.js.map +1 -0
  8. package/lib/InfoIconLabel.js +1 -0
  9. package/lib/InfoIconLabel.js.map +1 -0
  10. package/lib/InfoLabel.js +0 -1
  11. package/lib/InfoLabel.js.map +1 -1
  12. package/lib/components/InfoButton/DefaultInfoButtonIcons.js +3 -4
  13. package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  14. package/lib/components/InfoButton/InfoButton.js +4 -6
  15. package/lib/components/InfoButton/InfoButton.js.map +1 -1
  16. package/lib/components/InfoButton/InfoButton.types.js +1 -2
  17. package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
  18. package/lib/components/InfoButton/index.js +0 -1
  19. package/lib/components/InfoButton/index.js.map +1 -1
  20. package/lib/components/InfoButton/renderInfoButton.js +4 -9
  21. package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
  22. package/lib/components/InfoButton/useInfoButton.js +46 -50
  23. package/lib/components/InfoButton/useInfoButton.js.map +1 -1
  24. package/lib/components/InfoButton/useInfoButtonStyles.styles.js +5 -5
  25. package/lib/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
  26. package/lib/components/InfoIcon/InfoIcon.js +12 -0
  27. package/lib/components/InfoIcon/InfoIcon.js.map +1 -0
  28. package/lib/components/InfoIcon/InfoIcon.types.js +2 -0
  29. package/lib/components/InfoIcon/InfoIcon.types.js.map +1 -0
  30. package/lib/components/InfoIcon/index.js +5 -0
  31. package/lib/components/InfoIcon/index.js.map +1 -0
  32. package/lib/components/InfoIcon/renderInfoIcon.js +9 -0
  33. package/lib/components/InfoIcon/renderInfoIcon.js.map +1 -0
  34. package/lib/components/InfoIcon/useInfoIcon.js +25 -0
  35. package/lib/components/InfoIcon/useInfoIcon.js.map +1 -0
  36. package/lib/components/InfoIcon/useInfoIconStyles.styles.js +21 -0
  37. package/lib/components/InfoIcon/useInfoIconStyles.styles.js.map +1 -0
  38. package/lib/components/InfoIconLabel/InfoIconLabel.js +12 -0
  39. package/lib/components/InfoIconLabel/InfoIconLabel.js.map +1 -0
  40. package/lib/components/InfoIconLabel/InfoIconLabel.types.js +2 -0
  41. package/lib/components/InfoIconLabel/InfoIconLabel.types.js.map +1 -0
  42. package/lib/components/InfoIconLabel/index.js +5 -0
  43. package/lib/components/InfoIconLabel/index.js.map +1 -0
  44. package/lib/components/InfoIconLabel/renderInfoIconLabel.js +9 -0
  45. package/lib/components/InfoIconLabel/renderInfoIconLabel.js.map +1 -0
  46. package/lib/components/InfoIconLabel/useInfoIconLabel.js +25 -0
  47. package/lib/components/InfoIconLabel/useInfoIconLabel.js.map +1 -0
  48. package/lib/components/InfoIconLabel/useInfoIconLabelStyles.styles.js +21 -0
  49. package/lib/components/InfoIconLabel/useInfoIconLabelStyles.styles.js.map +1 -0
  50. package/lib/components/InfoLabel/InfoLabel.js +4 -6
  51. package/lib/components/InfoLabel/InfoLabel.js.map +1 -1
  52. package/lib/components/InfoLabel/InfoLabel.types.js +1 -2
  53. package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -1
  54. package/lib/components/InfoLabel/index.js +0 -1
  55. package/lib/components/InfoLabel/index.js.map +1 -1
  56. package/lib/components/InfoLabel/renderInfoLabel.js +4 -9
  57. package/lib/components/InfoLabel/renderInfoLabel.js.map +1 -1
  58. package/lib/components/InfoLabel/useInfoLabel.js +49 -60
  59. package/lib/components/InfoLabel/useInfoLabel.js.map +1 -1
  60. package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
  61. package/lib/index.js +2 -1
  62. package/lib/index.js.map +1 -1
  63. package/lib-commonjs/InfoButton.js +0 -3
  64. package/lib-commonjs/InfoButton.js.map +1 -1
  65. package/lib-commonjs/InfoIcon.js +6 -0
  66. package/lib-commonjs/InfoIcon.js.map +1 -0
  67. package/lib-commonjs/InfoIconLabel.js +6 -0
  68. package/lib-commonjs/InfoIconLabel.js.map +1 -0
  69. package/lib-commonjs/InfoLabel.js +0 -3
  70. package/lib-commonjs/InfoLabel.js.map +1 -1
  71. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js +3 -5
  72. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  73. package/lib-commonjs/components/InfoButton/InfoButton.js +1 -3
  74. package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
  75. package/lib-commonjs/components/InfoButton/InfoButton.types.js +0 -3
  76. package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
  77. package/lib-commonjs/components/InfoButton/index.js +0 -3
  78. package/lib-commonjs/components/InfoButton/index.js.map +1 -1
  79. package/lib-commonjs/components/InfoButton/renderInfoButton.js +1 -3
  80. package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
  81. package/lib-commonjs/components/InfoButton/useInfoButton.js +1 -3
  82. package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
  83. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js +12 -14
  84. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -1
  85. package/lib-commonjs/components/InfoIcon/InfoIcon.js +19 -0
  86. package/lib-commonjs/components/InfoIcon/InfoIcon.js.map +1 -0
  87. package/lib-commonjs/components/InfoIcon/InfoIcon.types.js +6 -0
  88. package/lib-commonjs/components/InfoIcon/InfoIcon.types.js.map +1 -0
  89. package/lib-commonjs/components/InfoIcon/index.js +10 -0
  90. package/lib-commonjs/components/InfoIcon/index.js.map +1 -0
  91. package/lib-commonjs/components/InfoIcon/renderInfoIcon.js +15 -0
  92. package/lib-commonjs/components/InfoIcon/renderInfoIcon.js.map +1 -0
  93. package/lib-commonjs/components/InfoIcon/useInfoIcon.js +26 -0
  94. package/lib-commonjs/components/InfoIcon/useInfoIcon.js.map +1 -0
  95. package/lib-commonjs/components/InfoIcon/useInfoIconStyles.styles.js +30 -0
  96. package/lib-commonjs/components/InfoIcon/useInfoIconStyles.styles.js.map +1 -0
  97. package/lib-commonjs/components/InfoIconLabel/InfoIconLabel.js +19 -0
  98. package/lib-commonjs/components/InfoIconLabel/InfoIconLabel.js.map +1 -0
  99. package/lib-commonjs/components/InfoIconLabel/InfoIconLabel.types.js +6 -0
  100. package/lib-commonjs/components/InfoIconLabel/InfoIconLabel.types.js.map +1 -0
  101. package/lib-commonjs/components/InfoIconLabel/index.js +10 -0
  102. package/lib-commonjs/components/InfoIconLabel/index.js.map +1 -0
  103. package/lib-commonjs/components/InfoIconLabel/renderInfoIconLabel.js +15 -0
  104. package/lib-commonjs/components/InfoIconLabel/renderInfoIconLabel.js.map +1 -0
  105. package/lib-commonjs/components/InfoIconLabel/useInfoIconLabel.js +26 -0
  106. package/lib-commonjs/components/InfoIconLabel/useInfoIconLabel.js.map +1 -0
  107. package/lib-commonjs/components/InfoIconLabel/useInfoIconLabelStyles.styles.js +30 -0
  108. package/lib-commonjs/components/InfoIconLabel/useInfoIconLabelStyles.styles.js.map +1 -0
  109. package/lib-commonjs/components/InfoLabel/InfoLabel.js +1 -3
  110. package/lib-commonjs/components/InfoLabel/InfoLabel.js.map +1 -1
  111. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js +0 -3
  112. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -1
  113. package/lib-commonjs/components/InfoLabel/index.js +0 -3
  114. package/lib-commonjs/components/InfoLabel/index.js.map +1 -1
  115. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js +1 -3
  116. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js.map +1 -1
  117. package/lib-commonjs/components/InfoLabel/useInfoLabel.js +1 -3
  118. package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map +1 -1
  119. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js +0 -2
  120. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -1
  121. package/lib-commonjs/index.js +13 -4
  122. package/lib-commonjs/index.js.map +1 -1
  123. package/package.json +10 -10
package/CHANGELOG.json CHANGED
@@ -2,7 +2,133 @@
2
2
  "name": "@fluentui/react-infobutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 25 May 2023 09:57:45 GMT",
5
+ "date": "Tue, 20 Jun 2023 12:34:42 GMT",
6
+ "tag": "@fluentui/react-infobutton_v9.0.0-beta.35",
7
+ "version": "9.0.0-beta.35",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "esteban.230@hotmail.com",
12
+ "package": "@fluentui/react-infobutton",
13
+ "commit": "2180922aed405f0a49734a64608749011cece831",
14
+ "comment": "chore: Create InfoIconLabel component scaffold."
15
+ },
16
+ {
17
+ "author": "esteban.230@hotmail.com",
18
+ "package": "@fluentui/react-infobutton",
19
+ "commit": "cb3741ddf649785332da7f0d57dfa93a965dab75",
20
+ "comment": "chore: Create InfoTip component."
21
+ },
22
+ {
23
+ "author": "ololubek@microsoft.com",
24
+ "package": "@fluentui/react-infobutton",
25
+ "commit": "8a5ae3aa00faa327c58887a99a5698b18f2930ee",
26
+ "comment": "chore: update @fluentui/react-icons to 2.0.203"
27
+ },
28
+ {
29
+ "author": "esteban.230@hotmail.com",
30
+ "package": "@fluentui/react-infobutton",
31
+ "commit": "91b9ce05995846aaa882d86755583e5b1a703717",
32
+ "comment": "chore: Rename InfoTip to InfoIcon to better align with InfoButton."
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-infobutton",
37
+ "comment": "Bump @fluentui/react-label to v9.1.16",
38
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-infobutton",
43
+ "comment": "Bump @fluentui/react-popover to v9.7.0",
44
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-infobutton",
49
+ "comment": "Bump @fluentui/react-tabster to v9.8.0",
50
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-infobutton",
55
+ "comment": "Bump @fluentui/react-theme to v9.1.9",
56
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-infobutton",
61
+ "comment": "Bump @fluentui/react-utilities to v9.9.3",
62
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-infobutton",
67
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7",
68
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
69
+ },
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui/react-infobutton",
73
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23",
74
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
75
+ }
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "date": "Wed, 31 May 2023 06:46:14 GMT",
81
+ "tag": "@fluentui/react-infobutton_v9.0.0-beta.34",
82
+ "version": "9.0.0-beta.34",
83
+ "comments": {
84
+ "prerelease": [
85
+ {
86
+ "author": "seanmonahan@microsoft.com",
87
+ "package": "@fluentui/react-infobutton",
88
+ "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
89
+ "comment": "chore: Update Griffel to v1.5.7."
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-infobutton",
94
+ "comment": "Bump @fluentui/react-label to v9.1.15",
95
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-infobutton",
100
+ "comment": "Bump @fluentui/react-popover to v9.6.0",
101
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-infobutton",
106
+ "comment": "Bump @fluentui/react-tabster to v9.7.5",
107
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-infobutton",
112
+ "comment": "Bump @fluentui/react-utilities to v9.9.2",
113
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui/react-infobutton",
118
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
119
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
120
+ },
121
+ {
122
+ "author": "beachball",
123
+ "package": "@fluentui/react-infobutton",
124
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
125
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
126
+ }
127
+ ]
128
+ }
129
+ },
130
+ {
131
+ "date": "Thu, 25 May 2023 10:00:48 GMT",
6
132
  "tag": "@fluentui/react-infobutton_v9.0.0-beta.33",
7
133
  "version": "9.0.0-beta.33",
8
134
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,46 @@
1
1
  # Change Log - @fluentui/react-infobutton
2
2
 
3
- This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Jun 2023 12:34:42 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.35)
8
+
9
+ Tue, 20 Jun 2023 12:34:42 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.34..@fluentui/react-infobutton_v9.0.0-beta.35)
11
+
12
+ ### Changes
13
+
14
+ - chore: Create InfoIconLabel component scaffold. ([PR #28200](https://github.com/microsoft/fluentui/pull/28200) by esteban.230@hotmail.com)
15
+ - chore: Create InfoTip component. ([PR #28071](https://github.com/microsoft/fluentui/pull/28071) by esteban.230@hotmail.com)
16
+ - chore: update @fluentui/react-icons to 2.0.203 ([PR #28203](https://github.com/microsoft/fluentui/pull/28203) by ololubek@microsoft.com)
17
+ - chore: Rename InfoTip to InfoIcon to better align with InfoButton. ([PR #28177](https://github.com/microsoft/fluentui/pull/28177) by esteban.230@hotmail.com)
18
+ - Bump @fluentui/react-label to v9.1.16 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
19
+ - Bump @fluentui/react-popover to v9.7.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
20
+ - Bump @fluentui/react-tabster to v9.8.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
21
+ - Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
22
+ - Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
23
+ - Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
24
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
25
+
26
+ ## [9.0.0-beta.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.34)
27
+
28
+ Wed, 31 May 2023 06:46:14 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.33..@fluentui/react-infobutton_v9.0.0-beta.34)
30
+
31
+ ### Changes
32
+
33
+ - chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
34
+ - Bump @fluentui/react-label to v9.1.15 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
35
+ - Bump @fluentui/react-popover to v9.6.0 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
36
+ - Bump @fluentui/react-tabster to v9.7.5 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
37
+ - Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
38
+ - Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
39
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
40
+
7
41
  ## [9.0.0-beta.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.33)
8
42
 
9
- Thu, 25 May 2023 09:57:45 GMT
43
+ Thu, 25 May 2023 10:00:48 GMT
10
44
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.32..@fluentui/react-infobutton_v9.0.0-beta.33)
11
45
 
12
46
  ### Changes
package/dist/index.d.ts CHANGED
@@ -46,6 +46,48 @@ export declare type InfoButtonSlots = {
46
46
  */
47
47
  export declare type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
48
48
 
49
+ /**
50
+ * InfoIcon component - TODO: add more docs
51
+ */
52
+ export declare const InfoIcon: ForwardRefComponent<InfoIconProps>;
53
+
54
+ export declare const infoIconClassNames: SlotClassNames<InfoIconSlots>;
55
+
56
+ /**
57
+ * InfoIconLabel component - TODO: add more docs
58
+ */
59
+ export declare const InfoIconLabel: ForwardRefComponent<InfoIconLabelProps>;
60
+
61
+ export declare const infoIconLabelClassNames: SlotClassNames<InfoIconLabelSlots>;
62
+
63
+ /**
64
+ * InfoIconLabel Props
65
+ */
66
+ export declare type InfoIconLabelProps = ComponentProps<InfoIconLabelSlots> & {};
67
+
68
+ export declare type InfoIconLabelSlots = {
69
+ root: Slot<'div'>;
70
+ };
71
+
72
+ /**
73
+ * State used in rendering InfoIconLabel
74
+ */
75
+ export declare type InfoIconLabelState = ComponentState<InfoIconLabelSlots>;
76
+
77
+ /**
78
+ * InfoIcon Props
79
+ */
80
+ export declare type InfoIconProps = ComponentProps<InfoIconSlots> & {};
81
+
82
+ export declare type InfoIconSlots = {
83
+ root: Slot<'div'>;
84
+ };
85
+
86
+ /**
87
+ * State used in rendering InfoIcon
88
+ */
89
+ export declare type InfoIconState = ComponentState<InfoIconSlots>;
90
+
49
91
  /**
50
92
  * InfoLabel component
51
93
  */
@@ -93,6 +135,16 @@ export declare type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoL
93
135
  */
94
136
  export declare const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
95
137
 
138
+ /**
139
+ * Render the final JSX of InfoIcon
140
+ */
141
+ export declare const renderInfoIcon_unstable: (state: InfoIconState) => JSX.Element;
142
+
143
+ /**
144
+ * Render the final JSX of InfoIconLabel
145
+ */
146
+ export declare const renderInfoIconLabel_unstable: (state: InfoIconLabelState) => JSX.Element;
147
+
96
148
  /**
97
149
  * Render the final JSX of InfoLabel
98
150
  */
@@ -114,6 +166,38 @@ export declare const useInfoButton_unstable: (props: InfoButtonProps, ref: React
114
166
  */
115
167
  export declare const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState;
116
168
 
169
+ /**
170
+ * Create the state required to render InfoIcon.
171
+ *
172
+ * The returned state can be modified with hooks such as useInfoIconStyles_unstable,
173
+ * before being passed to renderInfoIcon_unstable.
174
+ *
175
+ * @param props - props from this instance of InfoIcon
176
+ * @param ref - reference to root HTMLElement of InfoIcon
177
+ */
178
+ export declare const useInfoIcon_unstable: (props: InfoIconProps, ref: React_2.Ref<HTMLElement>) => InfoIconState;
179
+
180
+ /**
181
+ * Create the state required to render InfoIconLabel.
182
+ *
183
+ * The returned state can be modified with hooks such as useInfoIconLabelStyles_unstable,
184
+ * before being passed to renderInfoIconLabel_unstable.
185
+ *
186
+ * @param props - props from this instance of InfoIconLabel
187
+ * @param ref - reference to root HTMLElement of InfoIconLabel
188
+ */
189
+ export declare const useInfoIconLabel_unstable: (props: InfoIconLabelProps, ref: React_2.Ref<HTMLElement>) => InfoIconLabelState;
190
+
191
+ /**
192
+ * Apply styling to the InfoIconLabel slots based on the state
193
+ */
194
+ export declare const useInfoIconLabelStyles_unstable: (state: InfoIconLabelState) => InfoIconLabelState;
195
+
196
+ /**
197
+ * Apply styling to the InfoIcon slots based on the state
198
+ */
199
+ export declare const useInfoIconStyles_unstable: (state: InfoIconState) => InfoIconState;
200
+
117
201
  /**
118
202
  * Create the state required to render InfoLabel.
119
203
  *
package/lib/InfoButton.js CHANGED
@@ -1,2 +1 @@
1
1
  export * from './components/InfoButton/index';
2
- //# sourceMappingURL=InfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../src/InfoButton.ts"],"sourcesContent":["export * from './components/InfoButton/index';\n"],"mappings":"AAAA,cAAc"}
1
+ {"version":3,"sources":["InfoButton.ts"],"sourcesContent":["export * from './components/InfoButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}
@@ -0,0 +1 @@
1
+ export * from './components/InfoIcon/index';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["InfoIcon.ts"],"sourcesContent":["export * from './components/InfoIcon/index';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B"}
@@ -0,0 +1 @@
1
+ export * from './components/InfoIconLabel/index';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["InfoIconLabel.ts"],"sourcesContent":["export * from './components/InfoIconLabel/index';\n"],"names":[],"mappings":"AAAA,cAAc,mCAAmC"}
package/lib/InfoLabel.js CHANGED
@@ -1,2 +1 @@
1
1
  export * from './components/InfoLabel/index';
2
- //# sourceMappingURL=InfoLabel.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../src/InfoLabel.ts"],"sourcesContent":["export * from './components/InfoLabel/index';\n"],"mappings":"AAAA,cAAc"}
1
+ {"version":3,"sources":["InfoLabel.ts"],"sourcesContent":["export * from './components/InfoLabel/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}
@@ -1,5 +1,4 @@
1
1
  import { Info12Regular, Info12Filled, Info16Regular, Info16Filled, Info20Regular, Info20Filled, bundleIcon } from '@fluentui/react-icons';
2
- export const DefaultInfoButtonIcon12 = /*#__PURE__*/bundleIcon(Info12Filled, Info12Regular);
3
- export const DefaultInfoButtonIcon16 = /*#__PURE__*/bundleIcon(Info16Filled, Info16Regular);
4
- export const DefaultInfoButtonIcon20 = /*#__PURE__*/bundleIcon(Info20Filled, Info20Regular);
5
- //# sourceMappingURL=DefaultInfoButtonIcons.js.map
2
+ export const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);
3
+ export const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);
4
+ export const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);
@@ -1 +1 @@
1
- {"version":3,"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"sources":["../../../src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL;AAEP,OAAO,MAAMC,uBAAA,gBAA0BD,UAAA,CAAWL,YAAA,EAAcD,aAAA;AAChE,OAAO,MAAMQ,uBAAA,gBAA0BF,UAAA,CAAWH,YAAA,EAAcD,aAAA;AAChE,OAAO,MAAMO,uBAAA,gBAA0BH,UAAA,CAAWD,YAAA,EAAcD,aAAA"}
1
+ {"version":3,"sources":["DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n Info12Regular,\n Info12Filled,\n Info16Regular,\n Info16Filled,\n Info20Regular,\n Info20Filled,\n bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAE/B,OAAO,MAAMC,0BAA0BD,WAAWL,cAAcD,eAAe;AAC/E,OAAO,MAAMQ,0BAA0BF,WAAWH,cAAcD,eAAe;AAC/E,OAAO,MAAMO,0BAA0BH,WAAWD,cAAcD,eAAe"}
@@ -4,11 +4,9 @@ import { useInfoButton_unstable } from './useInfoButton';
4
4
  import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
5
5
  /**
6
6
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
7
- */
8
- export const InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {
9
- const state = useInfoButton_unstable(props, ref);
10
- useInfoButtonStyles_unstable(state);
11
- return renderInfoButton_unstable(state);
7
+ */ export const InfoButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
8
+ const state = useInfoButton_unstable(props, ref);
9
+ useInfoButtonStyles_unstable(state);
10
+ return renderInfoButton_unstable(state);
12
11
  });
13
12
  InfoButton.displayName = 'InfoButton';
14
- //# sourceMappingURL=InfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAG7C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQN,sBAAA,CAAuBI,KAAA,EAAOC,GAAA;EAE5CJ,4BAAA,CAA6BK,KAAA;EAC7B,OAAOP,yBAAA,CAA0BO,KAAA;AACnC;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}
1
+ {"version":3,"sources":["InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
@@ -1,2 +1 @@
1
- export {};
2
- //# sourceMappingURL=InfoButton.types.js.map
1
+ export { };
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../../../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<PopoverProps>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;\n"],"mappings":"AAAA"}
1
+ {"version":3,"sources":["InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<PopoverProps>>>;\n\n /**\n * The information to be displayed in the PopoverSurface when the button is pressed.\n */\n info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;\n"],"names":[],"mappings":"AAAA,WAgCwG"}
@@ -3,4 +3,3 @@ export * from './InfoButton.types';
3
3
  export * from './renderInfoButton';
4
4
  export * from './useInfoButton';
5
5
  export * from './useInfoButtonStyles.styles';
6
- //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../../../src/components/InfoButton/index.ts"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}
@@ -1,14 +1,9 @@
1
- /** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
1
+ /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
2
  import { getSlotsNext } from '@fluentui/react-utilities';
3
3
  import { PopoverTrigger } from '@fluentui/react-popover';
4
4
  /**
5
5
  * Render the final JSX of InfoButton
6
- */
7
- export const renderInfoButton_unstable = state => {
8
- const {
9
- slots,
10
- slotProps
11
- } = getSlotsNext(state);
12
- return /*#__PURE__*/createElement(slots.popover, slotProps.popover, /*#__PURE__*/createElement(PopoverTrigger, null, /*#__PURE__*/createElement(slots.root, slotProps.root)), /*#__PURE__*/createElement(slots.info, slotProps.info));
6
+ */ export const renderInfoButton_unstable = (state)=>{
7
+ const { slots , slotProps } = getSlotsNext(state);
8
+ return /*#__PURE__*/ createElement(slots.popover, slotProps.popover, /*#__PURE__*/ createElement(PopoverTrigger, null, /*#__PURE__*/ createElement(slots.root, slotProps.root)), /*#__PURE__*/ createElement(slots.info, slotProps.info));
13
9
  };
14
- //# sourceMappingURL=renderInfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["createElement","getSlotsNext","PopoverTrigger","renderInfoButton_unstable","state","slots","slotProps","popover","root","info"],"sources":["../../../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { PopoverProps } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n const { slots, slotProps } = getSlotsNext<InfoButtonSlots>(state);\n\n return (\n <slots.popover {...(slotProps.popover as PopoverProps)}>\n <PopoverTrigger>\n <slots.root {...slotProps.root} />\n </PopoverTrigger>\n <slots.info {...slotProps.info} />\n </slots.popover>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAI/B;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,YAAA,CAA8BG,KAAA;EAE3D,oBACEJ,aAhBJ,CAgBKK,KAAA,CAAME,OAAO,EAAMD,SAAA,CAAUC,OAAO,eACnCP,aAjBN,CAiBOE,cAAA,qBACCF,aAlBR,CAkBSK,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,iBAEhCR,aApBN,CAoBOK,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;AAGpC"}
1
+ {"version":3,"sources":["renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { PopoverProps } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n const { slots, slotProps } = getSlotsNext<InfoButtonSlots>(state);\n\n return (\n <slots.popover {...(slotProps.popover as PopoverProps)}>\n <PopoverTrigger>\n <slots.root {...slotProps.root} />\n </PopoverTrigger>\n <slots.info {...slotProps.info} />\n </slots.popover>\n );\n};\n"],"names":["createElement","getSlotsNext","PopoverTrigger","renderInfoButton_unstable","state","slots","slotProps","popover","root","info"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,cAAc,QAAQ,0BAA0B;AAIzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAA8BG;IAE3D,qBACE,AAhBJ,cAgBKC,MAAME,OAAO,EAAMD,UAAUC,OAAO,gBACnC,AAjBN,cAiBOL,oCACC,AAlBR,cAkBSG,MAAMG,IAAI,EAAKF,UAAUE,IAAI,kBAEhC,AApBN,cAoBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}
@@ -4,14 +4,14 @@ import { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluent
4
4
  import { Popover, PopoverSurface } from '@fluentui/react-popover';
5
5
  import { useControllableState } from '@fluentui/react-utilities';
6
6
  const infoButtonIconMap = {
7
- small: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon12, null),
8
- medium: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon16, null),
9
- large: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon20, null)
7
+ small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),
8
+ medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),
9
+ large: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon20, null)
10
10
  };
11
11
  const popoverSizeMap = {
12
- small: 'small',
13
- medium: 'small',
14
- large: 'medium'
12
+ small: 'small',
13
+ medium: 'small',
14
+ large: 'medium'
15
15
  };
16
16
  /**
17
17
  * Create the state required to render InfoButton.
@@ -21,48 +21,44 @@ const popoverSizeMap = {
21
21
  *
22
22
  * @param props - props from this instance of InfoButton
23
23
  * @param ref - reference to root HTMLElement of InfoButton
24
- */
25
- export const useInfoButton_unstable = (props, ref) => {
26
- const {
27
- size = 'medium'
28
- } = props;
29
- const state = {
30
- size,
31
- components: {
32
- root: 'button',
33
- popover: Popover,
34
- info: PopoverSurface
35
- },
36
- root: getNativeElementProps('button', {
37
- children: infoButtonIconMap[size],
38
- type: 'button',
39
- 'aria-label': 'information',
40
- ...props,
41
- ref
42
- }),
43
- popover: resolveShorthand(props.popover, {
44
- required: true,
45
- defaultProps: {
46
- positioning: 'above-start',
47
- size: popoverSizeMap[size],
48
- withArrow: true
49
- }
50
- }),
51
- info: resolveShorthand(props.info, {
52
- required: true,
53
- defaultProps: {
54
- role: 'note',
55
- tabIndex: -1
56
- }
57
- })
58
- };
59
- const [popoverOpen, setPopoverOpen] = useControllableState({
60
- state: state.popover.open,
61
- defaultState: state.popover.defaultOpen,
62
- initialState: false
63
- });
64
- state.popover.open = popoverOpen;
65
- state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));
66
- return state;
24
+ */ export const useInfoButton_unstable = (props, ref)=>{
25
+ const { size ='medium' } = props;
26
+ const state = {
27
+ size,
28
+ components: {
29
+ root: 'button',
30
+ popover: Popover,
31
+ info: PopoverSurface
32
+ },
33
+ root: getNativeElementProps('button', {
34
+ children: infoButtonIconMap[size],
35
+ type: 'button',
36
+ 'aria-label': 'information',
37
+ ...props,
38
+ ref
39
+ }),
40
+ popover: resolveShorthand(props.popover, {
41
+ required: true,
42
+ defaultProps: {
43
+ positioning: 'above-start',
44
+ size: popoverSizeMap[size],
45
+ withArrow: true
46
+ }
47
+ }),
48
+ info: resolveShorthand(props.info, {
49
+ required: true,
50
+ defaultProps: {
51
+ role: 'note',
52
+ tabIndex: -1
53
+ }
54
+ })
55
+ };
56
+ const [popoverOpen, setPopoverOpen] = useControllableState({
57
+ state: state.popover.open,
58
+ defaultState: state.popover.defaultOpen,
59
+ initialState: false
60
+ });
61
+ state.popover.open = popoverOpen;
62
+ state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));
63
+ return state;
67
64
  };
68
- //# sourceMappingURL=useInfoButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","createElement","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","info","children","type","required","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"sources":["../../../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium' } = props;\n\n const state: InfoButtonState = {\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref,\n }),\n popover: resolveShorthand(props.popover, {\n required: true,\n defaultProps: {\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n }),\n info: resolveShorthand(props.info, {\n required: true,\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ;AAC1F,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ;AACxE,SAASC,OAAO,EAAEC,cAAc,QAAQ;AACxC,SAASC,oBAAoB,QAAQ;AAIrC,MAAMC,iBAAA,GAAoB;EACxBC,KAAA,eAAOX,KAAA,CAAAY,aAAA,CAACX,uBAAA;EACRY,MAAA,eAAQb,KAAA,CAAAY,aAAA,CAACV,uBAAA;EACTY,KAAA,eAAOd,KAAA,CAAAY,aAAA,CAACT,uBAAA;AACV;AAEA,MAAMY,cAAA,GAAiB;EACrBJ,KAAA,EAAO;EACPE,MAAA,EAAQ;EACRC,KAAA,EAAO;AACT;AAEA;;;;;;;;;AASA,OAAO,MAAME,sBAAA,GAAyBA,CAACC,KAAA,EAAwBC,GAAA,KAAiD;EAC9G,MAAM;IAAEC,IAAA,GAAO;EAAQ,CAAE,GAAGF,KAAA;EAE5B,MAAMG,KAAA,GAAyB;IAC7BD,IAAA;IAEAE,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,OAAA,EAAShB,OAAA;MACTiB,IAAA,EAAMhB;IACR;IAEAc,IAAA,EAAMlB,qBAAA,CAAsB,UAAU;MACpCqB,QAAA,EAAUf,iBAAiB,CAACS,IAAA,CAAK;MACjCO,IAAA,EAAM;MACN,cAAc;MACd,GAAGT,KAAK;MACRC;IACF;IACAK,OAAA,EAASjB,gBAAA,CAAiBW,KAAA,CAAMM,OAAO,EAAE;MACvCI,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZC,WAAA,EAAa;QACbV,IAAA,EAAMJ,cAAc,CAACI,IAAA,CAAK;QAC1BW,SAAA,EAAW;MACb;IACF;IACAN,IAAA,EAAMlB,gBAAA,CAAiBW,KAAA,CAAMO,IAAI,EAAE;MACjCG,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZG,IAAA,EAAM;QACNC,QAAA,EAAU,CAAC;MACb;IACF;EACF;EAEA,MAAM,CAACC,WAAA,EAAaC,cAAA,CAAe,GAAGzB,oBAAA,CAAqB;IACzDW,KAAA,EAAOA,KAAA,CAAMG,OAAO,CAACY,IAAI;IACzBC,YAAA,EAAchB,KAAA,CAAMG,OAAO,CAACc,WAAW;IACvCC,YAAA,EAAc;EAChB;EAEAlB,KAAA,CAAMG,OAAO,CAACY,IAAI,GAAGF,WAAA;EACrBb,KAAA,CAAMG,OAAO,CAACgB,YAAY,GAAGlC,cAAA,CAAee,KAAA,CAAMG,OAAO,CAACgB,YAAY,EAAE,CAACC,CAAA,EAAGC,IAAA,KAASP,cAAA,CAAeO,IAAA,CAAKN,IAAI;EAE7G,OAAOf,KAAA;AACT"}
1
+ {"version":3,"sources":["useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium' } = props;\n\n const state: InfoButtonState = {\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n info: PopoverSurface,\n },\n\n root: getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref,\n }),\n popover: resolveShorthand(props.popover, {\n required: true,\n defaultProps: {\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n }),\n info: resolveShorthand(props.info, {\n required: true,\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","info","children","type","required","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,2BAA2B;AACrH,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,4BAA4B;AACpG,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAClE,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACV;IACRW,sBAAQ,oBAACV;IACTW,qBAAO,oBAACV;AACV;AAEA,MAAMW,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,MAAO,SAAQ,EAAE,GAAGF;IAE5B,MAAMG,QAAyB;QAC7BD;QAEAE,YAAY;YACVC,MAAM;YACNC,SAASf;YACTgB,MAAMf;QACR;QAEAa,MAAMjB,sBAAsB,UAAU;YACpCoB,UAAUd,iBAAiB,CAACQ,KAAK;YACjCO,MAAM;YACN,cAAc;YACd,GAAGT,KAAK;YACRC;QACF;QACAK,SAAShB,iBAAiBU,MAAMM,OAAO,EAAE;YACvCI,UAAU,IAAI;YACdC,cAAc;gBACZC,aAAa;gBACbV,MAAMJ,cAAc,CAACI,KAAK;gBAC1BW,WAAW,IAAI;YACjB;QACF;QACAN,MAAMjB,iBAAiBU,MAAMO,IAAI,EAAE;YACjCG,UAAU,IAAI;YACdC,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;QACF;IACF;IAEA,MAAM,CAACC,aAAaC,eAAe,GAAGxB,qBAAqB;QACzDU,OAAOA,MAAMG,OAAO,CAACY,IAAI;QACzBC,cAAchB,MAAMG,OAAO,CAACc,WAAW;QACvCC,cAAc,KAAK;IACrB;IAEAlB,MAAMG,OAAO,CAACY,IAAI,GAAGF;IACrBb,MAAMG,OAAO,CAACgB,YAAY,GAAGjC,eAAec,MAAMG,OAAO,CAACgB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,OAAOf;AACT,EAAE"}
@@ -88,10 +88,10 @@ const useButtonStyles = /*#__PURE__*/__styles({
88
88
  i03rao: ["fd0oaoj", "f1cwg4i8"],
89
89
  Boxcth7: "fjvm52t",
90
90
  Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
91
- J0r882: "fdiulkx",
92
- Bjwuhne: "f1yalx80",
93
- Ghsupd: ["fq22d5a", "f1jw7pan"],
94
- Bule8hv: ["f1jw7pan", "fq22d5a"]
91
+ J0r882: "f57olzd",
92
+ Bule8hv: ["f4stah7", "fs1por5"],
93
+ Bjwuhne: "f480a47",
94
+ Ghsupd: ["fs1por5", "f4stah7"]
95
95
  },
96
96
  large: {
97
97
  z8tnut: "fclwglc",
@@ -100,7 +100,7 @@ const useButtonStyles = /*#__PURE__*/__styles({
100
100
  uwmqm3: ["f1b0r8ql", "f1w3695s"]
101
101
  }
102
102
  }, {
103
- d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".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);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".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);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
103
+ d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".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);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".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);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
104
104
  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
105
105
  m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
106
106
  m: "(forced-colors: active)"