@fluentui/react-components 9.46.6 → 9.46.8

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 (6) hide show
  1. package/CHANGELOG.md +83 -2
  2. package/package.json +52 -53
  3. package/lib/Concepts/Icons/ReactIconGrid.js +0 -106
  4. package/lib/Concepts/Icons/ReactIconGrid.js.map +0 -1
  5. package/lib-commonjs/Concepts/Icons/ReactIconGrid.js +0 -116
  6. package/lib-commonjs/Concepts/Icons/ReactIconGrid.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,93 @@
1
1
  # Change Log - @fluentui/react-components
2
2
 
3
- This log was last generated on Wed, 28 Feb 2024 02:28:38 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 07 Mar 2024 19:26:53 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.46.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.46.8)
8
+
9
+ Thu, 07 Mar 2024 19:26:53 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.46.7..@fluentui/react-components_v9.46.8)
11
+
12
+ ### Minor changes
13
+
14
+ - `@fluentui/react-aria`
15
+ - feat: active descendants imperative handle to toggle attribute ([PR #30716](https://github.com/microsoft/fluentui/pull/30716) by bernardo.sunderhus@gmail.com)
16
+ - `@fluentui/react-migration-v8-v9`
17
+ - feat: Add color tokens ([PR #30412](https://github.com/microsoft/fluentui/pull/30412) by miroslav.stastny@microsoft.com)
18
+ - `@fluentui/react-popover`
19
+ - feat: Add usePopoverContextValues_unstable hook for simplified context ([PR #30423](https://github.com/microsoft/fluentui/pull/30423) by mifraser@microsoft.com)
20
+ - `@fluentui/react-positioning`
21
+ - feat: allow null on positioningRef setTarget ([PR #30662](https://github.com/microsoft/fluentui/pull/30662) by yuanboxue@microsoft.com)
22
+ - `@fluentui/react-rating-preview`
23
+ - breaking: Update icon api type to ElementType ([PR #30666](https://github.com/microsoft/fluentui/pull/30666) by ololubek@microsoft.com)
24
+ - `@fluentui/react-shared-contexts`
25
+ - feat: Deprecate legacy TeachingPopoverCarousel style hooks ([PR #30423](https://github.com/microsoft/fluentui/pull/30423) by mifraser@microsoft.com)
26
+ - `@fluentui/react-spinner`
27
+ - chore: Rewrite Spinner animation using only rotation transforms. ([PR #30567](https://github.com/microsoft/fluentui/pull/30567) by behowell@microsoft.com)
28
+ - `@fluentui/react-teaching-popover-preview`
29
+ - feat: Refactor carousel into a unified component, add navigation classes for nav icons ([PR #30423](https://github.com/microsoft/fluentui/pull/30423) by mifraser@microsoft.com)
30
+
31
+ ### Patches
32
+
33
+ - `@fluentui/react-accordion`
34
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
35
+ - `@fluentui/react-avatar`
36
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
37
+ - `@fluentui/react-combobox`
38
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
39
+ - `@fluentui/react-components`
40
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
41
+ - `@fluentui/react-context-selector`
42
+ - chore: update required version of scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
43
+ - `@fluentui/react-divider`
44
+ - fix: Updating tokens used in strong and subtle variants to match design spec. ([PR #27169](https://github.com/microsoft/fluentui/pull/27169) by kakrookaran@gmail.com)
45
+ - `@fluentui/react-infolabel`
46
+ - fix: InfoLabel popover dismisses if the InfoButton is clicked when it is already open ([PR #30731](https://github.com/microsoft/fluentui/pull/30731) by behowell@microsoft.com)
47
+ - `@fluentui/react-menu`
48
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
49
+ - `@fluentui/react-overflow`
50
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
51
+ - `@fluentui/react-popover`
52
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
53
+ - `@fluentui/react-provider`
54
+ - docs: Deprecate unused TeachingPopoverCarousel style hooks ([PR #30423](https://github.com/microsoft/fluentui/pull/30423) by mifraser@microsoft.com)
55
+ - `@fluentui/react-radio`
56
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
57
+ - `@fluentui/react-rating-preview`
58
+ - chore: Update jsdocs and stories in Rating ([PR #30653](https://github.com/microsoft/fluentui/pull/30653) by ololubek@microsoft.com)
59
+ - `@fluentui/react-table`
60
+ - fix: allRowsSelected is false when there are no rows ([PR #30706](https://github.com/microsoft/fluentui/pull/30706) by lingfangao@hotmail.com)
61
+ - `@fluentui/react-tabs`
62
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
63
+ - Removed unneeded zIndex from tab active indicator ([PR #30729](https://github.com/microsoft/fluentui/pull/30729) by gcox@microsoft.com)
64
+ - `@fluentui/react-toast`
65
+ - fix: Use semantic colours ([PR #30715](https://github.com/microsoft/fluentui/pull/30715) by lingfangao@hotmail.com)
66
+ - `@fluentui/react-tree`
67
+ - fix: aria-selected is no longer required for treeitem ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by sarah.higley@microsoft.com)
68
+
69
+ ### Changes
70
+
71
+ - `@fluentui/global-context`
72
+ - chore: remove invalid peerDependency on scheduler ([PR #30587](https://github.com/microsoft/fluentui/pull/30587) by olfedias@microsoft.com)
73
+ - `@fluentui/react-theme-sass`
74
+ - feat: Add color tokens ([PR #30412](https://github.com/microsoft/fluentui/pull/30412) by miroslav.stastny@microsoft.com)
75
+ - `@fluentui/tokens`
76
+ - feat: Add/update color tokens ([PR #30412](https://github.com/microsoft/fluentui/pull/30412) by miroslav.stastny@microsoft.com)
77
+
78
+ ## [9.46.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.46.7)
79
+
80
+ Thu, 29 Feb 2024 14:44:20 GMT
81
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.46.6..@fluentui/react-components_v9.46.7)
82
+
83
+ ### Minor changes
84
+
85
+ - `@fluentui/react-tags`
86
+ - feat: export TagGroupContextValues type ([PR #30645](https://github.com/microsoft/fluentui/pull/30645) by bernardo.sunderhus@gmail.com)
87
+
7
88
  ## [9.46.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-components_v9.46.6)
8
89
 
9
- Wed, 28 Feb 2024 02:28:38 GMT
90
+ Wed, 28 Feb 2024 02:34:17 GMT
10
91
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.46.5..@fluentui/react-components_v9.46.6)
11
92
 
12
93
  ### Minor changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-components",
3
- "version": "9.46.6",
3
+ "version": "9.46.8",
4
4
  "description": "Suite package for converged React components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -32,65 +32,64 @@
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-accordion": "^9.3.43",
36
- "@fluentui/react-alert": "9.0.0-beta.111",
37
- "@fluentui/react-avatar": "^9.6.16",
38
- "@fluentui/react-badge": "^9.2.26",
39
- "@fluentui/react-button": "^9.3.70",
40
- "@fluentui/react-card": "^9.0.69",
41
- "@fluentui/react-checkbox": "^9.2.14",
42
- "@fluentui/react-combobox": "^9.9.0",
43
- "@fluentui/react-dialog": "^9.9.12",
44
- "@fluentui/react-divider": "^9.2.62",
45
- "@fluentui/react-drawer": "^9.1.6",
46
- "@fluentui/react-field": "^9.1.55",
47
- "@fluentui/react-image": "^9.1.59",
48
- "@fluentui/react-infobutton": "9.0.0-beta.95",
49
- "@fluentui/react-infolabel": "^9.0.23",
50
- "@fluentui/react-input": "^9.4.65",
51
- "@fluentui/react-label": "^9.1.63",
52
- "@fluentui/react-link": "^9.2.12",
53
- "@fluentui/react-menu": "^9.13.1",
54
- "@fluentui/react-overflow": "^9.1.12",
55
- "@fluentui/react-persona": "^9.2.75",
56
- "@fluentui/react-portal": "^9.4.15",
57
- "@fluentui/react-popover": "^9.8.40",
58
- "@fluentui/react-positioning": "^9.13.5",
59
- "@fluentui/react-progress": "^9.1.65",
60
- "@fluentui/react-provider": "^9.13.13",
61
- "@fluentui/react-radio": "^9.2.9",
62
- "@fluentui/react-select": "^9.1.65",
63
- "@fluentui/react-shared-contexts": "^9.14.1",
64
- "@fluentui/react-skeleton": "^9.0.53",
65
- "@fluentui/react-slider": "^9.1.71",
66
- "@fluentui/react-spinbutton": "^9.2.65",
67
- "@fluentui/react-spinner": "^9.3.43",
68
- "@fluentui/react-switch": "^9.1.71",
69
- "@fluentui/react-table": "^9.11.12",
70
- "@fluentui/react-tabs": "^9.4.11",
71
- "@fluentui/react-tabster": "^9.19.2",
72
- "@fluentui/react-tags": "^9.0.29",
73
- "@fluentui/react-textarea": "^9.3.65",
74
- "@fluentui/react-theme": "^9.1.16",
75
- "@fluentui/react-toast": "^9.3.32",
76
- "@fluentui/react-toolbar": "^9.1.72",
77
- "@fluentui/react-tooltip": "^9.4.18",
78
- "@fluentui/react-utilities": "^9.18.2",
79
- "@fluentui/react-text": "^9.4.11",
80
- "@fluentui/react-virtualizer": "9.0.0-alpha.70",
81
- "@fluentui/react-tree": "^9.4.32",
35
+ "@fluentui/react-accordion": "^9.3.44",
36
+ "@fluentui/react-alert": "9.0.0-beta.112",
37
+ "@fluentui/react-avatar": "^9.6.17",
38
+ "@fluentui/react-badge": "^9.2.27",
39
+ "@fluentui/react-button": "^9.3.71",
40
+ "@fluentui/react-card": "^9.0.70",
41
+ "@fluentui/react-checkbox": "^9.2.15",
42
+ "@fluentui/react-combobox": "^9.9.1",
43
+ "@fluentui/react-dialog": "^9.9.13",
44
+ "@fluentui/react-divider": "^9.2.63",
45
+ "@fluentui/react-drawer": "^9.1.7",
46
+ "@fluentui/react-field": "^9.1.56",
47
+ "@fluentui/react-image": "^9.1.60",
48
+ "@fluentui/react-infobutton": "9.0.0-beta.96",
49
+ "@fluentui/react-infolabel": "^9.0.24",
50
+ "@fluentui/react-input": "^9.4.66",
51
+ "@fluentui/react-label": "^9.1.64",
52
+ "@fluentui/react-link": "^9.2.13",
53
+ "@fluentui/react-menu": "^9.13.2",
54
+ "@fluentui/react-overflow": "^9.1.13",
55
+ "@fluentui/react-persona": "^9.2.76",
56
+ "@fluentui/react-portal": "^9.4.16",
57
+ "@fluentui/react-popover": "^9.9.0",
58
+ "@fluentui/react-positioning": "^9.14.0",
59
+ "@fluentui/react-progress": "^9.1.66",
60
+ "@fluentui/react-provider": "^9.13.14",
61
+ "@fluentui/react-radio": "^9.2.10",
62
+ "@fluentui/react-select": "^9.1.66",
63
+ "@fluentui/react-shared-contexts": "^9.15.0",
64
+ "@fluentui/react-skeleton": "^9.0.54",
65
+ "@fluentui/react-slider": "^9.1.72",
66
+ "@fluentui/react-spinbutton": "^9.2.66",
67
+ "@fluentui/react-spinner": "^9.4.0",
68
+ "@fluentui/react-switch": "^9.1.72",
69
+ "@fluentui/react-table": "^9.11.13",
70
+ "@fluentui/react-tabs": "^9.4.12",
71
+ "@fluentui/react-tabster": "^9.19.3",
72
+ "@fluentui/react-tags": "^9.1.1",
73
+ "@fluentui/react-textarea": "^9.3.66",
74
+ "@fluentui/react-theme": "^9.1.17",
75
+ "@fluentui/react-toast": "^9.3.33",
76
+ "@fluentui/react-toolbar": "^9.1.73",
77
+ "@fluentui/react-tooltip": "^9.4.19",
78
+ "@fluentui/react-utilities": "^9.18.3",
79
+ "@fluentui/react-text": "^9.4.12",
80
+ "@fluentui/react-virtualizer": "9.0.0-alpha.71",
81
+ "@fluentui/react-tree": "^9.4.33",
82
82
  "@griffel/react": "^1.5.14",
83
83
  "@swc/helpers": "^0.5.1",
84
- "@fluentui/react-message-bar": "^9.0.21",
85
- "@fluentui/react-breadcrumb": "^9.0.16",
86
- "@fluentui/react-aria": "^9.9.1"
84
+ "@fluentui/react-message-bar": "^9.0.22",
85
+ "@fluentui/react-breadcrumb": "^9.0.17",
86
+ "@fluentui/react-aria": "^9.10.0"
87
87
  },
88
88
  "peerDependencies": {
89
89
  "@types/react": ">=16.14.0 <19.0.0",
90
90
  "@types/react-dom": ">=16.9.0 <19.0.0",
91
91
  "react": ">=16.14.0 <19.0.0",
92
- "react-dom": ">=16.14.0 <19.0.0",
93
- "scheduler": "^0.19.0 || ^0.20.0"
92
+ "react-dom": ">=16.14.0 <19.0.0"
94
93
  },
95
94
  "beachball": {
96
95
  "disallowedChangeTypes": [
package/lib/Concepts/Icons/ReactIconGrid.js DELETED
@@ -1,106 +0,0 @@
1
- import * as React from 'react';
2
- // eslint-disable-next-line import/no-extraneous-dependencies
3
- import * as ReactIcons from '@fluentui/react-icons';
4
- import { Input } from '@fluentui/react-input';
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'
37
- }
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(()=>reactIcons.filter((icon)=>{
65
- var _icon_displayName, _icon_displayName1;
66
- if (size === 'Unsized') {
67
- var _icon_displayName2;
68
- 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;
69
- }
70
- 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;
71
- }), [
72
- search,
73
- size
74
- ]);
75
- return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Input, {
76
- type: "search",
77
- placeholder: "Search icons",
78
- value: search,
79
- "aria-label": "search",
80
- // eslint-disable-next-line react/jsx-no-bind
81
- onChange: _onSearchQueryChanged,
82
- className: styles.searchBox
83
- }), [
84
- 16,
85
- 20,
86
- 24,
87
- 28,
88
- 32,
89
- 48,
90
- 'Unsized',
91
- 'All'
92
- ].map((option)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", {
93
- id: `option-${option}`,
94
- defaultChecked: option === 24,
95
- type: "radio",
96
- value: option,
97
- name: "size",
98
- onChange: _filterBySize
99
- }), /*#__PURE__*/ React.createElement("label", {
100
- htmlFor: `option-${option}`,
101
- className: styles.radio
102
- }, option))), /*#__PURE__*/ React.createElement("div", {
103
- className: styles.grid
104
- }, filteredIcons.map(_renderIcon)));
105
- };
106
- export default ReactIconGrid;
package/lib/Concepts/Icons/ReactIconGrid.js.map DELETED
@@ -1 +0,0 @@
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-commonjs/Concepts/Icons/ReactIconGrid.js DELETED
@@ -1,116 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "default", {
6
- enumerable: true,
7
- get: function() {
8
- return _default;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _reacticons = /*#__PURE__*/ _interop_require_wildcard._(require("@fluentui/react-icons"));
14
- const _reactinput = require("@fluentui/react-input");
15
- const _react1 = require("@griffel/react");
16
- // eslint-disable-next-line @griffel/styles-file
17
- const useStyles = (0, _react1.makeStyles)({
18
- grid: {
19
- display: 'grid',
20
- gridTemplateColumns: 'auto auto auto auto',
21
- gridGap: '10px',
22
- backgroundColor: '#F7F7F7',
23
- '> div': {
24
- alignItems: 'center',
25
- backgroundColor: '#FFFFFF',
26
- display: 'flex',
27
- flexDirection: 'column',
28
- justifyContent: 'space-around',
29
- ..._react1.shorthands.padding('8px'),
30
- ..._react1.shorthands.overflow('hidden'),
31
- '> code': {
32
- fontSize: '8px',
33
- display: 'inline-block',
34
- height: 'auto',
35
- ..._react1.shorthands.padding('0px 8px')
36
- }
37
- }
38
- },
39
- searchBox: {
40
- backgroundColor: '#F7F7F7',
41
- maxWidth: '320px',
42
- marginBottom: '10px'
43
- },
44
- radio: {
45
- backgroundColor: '#F7F7F7',
46
- fontSize: '11px'
47
- }
48
- });
49
- const reactIcons = Object.keys(_reacticons) // eslint-disable-next-line @typescript-eslint/no-explicit-any
50
- .map((iconName)=>_reacticons[iconName]).filter((icon)=>!!icon && !!icon.displayName);
51
- const ReactIconGrid = ()=>{
52
- const [search, setSearch] = _react.useState('');
53
- const [size, setSize] = _react.useState(24);
54
- const styles = useStyles();
55
- const _onSearchQueryChanged = (ev)=>{
56
- setSearch(ev ? ev.currentTarget.value : '');
57
- };
58
- const _filterBySize = (ev)=>{
59
- const newSize = ev ? ev.currentTarget.value : '';
60
- if (newSize === 'All') {
61
- setSize('');
62
- } else if (newSize === 'Unsized') {
63
- setSize('Unsized');
64
- } else {
65
- setSize(newSize);
66
- }
67
- };
68
- const _renderIcon = (Icon)=>{
69
- return /*#__PURE__*/ _react.createElement("div", {
70
- key: Icon.displayName,
71
- "aria-label": Icon.displayName
72
- }, /*#__PURE__*/ _react.createElement(Icon, null), /*#__PURE__*/ _react.createElement("br", null), /*#__PURE__*/ _react.createElement("code", null, Icon.displayName));
73
- };
74
- const filteredIcons = _react.useMemo(()=>reactIcons.filter((icon)=>{
75
- var _icon_displayName, _icon_displayName1;
76
- if (size === 'Unsized') {
77
- var _icon_displayName2;
78
- 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;
79
- }
80
- 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;
81
- }), [
82
- search,
83
- size
84
- ]);
85
- return /*#__PURE__*/ _react.createElement("div", null, /*#__PURE__*/ _react.createElement(_reactinput.Input, {
86
- type: "search",
87
- placeholder: "Search icons",
88
- value: search,
89
- "aria-label": "search",
90
- // eslint-disable-next-line react/jsx-no-bind
91
- onChange: _onSearchQueryChanged,
92
- className: styles.searchBox
93
- }), [
94
- 16,
95
- 20,
96
- 24,
97
- 28,
98
- 32,
99
- 48,
100
- 'Unsized',
101
- 'All'
102
- ].map((option)=>/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("input", {
103
- id: `option-${option}`,
104
- defaultChecked: option === 24,
105
- type: "radio",
106
- value: option,
107
- name: "size",
108
- onChange: _filterBySize
109
- }), /*#__PURE__*/ _react.createElement("label", {
110
- htmlFor: `option-${option}`,
111
- className: styles.radio
112
- }, option))), /*#__PURE__*/ _react.createElement("div", {
113
- className: styles.grid
114
- }, filteredIcons.map(_renderIcon)));
115
- };
116
- const _default = ReactIconGrid;
package/lib-commonjs/Concepts/Icons/ReactIconGrid.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["ReactIconGrid.js"],"sourcesContent":["import * as React from 'react';\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// 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 '> 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 '> code': {\n fontSize: '8px',\n display: 'inline-block',\n height: 'auto',\n ...shorthands.padding('0px 8px')\n }\n }\n },\n searchBox: {\n backgroundColor: '#F7F7F7',\n maxWidth: '320px',\n marginBottom: '10px'\n },\n radio: {\n backgroundColor: '#F7F7F7',\n fontSize: '11px'\n }\n});\nconst reactIcons = Object.keys(ReactIcons)// eslint-disable-next-line @typescript-eslint/no-explicit-any\n.map((iconName)=>ReactIcons[iconName]).filter((icon)=>!!icon && !!icon.displayName);\nconst ReactIconGrid = ()=>{\n const [search, setSearch] = React.useState('');\n const [size, setSize] = React.useState(24);\n const styles = useStyles();\n const _onSearchQueryChanged = (ev)=>{\n setSearch(ev ? ev.currentTarget.value : '');\n };\n const _filterBySize = (ev)=>{\n const newSize = ev ? ev.currentTarget.value : '';\n if (newSize === 'All') {\n setSize('');\n } else if (newSize === 'Unsized') {\n setSize('Unsized');\n } else {\n setSize(newSize);\n }\n };\n const _renderIcon = (Icon)=>{\n return /*#__PURE__*/ React.createElement(\"div\", {\n key: Icon.displayName,\n \"aria-label\": Icon.displayName\n }, /*#__PURE__*/ React.createElement(Icon, null), /*#__PURE__*/ React.createElement(\"br\", null), /*#__PURE__*/ React.createElement(\"code\", null, Icon.displayName));\n };\n const filteredIcons = React.useMemo(()=>reactIcons.filter((icon)=>{\n var _icon_displayName, _icon_displayName1;\n if (size === 'Unsized') {\n var _icon_displayName2;\n 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;\n }\n 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;\n }), [\n search,\n size\n ]);\n return /*#__PURE__*/ React.createElement(\"div\", null, /*#__PURE__*/ React.createElement(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,\n 20,\n 24,\n 28,\n 32,\n 48,\n 'Unsized',\n 'All'\n ].map((option)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(\"input\", {\n id: `option-${option}`,\n defaultChecked: option === 24,\n type: \"radio\",\n value: option,\n name: \"size\",\n onChange: _filterBySize\n }), /*#__PURE__*/ React.createElement(\"label\", {\n htmlFor: `option-${option}`,\n className: styles.radio\n }, option))), /*#__PURE__*/ React.createElement(\"div\", {\n className: styles.grid\n }, filteredIcons.map(_renderIcon)));\n};\nexport default ReactIconGrid;\n"],"names":["useStyles","makeStyles","grid","display","gridTemplateColumns","gridGap","backgroundColor","alignItems","flexDirection","justifyContent","shorthands","padding","overflow","fontSize","height","searchBox","maxWidth","marginBottom","radio","reactIcons","Object","keys","ReactIcons","map","iconName","filter","icon","displayName","ReactIconGrid","search","setSearch","React","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","Input","type","placeholder","onChange","className","option","Fragment","id","defaultChecked","name","htmlFor"],"mappings":"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"}