@fluentui/react-components 9.7.4 → 9.8.0

package/lib-commonjs/Concepts/Icons/ReactIconGrid.js

@@ -3,69 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const React = /*#__PURE__*/require("react"); // eslint-disable-next-line import/no-extraneous-dependencies
-
-
+const React = /*#__PURE__*/require("react");
+// eslint-disable-next-line import/no-extraneous-dependencies
 const ReactIcons = /*#__PURE__*/require("@fluentui/react-icons");
-
 const react_input_1 = /*#__PURE__*/require("@fluentui/react-input");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "grid": {
-    "mc9l5x": "f13qh94s",
-    "Budl1dq": "f103s1qi",
-    "w08cwm": "fz44487",
-    "De3pzq": "f1vbpgwy",
-    "Bqyf3fh": "f1y7pwzt",
-    "tuaewz": "fkjsrz3",
-    "js62xs": "f1v4pbv1",
-    "ge08ax": "f10n702m",
-    "vwmem1": "fukf1g8",
-    "pq1t01": "f1ke9dqw",
-    "Bspu8ag": ["ft83mph", "fduese8"],
-    "B83reyd": "ffztlgx",
-    "d2aa3c": ["fduese8", "ft83mph"],
-    "Bo0llhl": "f1ad31ox",
-    "Bfpbev4": "f1pcllc0",
-    "Bs90se3": "fdkswtx",
-    "B83tkto": "f1yxgqk0",
-    "pxe6pr": "fg04g75",
-    "Beqvepd": "fvrpp50",
-    "Bq5m64l": ["f1xqymmk", "f1mqnmtg"],
-    "B0xcf35": "f12h2kxz",
-    "B9c2vit": ["f1mqnmtg", "f1xqymmk"]
+  grid: {
+    mc9l5x: "f13qh94s",
+    Budl1dq: "f103s1qi",
+    w08cwm: "fz44487",
+    De3pzq: "f1vbpgwy",
+    Bqyf3fh: "f1y7pwzt",
+    tuaewz: "fkjsrz3",
+    js62xs: "f1v4pbv1",
+    ge08ax: "f10n702m",
+    vwmem1: "fukf1g8",
+    pq1t01: "f1ke9dqw",
+    Bspu8ag: ["ft83mph", "fduese8"],
+    B83reyd: "ffztlgx",
+    d2aa3c: ["fduese8", "ft83mph"],
+    Bo0llhl: "f1ad31ox",
+    Bfpbev4: "f1pcllc0",
+    Bs90se3: "fdkswtx",
+    B83tkto: "f1yxgqk0",
+    pxe6pr: "fg04g75",
+    Beqvepd: "fvrpp50",
+    Bq5m64l: ["f1xqymmk", "f1mqnmtg"],
+    B0xcf35: "f12h2kxz",
+    B9c2vit: ["f1mqnmtg", "f1xqymmk"]
   },
-  "searchBox": {
-    "De3pzq": "f1vbpgwy",
-    "B2u0y6b": "f1ogbl2p",
-    "jrapky": "f1dl2k97"
+  searchBox: {
+    De3pzq: "f1vbpgwy",
+    B2u0y6b: "f1ogbl2p",
+    jrapky: "f1dl2k97"
   },
-  "radio": {
-    "De3pzq": "f1vbpgwy",
-    "Be2twd7": "fnsq08h"
+  radio: {
+    De3pzq: "f1vbpgwy",
+    Be2twd7: "fnsq08h"
   }
 }, {
-  "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;}"]
+  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;}"]
 });
-
-const reactIcons = /*#__PURE__*/Object.keys(ReactIcons) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+const reactIcons = /*#__PURE__*/Object.keys(ReactIcons)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 .map(iconName => ReactIcons[iconName]).filter(icon => !!icon && !!icon.displayName);
-
 const ReactIconGrid = () => {
   const [search, setSearch] = React.useState('');
   const [size, setSize] = React.useState(24);
   const styles = useStyles();
-
   const _onSearchQueryChanged = ev => {
     setSearch(ev ? ev.currentTarget.value : '');
   };
-
   const _filterBySize = ev => {
     const newSize = ev ? ev.currentTarget.value : '';
-
     if (newSize === 'All') {
       setSize('');
     } else if (newSize === 'Unsized') {
@@ -74,17 +65,14 @@ const ReactIconGrid = () => {
       setSize(newSize);
     }
   };
-
   const _renderIcon = Icon => {
     return React.createElement("div", {
       key: Icon.displayName,
       "aria-label": Icon.displayName
     }, React.createElement(Icon, null), React.createElement("br", null), React.createElement("code", null, Icon.displayName));
   };
-
   const filteredIcons = React.useMemo(() => reactIcons.filter(icon => {
     var _a, _b;
-
     return size === 'Unsized' ? icon.displayName && !/\d/.test(icon.displayName.toLowerCase()) : ((_a = icon.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(search.toLowerCase())) !== -1 && ((_b = icon.displayName) === null || _b === void 0 ? void 0 : _b.indexOf(String(size))) !== -1;
   }), [search, size]);
   return React.createElement("div", null, React.createElement(react_input_1.Input, {
@@ -109,6 +97,5 @@ const ReactIconGrid = () => {
     className: styles.grid
   }, filteredIcons.map(_renderIcon)));
 };
-
 exports.default = ReactIconGrid;
 //# sourceMappingURL=ReactIconGrid.js.map

package/lib-commonjs/Concepts/Icons/ReactIconGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-components/src/Concepts/Icons/ReactIconGrid.tsx"],"names":[],"mappings":"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","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        size === 'Unsized'\n          ? icon.displayName! && !/\\d/.test(icon.displayName.toLowerCase())\n          : icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n            icon.displayName?.indexOf(String(size)) !== -1,\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["useStyles","react_1","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","key","filteredIcons","useMemo","test","toLowerCase","indexOf","String","react_input_1","type","placeholder","onChange","className","searchBox","option","id","defaultChecked","name","htmlFor","radio","grid","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-components/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        size === 'Unsized'\n          ? icon.displayName! && !/\\d/.test(icon.displayName.toLowerCase())\n          : icon.displayName?.toLowerCase().indexOf(search.toLowerCase()) !== -1 &&\n            icon.displayName?.indexOf(String(size)) !== -1,\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"]}