@fluentui/react-components 9.20.3 → 9.21.0

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 (16) hide show
  1. package/CHANGELOG.json +427 -1
  2. package/CHANGELOG.md +140 -2
  3. package/dist/unstable.d.ts +174 -0
  4. package/lib/Concepts/Icons/ReactIconGrid.js +101 -94
  5. package/lib/Concepts/Icons/ReactIconGrid.js.map +1 -1
  6. package/lib/index.js +0 -1
  7. package/lib/index.js.map +1 -1
  8. package/lib/unstable/index.js +1 -1
  9. package/lib/unstable/index.js.map +1 -1
  10. package/lib-commonjs/Concepts/Icons/ReactIconGrid.js +28 -73
  11. package/lib-commonjs/Concepts/Icons/ReactIconGrid.js.map +1 -1
  12. package/lib-commonjs/index.js +0 -3
  13. package/lib-commonjs/index.js.map +1 -1
  14. package/lib-commonjs/unstable/index.js +40 -4
  15. package/lib-commonjs/unstable/index.js.map +1 -1
  16. package/package.json +44 -43
package/dist/unstable.d.ts CHANGED
@@ -3,6 +3,41 @@ import { alertClassNames } from '@fluentui/react-alert';
3
3
  import { AlertProps } from '@fluentui/react-alert';
4
4
  import { AlertSlots } from '@fluentui/react-alert';
5
5
  import { AlertState } from '@fluentui/react-alert';
6
+ import { Drawer } from '@fluentui/react-drawer';
7
+ import { DrawerBody } from '@fluentui/react-drawer';
8
+ import { drawerBodyClassNames } from '@fluentui/react-drawer';
9
+ import { DrawerBodySlots } from '@fluentui/react-drawer';
10
+ import { DrawerBodyState } from '@fluentui/react-drawer';
11
+ import { DrawerFooter } from '@fluentui/react-drawer';
12
+ import { drawerFooterClassNames } from '@fluentui/react-drawer';
13
+ import { DrawerFooterSlots } from '@fluentui/react-drawer';
14
+ import { DrawerFooterState } from '@fluentui/react-drawer';
15
+ import { DrawerHeader } from '@fluentui/react-drawer';
16
+ import { drawerHeaderClassNames } from '@fluentui/react-drawer';
17
+ import { DrawerHeaderNavigation } from '@fluentui/react-drawer';
18
+ import { drawerHeaderNavigationClassNames } from '@fluentui/react-drawer';
19
+ import { DrawerHeaderNavigationProps } from '@fluentui/react-drawer';
20
+ import { DrawerHeaderNavigationSlots } from '@fluentui/react-drawer';
21
+ import { DrawerHeaderNavigationState } from '@fluentui/react-drawer';
22
+ import { DrawerHeaderSlots } from '@fluentui/react-drawer';
23
+ import { DrawerHeaderState } from '@fluentui/react-drawer';
24
+ import { DrawerHeaderTitle } from '@fluentui/react-drawer';
25
+ import { drawerHeaderTitleClassNames } from '@fluentui/react-drawer';
26
+ import { DrawerHeaderTitleSlots } from '@fluentui/react-drawer';
27
+ import { DrawerHeaderTitleState } from '@fluentui/react-drawer';
28
+ import { DrawerInline } from '@fluentui/react-drawer';
29
+ import { drawerInlineClassNames } from '@fluentui/react-drawer';
30
+ import { DrawerInlineProps } from '@fluentui/react-drawer';
31
+ import { DrawerInlineSlots } from '@fluentui/react-drawer';
32
+ import { DrawerInlineState } from '@fluentui/react-drawer';
33
+ import { DrawerOverlay } from '@fluentui/react-drawer';
34
+ import { drawerOverlayClassNames } from '@fluentui/react-drawer';
35
+ import { DrawerOverlayProps } from '@fluentui/react-drawer';
36
+ import { DrawerOverlaySlots } from '@fluentui/react-drawer';
37
+ import { DrawerOverlayState } from '@fluentui/react-drawer';
38
+ import { DrawerProps } from '@fluentui/react-drawer';
39
+ import { DrawerSlots } from '@fluentui/react-drawer';
40
+ import { DrawerState } from '@fluentui/react-drawer';
6
41
  import { flattenTree_unstable } from '@fluentui/react-tree';
7
42
  import { FlatTree } from '@fluentui/react-tree';
8
43
  import { FlatTreeItem } from '@fluentui/react-tree';
@@ -20,6 +55,14 @@ import { InfoLabelSlots } from '@fluentui/react-infobutton';
20
55
  import { InfoLabelState } from '@fluentui/react-infobutton';
21
56
  import { NestedTreeItem } from '@fluentui/react-tree';
22
57
  import { renderAlert_unstable } from '@fluentui/react-alert';
58
+ import { renderDrawer_unstable } from '@fluentui/react-drawer';
59
+ import { renderDrawerBody_unstable } from '@fluentui/react-drawer';
60
+ import { renderDrawerFooter_unstable } from '@fluentui/react-drawer';
61
+ import { renderDrawerHeader_unstable } from '@fluentui/react-drawer';
62
+ import { renderDrawerHeaderNavigation_unstable } from '@fluentui/react-drawer';
63
+ import { renderDrawerHeaderTitle_unstable } from '@fluentui/react-drawer';
64
+ import { renderDrawerInline_unstable } from '@fluentui/react-drawer';
65
+ import { renderDrawerOverlay_unstable } from '@fluentui/react-drawer';
23
66
  import { renderInfoButton_unstable } from '@fluentui/react-infobutton';
24
67
  import { renderInfoLabel_unstable } from '@fluentui/react-infobutton';
25
68
  import { renderTree_unstable } from '@fluentui/react-tree';
@@ -66,6 +109,21 @@ import { TreeSlots } from '@fluentui/react-tree';
66
109
  import { TreeState } from '@fluentui/react-tree';
67
110
  import { useAlert_unstable } from '@fluentui/react-alert';
68
111
  import { useAlertStyles_unstable } from '@fluentui/react-alert';
112
+ import { useDrawer_unstable } from '@fluentui/react-drawer';
113
+ import { useDrawerBody_unstable } from '@fluentui/react-drawer';
114
+ import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
115
+ import { useDrawerFooter_unstable } from '@fluentui/react-drawer';
116
+ import { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';
117
+ import { useDrawerHeader_unstable } from '@fluentui/react-drawer';
118
+ import { useDrawerHeaderNavigation_unstable } from '@fluentui/react-drawer';
119
+ import { useDrawerHeaderNavigationStyles_unstable } from '@fluentui/react-drawer';
120
+ import { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';
121
+ import { useDrawerHeaderTitle_unstable } from '@fluentui/react-drawer';
122
+ import { useDrawerHeaderTitleStyles_unstable } from '@fluentui/react-drawer';
123
+ import { useDrawerInline_unstable } from '@fluentui/react-drawer';
124
+ import { useDrawerInlineStyles_unstable } from '@fluentui/react-drawer';
125
+ import { useDrawerOverlay_unstable } from '@fluentui/react-drawer';
126
+ import { useDrawerOverlayStyles_unstable } from '@fluentui/react-drawer';
69
127
  import { useDynamicVirtualizerMeasure } from '@fluentui/react-virtualizer';
70
128
  import { useFlatTree_unstable } from '@fluentui/react-tree';
71
129
  import { useInfoButton_unstable } from '@fluentui/react-infobutton';
@@ -125,6 +183,76 @@ export { AlertSlots }
125
183
 
126
184
  export { AlertState }
127
185
 
186
+ export { Drawer }
187
+
188
+ export { DrawerBody }
189
+
190
+ export { drawerBodyClassNames }
191
+
192
+ export { DrawerBodySlots }
193
+
194
+ export { DrawerBodyState }
195
+
196
+ export { DrawerFooter }
197
+
198
+ export { drawerFooterClassNames }
199
+
200
+ export { DrawerFooterSlots }
201
+
202
+ export { DrawerFooterState }
203
+
204
+ export { DrawerHeader }
205
+
206
+ export { drawerHeaderClassNames }
207
+
208
+ export { DrawerHeaderNavigation }
209
+
210
+ export { drawerHeaderNavigationClassNames }
211
+
212
+ export { DrawerHeaderNavigationProps }
213
+
214
+ export { DrawerHeaderNavigationSlots }
215
+
216
+ export { DrawerHeaderNavigationState }
217
+
218
+ export { DrawerHeaderSlots }
219
+
220
+ export { DrawerHeaderState }
221
+
222
+ export { DrawerHeaderTitle }
223
+
224
+ export { drawerHeaderTitleClassNames }
225
+
226
+ export { DrawerHeaderTitleSlots }
227
+
228
+ export { DrawerHeaderTitleState }
229
+
230
+ export { DrawerInline }
231
+
232
+ export { drawerInlineClassNames }
233
+
234
+ export { DrawerInlineProps }
235
+
236
+ export { DrawerInlineSlots }
237
+
238
+ export { DrawerInlineState }
239
+
240
+ export { DrawerOverlay }
241
+
242
+ export { drawerOverlayClassNames }
243
+
244
+ export { DrawerOverlayProps }
245
+
246
+ export { DrawerOverlaySlots }
247
+
248
+ export { DrawerOverlayState }
249
+
250
+ export { DrawerProps }
251
+
252
+ export { DrawerSlots }
253
+
254
+ export { DrawerState }
255
+
128
256
  export { flattenTree_unstable }
129
257
 
130
258
  export { FlatTree }
@@ -159,6 +287,22 @@ export { NestedTreeItem }
159
287
 
160
288
  export { renderAlert_unstable }
161
289
 
290
+ export { renderDrawer_unstable }
291
+
292
+ export { renderDrawerBody_unstable }
293
+
294
+ export { renderDrawerFooter_unstable }
295
+
296
+ export { renderDrawerHeader_unstable }
297
+
298
+ export { renderDrawerHeaderNavigation_unstable }
299
+
300
+ export { renderDrawerHeaderTitle_unstable }
301
+
302
+ export { renderDrawerInline_unstable }
303
+
304
+ export { renderDrawerOverlay_unstable }
305
+
162
306
  export { renderInfoButton_unstable }
163
307
 
164
308
  export { renderInfoLabel_unstable }
@@ -251,6 +395,36 @@ export { useAlert_unstable }
251
395
 
252
396
  export { useAlertStyles_unstable }
253
397
 
398
+ export { useDrawer_unstable }
399
+
400
+ export { useDrawerBody_unstable }
401
+
402
+ export { useDrawerBodyStyles_unstable }
403
+
404
+ export { useDrawerFooter_unstable }
405
+
406
+ export { useDrawerFooterStyles_unstable }
407
+
408
+ export { useDrawerHeader_unstable }
409
+
410
+ export { useDrawerHeaderNavigation_unstable }
411
+
412
+ export { useDrawerHeaderNavigationStyles_unstable }
413
+
414
+ export { useDrawerHeaderStyles_unstable }
415
+
416
+ export { useDrawerHeaderTitle_unstable }
417
+
418
+ export { useDrawerHeaderTitleStyles_unstable }
419
+
420
+ export { useDrawerInline_unstable }
421
+
422
+ export { useDrawerInlineStyles_unstable }
423
+
424
+ export { useDrawerOverlay_unstable }
425
+
426
+ export { useDrawerOverlayStyles_unstable }
427
+
254
428
  export { useDynamicVirtualizerMeasure }
255
429
 
256
430
  export { useFlatTree_unstable }
package/lib/Concepts/Icons/ReactIconGrid.js CHANGED
@@ -2,100 +2,107 @@ import * as React from 'react';
2
2
  // eslint-disable-next-line import/no-extraneous-dependencies
3
3
  import * as ReactIcons from '@fluentui/react-icons';
4
4
  import { Input } from '@fluentui/react-input';
5
- import { __styles, shorthands } from '@griffel/react';
6
- const useStyles = /*#__PURE__*/__styles({
7
- grid: {
8
- mc9l5x: "f13qh94s",
9
- Budl1dq: "f103s1qi",
10
- w08cwm: "fz44487",
11
- De3pzq: "f1vbpgwy",
12
- Bqyf3fh: "f1y7pwzt",
13
- tuaewz: "fkjsrz3",
14
- js62xs: "f1v4pbv1",
15
- ge08ax: "f10n702m",
16
- vwmem1: "fukf1g8",
17
- pq1t01: "f1ke9dqw",
18
- Bspu8ag: ["ft83mph", "fduese8"],
19
- B83reyd: "ffztlgx",
20
- d2aa3c: ["fduese8", "ft83mph"],
21
- Bo0llhl: "f1ad31ox",
22
- Bfpbev4: "f1pcllc0",
23
- Bs90se3: "fdkswtx",
24
- B83tkto: "f1yxgqk0",
25
- pxe6pr: "fg04g75",
26
- Beqvepd: "fvrpp50",
27
- Bq5m64l: ["f1xqymmk", "f1mqnmtg"],
28
- B0xcf35: "f12h2kxz",
29
- B9c2vit: ["f1mqnmtg", "f1xqymmk"]
30
- },
31
- searchBox: {
32
- De3pzq: "f1vbpgwy",
33
- B2u0y6b: "f1ogbl2p",
34
- jrapky: "f1dl2k97"
35
- },
36
- radio: {
37
- De3pzq: "f1vbpgwy",
38
- Be2twd7: "fnsq08h"
39
- }
40
- }, {
41
- d: [".f13qh94s{display:grid;}", ".f103s1qi{grid-template-columns:auto auto auto auto;}", ".fz44487{grid-gap:10px;}", ".f1vbpgwy{background-color:#F7F7F7;}", ".f1y7pwzt>div{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkjsrz3>div{background-color:#FFFFFF;}", ".f1v4pbv1>div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10n702m>div{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fukf1g8>div{-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;}", ".f1ke9dqw>div{padding-top:8px;}", ".ft83mph>div{padding-right:8px;}", ".fduese8>div{padding-left:8px;}", ".ffztlgx>div{padding-bottom:8px;}", ".f1ad31ox>div{overflow-x:hidden;}", ".f1pcllc0>div{overflow-y:hidden;}", ".fdkswtx>div>code{font-size:8px;}", ".f1yxgqk0>div>code{display:inline-block;}", ".fg04g75>div>code{height:auto;}", ".fvrpp50>div>code{padding-top:0px 8px;}", ".f1xqymmk>div>code{padding-right:0px 8px;}", ".f1mqnmtg>div>code{padding-left:0px 8px;}", ".f12h2kxz>div>code{padding-bottom:0px 8px;}", ".f1ogbl2p{max-width:320px;}", ".f1dl2k97{margin-bottom:10px;}", ".fnsq08h{font-size:11px;}"]
42
- });
43
- const reactIcons = /*#__PURE__*/Object.keys(ReactIcons) // eslint-disable-next-line @typescript-eslint/no-explicit-any
44
- .map(iconName => ReactIcons[iconName]).filter(icon => !!icon && !!icon.displayName);
45
- const ReactIconGrid = () => {
46
- const [search, setSearch] = React.useState('');
47
- const [size, setSize] = React.useState(24);
48
- const styles = useStyles();
49
- const _onSearchQueryChanged = ev => {
50
- setSearch(ev ? ev.currentTarget.value : '');
51
- };
52
- const _filterBySize = ev => {
53
- const newSize = ev ? ev.currentTarget.value : '';
54
- if (newSize === 'All') {
55
- setSize('');
56
- } else if (newSize === 'Unsized') {
57
- setSize('Unsized');
58
- } else {
59
- setSize(newSize);
5
+ import { makeStyles, shorthands } from '@griffel/react';
6
+ // eslint-disable-next-line @griffel/styles-file
7
+ const useStyles = makeStyles({
8
+ grid: {
9
+ display: 'grid',
10
+ gridTemplateColumns: 'auto auto auto auto',
11
+ gridGap: '10px',
12
+ backgroundColor: '#F7F7F7',
13
+ '> div': {
14
+ alignItems: 'center',
15
+ backgroundColor: '#FFFFFF',
16
+ display: 'flex',
17
+ flexDirection: 'column',
18
+ justifyContent: 'space-around',
19
+ ...shorthands.padding('8px'),
20
+ ...shorthands.overflow('hidden'),
21
+ '> code': {
22
+ fontSize: '8px',
23
+ display: 'inline-block',
24
+ height: 'auto',
25
+ ...shorthands.padding('0px 8px')
26
+ }
27
+ }
28
+ },
29
+ searchBox: {
30
+ backgroundColor: '#F7F7F7',
31
+ maxWidth: '320px',
32
+ marginBottom: '10px'
33
+ },
34
+ radio: {
35
+ backgroundColor: '#F7F7F7',
36
+ fontSize: '11px'
60
37
  }
61
- };
62
- const _renderIcon = Icon => {
63
- return /*#__PURE__*/React.createElement("div", {
64
- key: Icon.displayName,
65
- "aria-label": Icon.displayName
66
- }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("code", null, Icon.displayName));
67
- };
68
- const filteredIcons = React.useMemo(() => {
69
- return reactIcons.filter(icon => {
70
- var _icon_displayName, _icon_displayName1;
71
- if (size === 'Unsized') {
72
- var _icon_displayName2;
73
- return icon.displayName && !/\d/.test(icon.displayName.toLowerCase()) && ((_icon_displayName2 = icon.displayName) === null || _icon_displayName2 === void 0 ? void 0 : _icon_displayName2.toLowerCase().indexOf(search.toLowerCase())) !== -1;
74
- }
75
- return ((_icon_displayName = icon.displayName) === null || _icon_displayName === void 0 ? void 0 : _icon_displayName.toLowerCase().indexOf(search.toLowerCase())) !== -1 && ((_icon_displayName1 = icon.displayName) === null || _icon_displayName1 === void 0 ? void 0 : _icon_displayName1.indexOf(String(size))) !== -1;
76
- });
77
- }, [search, size]);
78
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
79
- type: "search",
80
- placeholder: "Search icons",
81
- value: search,
82
- "aria-label": "search",
83
- // eslint-disable-next-line react/jsx-no-bind
84
- onChange: _onSearchQueryChanged,
85
- className: styles.searchBox
86
- }), [16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
87
- id: `option-${option}`,
88
- defaultChecked: option === 24,
89
- type: "radio",
90
- value: option,
91
- name: "size",
92
- onChange: _filterBySize
93
- }), /*#__PURE__*/React.createElement("label", {
94
- htmlFor: `option-${option}`,
95
- className: styles.radio
96
- }, option))), /*#__PURE__*/React.createElement("div", {
97
- className: styles.grid
98
- }, filteredIcons.map(_renderIcon)));
38
+ });
39
+ const reactIcons = Object.keys(ReactIcons)// eslint-disable-next-line @typescript-eslint/no-explicit-any
40
+ .map((iconName)=>ReactIcons[iconName]).filter((icon)=>!!icon && !!icon.displayName);
41
+ const ReactIconGrid = ()=>{
42
+ const [search, setSearch] = React.useState('');
43
+ const [size, setSize] = React.useState(24);
44
+ const styles = useStyles();
45
+ const _onSearchQueryChanged = (ev)=>{
46
+ setSearch(ev ? ev.currentTarget.value : '');
47
+ };
48
+ const _filterBySize = (ev)=>{
49
+ const newSize = ev ? ev.currentTarget.value : '';
50
+ if (newSize === 'All') {
51
+ setSize('');
52
+ } else if (newSize === 'Unsized') {
53
+ setSize('Unsized');
54
+ } else {
55
+ setSize(newSize);
56
+ }
57
+ };
58
+ const _renderIcon = (Icon)=>{
59
+ return /*#__PURE__*/ React.createElement("div", {
60
+ key: Icon.displayName,
61
+ "aria-label": Icon.displayName
62
+ }, /*#__PURE__*/ React.createElement(Icon, null), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement("code", null, Icon.displayName));
63
+ };
64
+ const filteredIcons = React.useMemo(()=>{
65
+ return reactIcons.filter((icon)=>{
66
+ var _icon_displayName, _icon_displayName1;
67
+ if (size === 'Unsized') {
68
+ var _icon_displayName2;
69
+ return icon.displayName && !/\d/.test(icon.displayName.toLowerCase()) && ((_icon_displayName2 = icon.displayName) === null || _icon_displayName2 === void 0 ? void 0 : _icon_displayName2.toLowerCase().indexOf(search.toLowerCase())) !== -1;
70
+ }
71
+ return ((_icon_displayName = icon.displayName) === null || _icon_displayName === void 0 ? void 0 : _icon_displayName.toLowerCase().indexOf(search.toLowerCase())) !== -1 && ((_icon_displayName1 = icon.displayName) === null || _icon_displayName1 === void 0 ? void 0 : _icon_displayName1.indexOf(String(size))) !== -1;
72
+ });
73
+ }, [
74
+ search,
75
+ size
76
+ ]);
77
+ return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Input, {
78
+ type: "search",
79
+ placeholder: "Search icons",
80
+ value: search,
81
+ "aria-label": "search",
82
+ // eslint-disable-next-line react/jsx-no-bind
83
+ onChange: _onSearchQueryChanged,
84
+ className: styles.searchBox
85
+ }), [
86
+ 16,
87
+ 20,
88
+ 24,
89
+ 28,
90
+ 32,
91
+ 48,
92
+ 'Unsized',
93
+ 'All'
94
+ ].map((option)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", {
95
+ id: `option-${option}`,
96
+ defaultChecked: option === 24,
97
+ type: "radio",
98
+ value: option,
99
+ name: "size",
100
+ onChange: _filterBySize
101
+ }), /*#__PURE__*/ React.createElement("label", {
102
+ htmlFor: `option-${option}`,
103
+ className: styles.radio
104
+ }, option))), /*#__PURE__*/ React.createElement("div", {
105
+ className: styles.grid
106
+ }, filteredIcons.map(_renderIcon)));
99
107
  };
100
108
  export default ReactIconGrid;
101
- //# sourceMappingURL=ReactIconGrid.js.map
package/lib/Concepts/Icons/ReactIconGrid.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","ReactIcons","Input","__styles","shorthands","useStyles","grid","mc9l5x","Budl1dq","w08cwm","De3pzq","Bqyf3fh","tuaewz","js62xs","ge08ax","vwmem1","pq1t01","Bspu8ag","B83reyd","d2aa3c","Bo0llhl","Bfpbev4","Bs90se3","B83tkto","pxe6pr","Beqvepd","Bq5m64l","B0xcf35","B9c2vit","searchBox","B2u0y6b","jrapky","radio","Be2twd7","d","reactIcons","Object","keys","map","iconName","filter","icon","displayName","ReactIconGrid","search","setSearch","useState","size","setSize","styles","_onSearchQueryChanged","ev","currentTarget","value","_filterBySize","newSize","_renderIcon","Icon","createElement","key","filteredIcons","useMemo","_icon_displayName","_icon_displayName1","_icon_displayName2","test","toLowerCase","indexOf","String","type","placeholder","onChange","className","option","Fragment","id","defaultChecked","name","htmlFor"],"sources":["../../../src/Concepts/Icons/ReactIconGrid.tsx"],"sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { FluentIconsProps } from '@fluentui/react-icons';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as ReactIcons from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { makeStyles, shorthands } from '@griffel/react';\n\nconst useStyles = makeStyles({\n grid: {\n display: 'grid',\n gridTemplateColumns: 'auto auto auto auto',\n gridGap: '10px',\n backgroundColor: '#F7F7F7',\n\n '> div': {\n alignItems: 'center',\n backgroundColor: '#FFFFFF',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n ...shorthands.padding('8px'),\n ...shorthands.overflow('hidden'),\n\n '> code': {\n fontSize: '8px',\n display: 'inline-block',\n height: 'auto',\n ...shorthands.padding('0px 8px'),\n },\n },\n },\n\n searchBox: {\n backgroundColor: '#F7F7F7',\n maxWidth: '320px',\n marginBottom: '10px',\n },\n\n radio: {\n backgroundColor: '#F7F7F7',\n fontSize: '11px',\n },\n});\n\nconst reactIcons: React.FC<ReactIcons.FluentIconsProps>[] = Object.keys(ReactIcons)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .map(iconName => (ReactIcons as any)[iconName])\n .filter(icon => !!icon && !!icon.displayName);\n\nconst ReactIconGrid = () => {\n const [search, setSearch] = React.useState('');\n const [size, setSize] = React.useState<string | number>(24);\n const styles = useStyles();\n\n const _onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {\n setSearch(ev ? ev.currentTarget.value : '');\n };\n\n const _filterBySize = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>) => {\n const newSize = ev ? (ev.currentTarget as HTMLInputElement).value : '';\n if (newSize === 'All') {\n setSize('');\n } else if (newSize === 'Unsized') {\n setSize('Unsized');\n } else {\n setSize(newSize);\n }\n };\n\n const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n return (\n <div key={Icon.displayName} aria-label={Icon.displayName}>\n <Icon />\n <br />\n <code>{Icon.displayName}</code>\n </div>\n );\n };\n\n const filteredIcons = React.useMemo(\n () =>\n reactIcons.filter(icon => {\n if (size === 'Unsized') {\n return (\n icon.displayName! &&\n !/\\d/.test(icon.displayName.toLowerCase()) &&\n icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1\n );\n }\n\n return (\n icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n icon.displayName?.indexOf(String(size)) !== -1\n );\n }),\n [search, size],\n );\n\n return (\n <div>\n <Input\n type=\"search\"\n placeholder=\"Search icons\"\n value={search}\n aria-label=\"search\"\n // eslint-disable-next-line react/jsx-no-bind\n onChange={_onSearchQueryChanged}\n className={styles.searchBox}\n />\n {[16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => (\n <>\n <input\n id={`option-${option}`}\n defaultChecked={option === 24}\n type=\"radio\"\n value={option}\n name=\"size\"\n onChange={_filterBySize}\n />\n <label htmlFor={`option-${option}`} className={styles.radio}>\n {option}\n </label>\n </>\n ))}\n <div className={styles.grid}>{filteredIcons.map(_renderIcon)}</div>\n </div>\n );\n};\n\nexport default ReactIconGrid;\n"],"mappings":"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"}
1
+ {"version":3,"sources":["ReactIconGrid.tsx"],"sourcesContent":["import * as React from 'react';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { FluentIconsProps } from '@fluentui/react-icons';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport * as ReactIcons from '@fluentui/react-icons';\nimport { Input } from '@fluentui/react-input';\nimport { makeStyles, shorthands } from '@griffel/react';\n\n// eslint-disable-next-line @griffel/styles-file\nconst useStyles = makeStyles({\n grid: {\n display: 'grid',\n gridTemplateColumns: 'auto auto auto auto',\n gridGap: '10px',\n backgroundColor: '#F7F7F7',\n\n '> div': {\n alignItems: 'center',\n backgroundColor: '#FFFFFF',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n ...shorthands.padding('8px'),\n ...shorthands.overflow('hidden'),\n\n '> code': {\n fontSize: '8px',\n display: 'inline-block',\n height: 'auto',\n ...shorthands.padding('0px 8px'),\n },\n },\n },\n\n searchBox: {\n backgroundColor: '#F7F7F7',\n maxWidth: '320px',\n marginBottom: '10px',\n },\n\n radio: {\n backgroundColor: '#F7F7F7',\n fontSize: '11px',\n },\n});\n\nconst reactIcons: React.FC<ReactIcons.FluentIconsProps>[] = Object.keys(ReactIcons)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .map(iconName => (ReactIcons as any)[iconName])\n .filter(icon => !!icon && !!icon.displayName);\n\nconst ReactIconGrid = () => {\n const [search, setSearch] = React.useState('');\n const [size, setSize] = React.useState<string | number>(24);\n const styles = useStyles();\n\n const _onSearchQueryChanged = (ev?: React.FormEvent<HTMLInputElement>) => {\n setSearch(ev ? ev.currentTarget.value : '');\n };\n\n const _filterBySize = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>) => {\n const newSize = ev ? (ev.currentTarget as HTMLInputElement).value : '';\n if (newSize === 'All') {\n setSize('');\n } else if (newSize === 'Unsized') {\n setSize('Unsized');\n } else {\n setSize(newSize);\n }\n };\n\n const _renderIcon = (Icon: React.FC<FluentIconsProps>): JSX.Element => {\n return (\n <div key={Icon.displayName} aria-label={Icon.displayName}>\n <Icon />\n <br />\n <code>{Icon.displayName}</code>\n </div>\n );\n };\n\n const filteredIcons = React.useMemo(\n () =>\n reactIcons.filter(icon => {\n if (size === 'Unsized') {\n return (\n icon.displayName! &&\n !/\\d/.test(icon.displayName.toLowerCase()) &&\n icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1\n );\n }\n\n return (\n icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n icon.displayName?.indexOf(String(size)) !== -1\n );\n }),\n [search, size],\n );\n\n return (\n <div>\n <Input\n type=\"search\"\n placeholder=\"Search icons\"\n value={search}\n aria-label=\"search\"\n // eslint-disable-next-line react/jsx-no-bind\n onChange={_onSearchQueryChanged}\n className={styles.searchBox}\n />\n {[16, 20, 24, 28, 32, 48, 'Unsized', 'All'].map(option => (\n <>\n <input\n id={`option-${option}`}\n defaultChecked={option === 24}\n type=\"radio\"\n value={option}\n name=\"size\"\n onChange={_filterBySize}\n />\n <label htmlFor={`option-${option}`} className={styles.radio}>\n {option}\n </label>\n </>\n ))}\n <div className={styles.grid}>{filteredIcons.map(_renderIcon)}</div>\n </div>\n );\n};\n\nexport default ReactIconGrid;\n"],"names":["React","ReactIcons","Input","makeStyles","shorthands","useStyles","grid","display","gridTemplateColumns","gridGap","backgroundColor","alignItems","flexDirection","justifyContent","padding","overflow","fontSize","height","searchBox","maxWidth","marginBottom","radio","reactIcons","Object","keys","map","iconName","filter","icon","displayName","ReactIconGrid","search","setSearch","useState","size","setSize","styles","_onSearchQueryChanged","ev","currentTarget","value","_filterBySize","newSize","_renderIcon","Icon","div","key","aria-label","br","code","filteredIcons","useMemo","test","toLowerCase","indexOf","String","type","placeholder","onChange","className","option","input","id","defaultChecked","name","label","htmlFor"],"mappings":"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"}
package/lib/index.js CHANGED
@@ -39,4 +39,3 @@ export { Toolbar, ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButt
39
39
  export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable, TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable, TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable, Table, tableClassName, tableClassNames, useTableStyles_unstable, useTable_unstable, renderTable_unstable, TableHeader, tableHeaderClassNames, tableHeaderClassName, useTableHeaderStyles_unstable, useTableHeader_unstable, renderTableHeader_unstable, TableHeaderCell, tableHeaderCellClassName, tableHeaderCellClassNames, useTableHeaderCellStyles_unstable, useTableHeaderCell_unstable, renderTableHeaderCell_unstable, TableResizeHandle, tableResizeHandleClassNames, useTableResizeHandleStyles_unstable, useTableResizeHandle_unstable, renderTableResizeHandle_unstable, TableContextProvider, useTableContext, TableSelectionCell, useTableSelectionCellStyles_unstable, useTableSelectionCell_unstable, renderTableSelectionCell_unstable, tableSelectionCellClassNames, TableCellActions, useTableCellActionsStyles_unstable, useTableCellActions_unstable, renderTableCellActions_unstable, tableCellActionsClassNames, TableCellLayout, useTableCellLayout_unstable, useTableCellLayoutStyles_unstable, renderTableCellLayout_unstable, tableCellLayoutClassNames, useTableFeatures, useTableSelection, useTableSort, createTableColumn, DataGridCell, dataGridCellClassNames, useDataGridCellStyles_unstable, useDataGridCell_unstable, renderDataGridCell_unstable, DataGridRow, dataGridRowClassNames, useDataGridRowStyles_unstable, useDataGridRow_unstable, renderDataGridRow_unstable, DataGridBody, dataGridBodyClassNames, useDataGridBodyStyles_unstable, useDataGridBody_unstable, renderDataGridBody_unstable, DataGrid, dataGridClassNames, useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable, useDataGridContextValues_unstable, DataGridHeader, dataGridHeaderClassNames, useDataGridHeaderStyles_unstable, useDataGridHeader_unstable, renderDataGridHeader_unstable, DataGridHeaderCell, dataGridHeaderCellClassNames, useDataGridHeaderCellStyles_unstable, useDataGridHeaderCell_unstable, renderDataGridHeaderCell_unstable, DataGridSelectionCell, useDataGridSelectionCellStyles_unstable, useDataGridSelectionCell_unstable, renderDataGridSelectionCell_unstable, dataGridSelectionCellClassNames, TableRowIdContextProvider, useTableRowIdContext, useTableColumnSizing_unstable } from '@fluentui/react-table';
40
40
  export { Card, CardFooter, CardHeader, CardPreview, cardClassNames, cardCSSVars, cardFooterClassNames, cardHeaderClassNames, cardHeaderCSSVars, cardPreviewClassNames, renderCard_unstable, renderCardFooter_unstable, renderCardHeader_unstable, renderCardPreview_unstable, useCard_unstable, useCardFooter_unstable, useCardFooterStyles_unstable, useCardHeader_unstable, useCardHeaderStyles_unstable, useCardPreview_unstable, useCardPreviewStyles_unstable, useCardStyles_unstable } from '@fluentui/react-card';
41
41
  export { Field, fieldClassNames, FieldContextProvider, renderField_unstable, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
42
- //# sourceMappingURL=index.js.map