fix: No maxLength label is displayed for arrays of items #1701 (#1765)

* fix: No maxLength label is displayed for arrays of items #1701 * Revert "fix: No maxLength label is displayed for arrays of items #1701" This reverts commit 543ecc4d39. * fix: No maxLength label is displayed for arrays of items #1701 * change array items display * fix alignment * remove theme font from labels * update snapshot Co-authored-by: Oprysk <vyacheslav@redocly.com>
2024-11-21 16:16:33 +03:00 · 2022-01-05 17:11:05 +02:00 · 2022-01-05 17:11:05 +02:00 · 6c7685e5fa
commit 6c7685e5fa
parent 2474b76d0d
19 changed files with 554 additions and 362 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -17,7 +17,7 @@ module.exports = {
      version: 'detect',
    },
  },
-  plugins: ['@typescript-eslint', 'import'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'import'],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
@ -31,6 +31,8 @@ module.exports = {
    '@typescript-eslint/no-var-requires': 'off',

    'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',

    'import/no-extraneous-dependencies': 'error',
    'import/no-internal-modules': [
--- a/.github/workflows/publish-cli.yml
+++ b/.github/workflows/publish-cli.yml
@ -5,53 +5,52 @@ on:
    branches:
      - master

-
 jobs:
  bundle:
-    needs: [ check-version-cli ]
+    needs: [check-version-cli]
    if: needs.check-version-cli.outputs.changed == 'true'
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-    - name: Cache node modules
-      uses: actions/cache@v2
-      with:
-        path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
-        key: npm-${{ hashFiles('package-lock.json') }}
-        restore-keys: |
-          npm-${{ hashFiles('package-lock.json') }}
-          npm-
-    - run: npm ci
-    - run: npm run bundle
-    - name: Store bundle artifact
-      uses: actions/upload-artifact@v2
-      with:
-        name: bundles-cli
-        path: bundles
-        retention-days: 1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            npm-${{ hashFiles('package-lock.json') }}
+            npm-
+      - run: npm ci
+      - run: npm run bundle
+      - name: Store bundle artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundles-cli
+          path: bundles
+          retention-days: 1
  unit-tests:
-    needs: [ check-version-cli ]
+    needs: [check-version-cli]
    if: needs.check-version-cli.outputs.changed == 'true'
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v1
-    - run: npm ci
-    - run: npm test
+      - uses: actions/checkout@v1
+      - run: npm ci
+      - run: npm test
  e2e-tests:
-    needs: [ bundle ]
+    needs: [bundle]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v1
-    - run: npm ci
-    - name: Download bundled artifact
-      uses: actions/download-artifact@v2
-      with:
-        name: bundles-cli
-        path: bundles
-    - run: npm run e2e
+      - uses: actions/checkout@v1
+      - run: npm ci
+      - name: Download bundled artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: bundles-cli
+          path: bundles
+      - run: npm run e2e
  bundle-cli:
-    needs: [ check-version-cli ]
+    needs: [check-version-cli]
    if: needs.check-version-cli.outputs.changed == 'true'
    runs-on: ubuntu-latest
    steps:
@ -99,7 +98,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v1
        with:
-          node-version: "14.x"
+          node-version: '14.x'
          registry-url: 'https://registry.npmjs.org'
      - uses: actions/checkout@v2
      - name: Download cli bundled artifact
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@ -9,42 +9,42 @@ jobs:
  bundle:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-    - name: Cache node modules
-      uses: actions/cache@v2
-      with:
-        path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
-        key: npm-${{ hashFiles('package-lock.json') }}
-        restore-keys: |
-          npm-${{ hashFiles('package-lock.json') }}
-          npm-
-    - run: npm ci
-    - run: npm run bundle
-    - name: Store bundle artifact
-      uses: actions/upload-artifact@v2
-      with:
-        name: bundles
-        path: bundles
-        retention-days: 1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            npm-${{ hashFiles('package-lock.json') }}
+            npm-
+      - run: npm ci
+      - run: npm run bundle
+      - name: Store bundle artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundles
+          path: bundles
+          retention-days: 1
  unit-tests:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v1
-    - run: npm ci
-    - run: npm test
+      - uses: actions/checkout@v1
+      - run: npm ci
+      - run: npm test
  e2e-tests:
    needs: [bundle]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v1
-    - run: npm ci
-    - name: Download bundled artifact
-      uses: actions/download-artifact@v2
-      with:
-        name: bundles
-        path: bundles
-    - run: npm run e2e
+      - uses: actions/checkout@v1
+      - run: npm ci
+      - name: Download bundled artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: bundles
+          path: bundles
+      - run: npm run e2e
  # disable this for now
  # deploy-demo:
  #   needs: [bundle, unit-tests, e2e-tests]
@ -76,7 +76,7 @@ jobs:
    steps:
      - uses: actions/setup-node@v1
        with:
-          node-version: "14.x"
+          node-version: '14.x'
          registry-url: 'https://registry.npmjs.org'
      - uses: actions/checkout@v2
      - name: Download bundled artifacts
--- a/demo/webpack.config.ts
+++ b/demo/webpack.config.ts
@ -37,6 +37,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
    port: 9090,
    hot: true,
    historyApiFallback: true,
+    open: true,
  },
  stats: {
    children: true,
--- a/e2e/integration/search.e2e.ts
+++ b/e2e/integration/search.e2e.ts
@ -56,7 +56,7 @@ describe('Search', () => {

  it('should show proper message when no search results are found', () => {
    getSearchResults().should('not.exist');
-    getSearchInput().type('xzss', {force: true});
+    getSearchInput().type('xzss', { force: true });
    getSearchResults().should('exist').should('contain', 'No results found');
-  })
+  });
 });
--- a/package-lock.json
+++ b/package-lock.json
@ -86,7 +86,8 @@
        "enzyme-to-json": "^3.6.2",
        "eslint": "^7.27.0",
        "eslint-plugin-import": "^2.23.4",
-        "eslint-plugin-react": "^7.24.0",
+        "eslint-plugin-react": "^7.25.1",
+        "eslint-plugin-react-hooks": "^4.2.0",
        "fork-ts-checker-webpack-plugin": "^6.2.10",
        "html-webpack-plugin": "^5.3.1",
        "husky": "^7.0.0",
@ -3968,16 +3969,16 @@
      "dev": true
    },
    "node_modules/array-includes": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
-      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz",
+      "integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
+        "es-abstract": "^1.19.1",
        "get-intrinsic": "^1.1.1",
-        "is-string": "^1.0.5"
+        "is-string": "^1.0.7"
      },
      "engines": {
        "node": ">= 0.4"
@ -4032,15 +4033,14 @@
      }
    },
    "node_modules/array.prototype.flatmap": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
-      "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
+      "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.0",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1",
-        "function-bind": "^1.1.1"
+        "es-abstract": "^1.19.0"
      },
      "engines": {
        "node": ">= 0.4"
@ -6642,22 +6642,26 @@
      }
    },
    "node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+      "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "es-to-primitive": "^1.2.1",
        "function-bind": "^1.1.1",
        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
        "has": "^1.0.3",
        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.1",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.1",
+        "object-inspect": "^1.11.0",
        "object-keys": "^1.1.1",
        "object.assign": "^4.1.2",
        "string.prototype.trimend": "^1.0.4",
@ -6979,29 +6983,43 @@
      "dev": true
    },
    "node_modules/eslint-plugin-react": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
-      "integrity": "sha512-KJJIx2SYx7PBx3ONe/mEeMz4YE0Lcr7feJTCMyyKb/341NcjuAgim3Acgan89GfPv7nxXK2+0slu0CWXYM4x+Q==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz",
+      "integrity": "sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==",
      "dev": true,
      "dependencies": {
-        "array-includes": "^3.1.3",
-        "array.prototype.flatmap": "^1.2.4",
+        "array-includes": "^3.1.4",
+        "array.prototype.flatmap": "^1.2.5",
        "doctrine": "^2.1.0",
-        "has": "^1.0.3",
+        "estraverse": "^5.3.0",
        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
        "minimatch": "^3.0.4",
-        "object.entries": "^1.1.4",
-        "object.fromentries": "^2.0.4",
-        "object.values": "^1.1.4",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.0",
+        "object.values": "^1.1.5",
        "prop-types": "^15.7.2",
        "resolve": "^2.0.0-next.3",
-        "string.prototype.matchall": "^4.0.5"
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.6"
      },
      "engines": {
        "node": ">=4"
      },
      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
+      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
      }
    },
    "node_modules/eslint-plugin-react/node_modules/doctrine": {
@ -7016,6 +7034,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/eslint-plugin-react/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
    "node_modules/eslint-plugin-react/node_modules/resolve": {
      "version": "2.0.0-next.3",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
@ -8578,6 +8605,22 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/getos": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
@ -8898,6 +8941,21 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/he": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@ -9472,9 +9530,9 @@
      }
    },
    "node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
      "dev": true,
      "engines": {
        "node": ">= 0.4"
@ -9688,13 +9746,13 @@
      "dev": true
    },
    "node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
+        "has-tostringtag": "^1.0.0"
      },
      "engines": {
        "node": ">= 0.4"
@ -9703,6 +9761,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
+      "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
@ -9713,10 +9780,13 @@
      }
    },
    "node_modules/is-string": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz",
-      "integrity": "sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
      "engines": {
        "node": ">= 0.4"
      },
@ -9781,6 +9851,18 @@
      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
      "dev": true
    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-wsl": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@ -13661,9 +13743,9 @@
      }
    },
    "node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@ -13713,29 +13795,28 @@
      }
    },
    "node_modules/object.entries": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
-      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
+        "es-abstract": "^1.19.1"
      },
      "engines": {
        "node": ">= 0.4"
      }
    },
    "node_modules/object.fromentries": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.4.tgz",
-      "integrity": "sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has": "^1.0.3"
+        "es-abstract": "^1.19.1"
      },
      "engines": {
        "node": ">= 0.4"
@ -13744,15 +13825,28 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/object.hasown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
+      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/object.values": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
-      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
+        "es-abstract": "^1.19.1"
      },
      "engines": {
        "node": ">= 0.4"
@ -16426,14 +16520,14 @@
      }
    },
    "node_modules/string.prototype.matchall": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz",
-      "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz",
+      "integrity": "sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==",
      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2",
+        "es-abstract": "^1.19.1",
        "get-intrinsic": "^1.1.1",
        "has-symbols": "^1.0.2",
        "internal-slot": "^1.0.3",
@ -21770,16 +21864,16 @@
      "dev": true
    },
    "array-includes": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
-      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz",
+      "integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
+        "es-abstract": "^1.19.1",
        "get-intrinsic": "^1.1.1",
-        "is-string": "^1.0.5"
+        "is-string": "^1.0.7"
      }
    },
    "array-union": {
@ -21813,15 +21907,14 @@
      }
    },
    "array.prototype.flatmap": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
-      "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
+      "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.0",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1",
-        "function-bind": "^1.1.1"
+        "es-abstract": "^1.19.0"
      }
    },
    "arrify": {
@ -23852,22 +23945,26 @@
      }
    },
    "es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+      "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "es-to-primitive": "^1.2.1",
        "function-bind": "^1.1.1",
        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
        "has": "^1.0.3",
        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.1",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.1",
+        "object-inspect": "^1.11.0",
        "object-keys": "^1.1.1",
        "object.assign": "^4.1.2",
        "string.prototype.trimend": "^1.0.4",
@ -24282,23 +24379,25 @@
      }
    },
    "eslint-plugin-react": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
-      "integrity": "sha512-KJJIx2SYx7PBx3ONe/mEeMz4YE0Lcr7feJTCMyyKb/341NcjuAgim3Acgan89GfPv7nxXK2+0slu0CWXYM4x+Q==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz",
+      "integrity": "sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==",
      "dev": true,
      "requires": {
-        "array-includes": "^3.1.3",
-        "array.prototype.flatmap": "^1.2.4",
+        "array-includes": "^3.1.4",
+        "array.prototype.flatmap": "^1.2.5",
        "doctrine": "^2.1.0",
-        "has": "^1.0.3",
+        "estraverse": "^5.3.0",
        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
        "minimatch": "^3.0.4",
-        "object.entries": "^1.1.4",
-        "object.fromentries": "^2.0.4",
-        "object.values": "^1.1.4",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.0",
+        "object.values": "^1.1.5",
        "prop-types": "^15.7.2",
        "resolve": "^2.0.0-next.3",
-        "string.prototype.matchall": "^4.0.5"
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.6"
      },
      "dependencies": {
        "doctrine": {
@ -24310,6 +24409,12 @@
            "esutils": "^2.0.2"
          }
        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
        "resolve": {
          "version": "2.0.0-next.3",
          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
@ -24322,6 +24427,13 @@
        }
      }
    },
+    "eslint-plugin-react-hooks": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
+      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+      "dev": true,
+      "requires": {}
+    },
    "eslint-scope": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@ -25338,6 +25450,16 @@
        "pump": "^3.0.0"
      }
    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
    "getos": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
@ -25579,6 +25701,15 @@
      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
      "dev": true
    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
    "he": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@ -26006,9 +26137,9 @@
      }
    },
    "is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
      "dev": true
    },
    "is-ci": {
@ -26141,15 +26272,21 @@
      "dev": true
    },
    "is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
+        "has-tostringtag": "^1.0.0"
      }
    },
+    "is-shared-array-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
+      "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==",
+      "dev": true
+    },
    "is-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
@ -26157,10 +26294,13 @@
      "dev": true
    },
    "is-string": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz",
-      "integrity": "sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==",
-      "dev": true
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
    },
    "is-subset": {
      "version": "0.1.1",
@ -26204,6 +26344,15 @@
      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
      "dev": true
    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
    "is-wsl": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@ -29133,9 +29282,9 @@
      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
      "dev": true
    },
    "object-is": {
@ -29167,37 +29316,46 @@
      }
    },
    "object.entries": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
-      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
+        "es-abstract": "^1.19.1"
      }
    },
    "object.fromentries": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.4.tgz",
-      "integrity": "sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has": "^1.0.3"
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.hasown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
+      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
      }
    },
    "object.values": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
-      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
+        "es-abstract": "^1.19.1"
      }
    },
    "obuf": {
@ -31313,14 +31471,14 @@
      }
    },
    "string.prototype.matchall": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz",
-      "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz",
+      "integrity": "sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==",
      "dev": true,
      "requires": {
        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2",
+        "es-abstract": "^1.19.1",
        "get-intrinsic": "^1.1.1",
        "has-symbols": "^1.0.2",
        "internal-slot": "^1.0.3",
--- a/package.json
+++ b/package.json
@ -113,7 +113,8 @@
    "enzyme-to-json": "^3.6.2",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
    "fork-ts-checker-webpack-plugin": "^6.2.10",
    "html-webpack-plugin": "^5.3.1",
    "husky": "^7.0.0",
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@ -96,7 +96,6 @@ export const ConstraintItem = styled(FieldLabel)`
    margin: 0 ${theme.spacing.unit}px;
    padding: 0 ${theme.spacing.unit}px;
    border: 1px solid ${transparentize(0.9, theme.colors.primary.main)};
-    font-family: ${theme.typography.code.fontFamily};
 }`};
  & + & {
    margin-left: 0;
--- a/src/common-elements/linkify.tsx
+++ b/src/common-elements/linkify.tsx
@ -43,7 +43,7 @@ export function Link(props: { to: string; className?: string; children?: any })
      if (!store) return;
      navigate(store.menu.history, event, props.to);
    },
-    [store],
+    [store, props.to],
  );

  if (!store) return null;
--- a/src/components/Fields/ArrayItemDetails.tsx
+++ b/src/components/Fields/ArrayItemDetails.tsx
@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TypeFormat, TypePrefix } from '../../common-elements/fields';
+import { ConstraintsView } from './FieldContstraints';
+import { Pattern } from './Pattern';
+import { SchemaModel } from '../../services';
+import styled from '../../styled-components';
+
+export function ArrayItemDetails({ schema }: { schema: SchemaModel }) {
+  if (!schema || (schema.type === 'string' && !schema.constraints.length)) return null;
+
+  return (
+    <Wrapper>
+      [ items
+      {schema.displayFormat && <TypeFormat>{` &lt;${schema.displayFormat}&gt; `}</TypeFormat>}
+      <ConstraintsView constraints={schema.constraints} />
+      <Pattern schema={schema} />
+      {schema.items && <ArrayItemDetails schema={schema.items} />} ]
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(TypePrefix)`
+  margin: 0 5px;
+  vertical-align: text-top;
+`;
--- a/src/components/Fields/EnumValues.tsx
+++ b/src/components/Fields/EnumValues.tsx
@ -8,7 +8,7 @@ import { RedocRawOptions } from '../../services/RedocNormalizedOptions';

 export interface EnumValuesProps {
  values: string[];
-  type: string | string[];
+  isArrayType: boolean;
 }

 export interface EnumValuesState {
@ -27,7 +27,7 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
  }

  render() {
-    const { values, type } = this.props;
+    const { values, isArrayType } = this.props;
    const { collapsed } = this.state;

    // TODO: provide context interface in more elegant way
@ -55,7 +55,7 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
    return (
      <div>
        <FieldLabel>
-          {type === 'array' ? l('enumArray') : ''}{' '}
+          {isArrayType ? l('enumArray') : ''}{' '}
          {values.length === 1 ? l('enumSingleValue') : l('enum')}:
        </FieldLabel>{' '}
        {displayedItems.map((value, idx) => {
--- a/src/components/Fields/Examples.tsx
+++ b/src/components/Fields/Examples.tsx
@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { FieldLabel, ExampleValue } from '../../common-elements/fields';
+import { getSerializedValue } from '../../utils';
+
+import { l } from '../../services/Labels';
+import { FieldModel } from '../../services';
+import styled from '../../styled-components';
+
+export function Examples({ field }: { field: FieldModel }) {
+  if (!field.examples) {
+    return null;
+  }
+
+  return (
+    <>
+      <FieldLabel> {l('examples')}: </FieldLabel>
+      <ExamplesList>
+        {Object.values(field.examples).map((example, idx) => {
+          return (
+            <li key={idx}>
+              <ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> - {example.summary || example.description}
+            </li>
+          );
+        })}
+      </ExamplesList>
+    </>
+  );
+}
+
+const ExamplesList = styled.ul`
+  margin-top: 1em;
+  padding-left: 0;
+  list-style-position: inside;
+`;
--- a/src/components/Fields/FieldDetail.tsx
+++ b/src/components/Fields/FieldDetail.tsx
@ -7,18 +7,18 @@ export interface FieldDetailProps {
  raw?: boolean;
 }

-export class FieldDetail extends React.PureComponent<FieldDetailProps> {
-  render() {
-    if (this.props.value === undefined) {
-      return null;
-    }
-
-    const value = this.props.raw ? String(this.props.value) : JSON.stringify(this.props.value);
-
-    return (
-      <div>
-        <FieldLabel> {this.props.label} </FieldLabel> <ExampleValue>{value}</ExampleValue>
-      </div>
-    );
+function FieldDetailComponent({ value, label, raw }: FieldDetailProps) {
+  if (value === undefined) {
+    return null;
  }
+
+  const stringifyValue = raw ? String(value) : JSON.stringify(value);
+
+  return (
+    <div>
+      <FieldLabel> {label} </FieldLabel> <ExampleValue>{stringifyValue}</ExampleValue>
+    </div>
+  );
 }
+
+export const FieldDetail = React.memo<FieldDetailProps>(FieldDetailComponent);
--- a/src/components/Fields/FieldDetails.tsx
+++ b/src/components/Fields/FieldDetails.tsx
@ -1,22 +1,19 @@
 import * as React from 'react';

 import {
-  PatternLabel,
  RecursiveLabel,
  TypeFormat,
  TypeName,
  TypePrefix,
  TypeTitle,
-  ToggleButton,
-  FieldLabel,
-  ExampleValue,
 } from '../../common-elements/fields';
-import { serializeParameterValue } from '../../utils/openapi';
+import { getSerializedValue } from '../../utils';
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { EnumValues } from './EnumValues';
 import { Extensions } from './Extensions';
 import { FieldProps } from './Field';
+import { Examples } from './Examples';
 import { ConstraintsView } from './FieldContstraints';
 import { FieldDetail } from './FieldDetail';

@ -24,149 +21,92 @@ import { Badge } from '../../common-elements/';

 import { l } from '../../services/Labels';
 import { OptionsContext } from '../OptionsProvider';
-import { FieldModel } from '../../services/models/Field';
-import styled from '../../styled-components';
+import { Pattern } from './Pattern';
+import { ArrayItemDetails } from './ArrayItemDetails';

-const MAX_PATTERN_LENGTH = 45;
+function FieldDetailsComponent(props: FieldProps) {
+  const { enumSkipQuotes, hideSchemaTitles } = React.useContext(OptionsContext);

-export class FieldDetails extends React.PureComponent<FieldProps, { patternShown: boolean }> {
-  state = {
-    patternShown: false,
-  };
+  const { showExamples, field, renderDiscriminatorSwitch } = props;
+  const { schema, description, deprecated, extensions, in: _in, const: _const } = field;
+  const isArrayType = schema.type === 'array';

-  static contextType = OptionsContext;
+  const rawDefault = enumSkipQuotes || _in === 'header'; // having quotes around header field default values is confusing and inappropriate

-  togglePattern = () => {
-    this.setState({
-      patternShown: !this.state.patternShown,
-    });
-  };
-
-  render() {
-    const { showExamples, field, renderDiscriminatorSwitch } = this.props;
-    const { patternShown } = this.state;
-    const { enumSkipQuotes, hideSchemaTitles, hideSchemaPattern } = this.context;
-
-    const { schema, description, example, deprecated, examples } = field;
-
-    const rawDefault = !!enumSkipQuotes || field.in === 'header'; // having quotes around header field default values is confusing and inappropriate
-
-    let renderedExamples: JSX.Element | null = null;
-
-    if (showExamples && (example !== undefined || examples !== undefined)) {
-      if (examples !== undefined) {
-        renderedExamples = <Examples field={field} />;
+  const renderedExamples = React.useMemo<JSX.Element | null>(() => {
+    if (showExamples && (field.example !== undefined || field.examples !== undefined)) {
+      if (field.examples !== undefined) {
+        return <Examples field={field} />;
      } else {
-        const label = l('example') + ':';
-        const raw = !!field.in;
-        renderedExamples = (
-          <FieldDetail label={label} value={getSerializedValue(field, field.example)} raw={raw} />
+        return (
+          <FieldDetail
+            label={l('example') + ':'}
+            value={getSerializedValue(field, field.example)}
+            raw={Boolean(field.in)}
+          />
        );
      }
    }

-    return (
-      <div>
-        <div>
-          <TypePrefix>{schema.typePrefix}</TypePrefix>
-          <TypeName>{schema.displayType}</TypeName>
-          {schema.displayFormat && (
-            <TypeFormat>
-              {' '}
-              &lt;
-              {schema.displayFormat}
-              &gt;{' '}
-            </TypeFormat>
-          )}
-          {schema.contentEncoding && (
-            <TypeFormat>
-              {' '}
-              &lt;
-              {schema.contentEncoding}
-              &gt;{' '}
-            </TypeFormat>
-          )}
-          {schema.contentMediaType && (
-            <TypeFormat>
-              {' '}
-              &lt;
-              {schema.contentMediaType}
-              &gt;{' '}
-            </TypeFormat>
-          )}
-          {schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
-          <ConstraintsView constraints={schema.constraints} />
-          {schema.pattern && !hideSchemaPattern && (
-            <>
-              <PatternLabel>
-                {patternShown || schema.pattern.length < MAX_PATTERN_LENGTH
-                  ? schema.pattern
-                  : `${schema.pattern.substr(0, MAX_PATTERN_LENGTH)}...`}
-              </PatternLabel>
-              {schema.pattern.length > MAX_PATTERN_LENGTH && (
-                <ToggleButton onClick={this.togglePattern}>
-                  {patternShown ? 'Hide pattern' : 'Show pattern'}
-                </ToggleButton>
-              )}
-            </>
-          )}
-          {schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
-        </div>
-        {deprecated && (
-          <div>
-            <Badge type="warning"> {l('deprecated')} </Badge>
-          </div>
-        )}
-        <FieldDetail raw={rawDefault} label={l('default') + ':'} value={schema.default} />
-        {!renderDiscriminatorSwitch && <EnumValues type={schema.type} values={schema.enum} />}{' '}
-        {renderedExamples}
-        {<Extensions extensions={{ ...field.extensions, ...schema.extensions }} />}
-        <div>
-          <Markdown compact={true} source={description} />
-        </div>
-        {schema.externalDocs && (
-          <ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
-        )}
-        {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null}
-        {(field.const && <FieldDetail label={l('const') + ':'} value={field.const} />) || null}
-      </div>
-    );
-  }
-}
-
-function Examples({ field }: { field: FieldModel }) {
-  if (!field.examples) {
    return null;
-  }
+  }, [field, showExamples]);

  return (
-    <>
-      <FieldLabel> {l('examples')}: </FieldLabel>
-      <ExamplesList>
-        {Object.values(field.examples).map((example, idx) => {
-          return (
-            <li key={idx}>
-              <ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> -{' '}
-              {example.summary || example.description}
-            </li>
-          );
-        })}
-      </ExamplesList>
-    </>
+    <div>
+      <div>
+        <TypePrefix>{schema.typePrefix}</TypePrefix>
+        <TypeName>{schema.displayType}</TypeName>
+        {schema.displayFormat && (
+          <TypeFormat>
+            {' '}
+            &lt;
+            {schema.displayFormat}
+            &gt;{' '}
+          </TypeFormat>
+        )}
+        {schema.contentEncoding && (
+          <TypeFormat>
+            {' '}
+            &lt;
+            {schema.contentEncoding}
+            &gt;{' '}
+          </TypeFormat>
+        )}
+        {schema.contentMediaType && (
+          <TypeFormat>
+            {' '}
+            &lt;
+            {schema.contentMediaType}
+            &gt;{' '}
+          </TypeFormat>
+        )}
+        {schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
+        <ConstraintsView constraints={schema.constraints} />
+        <Pattern schema={schema} />
+        {schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
+        {isArrayType && schema.items && <ArrayItemDetails schema={schema.items} />}
+      </div>
+      {deprecated && (
+        <div>
+          <Badge type="warning"> {l('deprecated')} </Badge>
+        </div>
+      )}
+      <FieldDetail raw={rawDefault} label={l('default') + ':'} value={schema.default} />
+      {!renderDiscriminatorSwitch && (
+        <EnumValues isArrayType={isArrayType} values={schema.enum} />
+      )}{' '}
+      {renderedExamples}
+      <Extensions extensions={{ ...extensions, ...schema.extensions }} />
+      <div>
+        <Markdown compact={true} source={description} />
+      </div>
+      {schema.externalDocs && (
+        <ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
+      )}
+      {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(props)) || null}
+      {(_const && <FieldDetail label={l('const') + ':'} value={_const} />) || null}
+    </div>
  );
 }

-function getSerializedValue(field: FieldModel, example: any) {
-  if (field.in) {
-    // decode for better readability in examples: see https://github.com/Redocly/redoc/issues/1138
-    return decodeURIComponent(serializeParameterValue(field, example));
-  } else {
-    return example;
-  }
-}
-
-const ExamplesList = styled.ul`
-  margin-top: 1em;
-  padding-left: 0;
-  list-style-position: inside;
-`;
+export const FieldDetails = React.memo<FieldProps>(FieldDetailsComponent);
--- a/src/components/Fields/Pattern.tsx
+++ b/src/components/Fields/Pattern.tsx
@ -0,0 +1,33 @@
+import * as React from 'react';
+import { PatternLabel, ToggleButton } from '../../common-elements/fields';
+import { OptionsContext } from '../OptionsProvider';
+import { SchemaModel } from '../../services';
+
+const MAX_PATTERN_LENGTH = 45;
+
+export function Pattern(props: { schema: SchemaModel }) {
+  const pattern = props.schema.pattern;
+  const { hideSchemaPattern } = React.useContext(OptionsContext);
+  const [isPatternShown, setIsPatternShown] = React.useState(false);
+  const togglePattern = React.useCallback(
+    () => setIsPatternShown(!isPatternShown),
+    [isPatternShown],
+  );
+
+  if (!pattern || hideSchemaPattern) return null;
+
+  return (
+    <>
+      <PatternLabel>
+        {isPatternShown || pattern.length < MAX_PATTERN_LENGTH
+          ? pattern
+          : `${pattern.substr(0, MAX_PATTERN_LENGTH)}...`}
+      </PatternLabel>
+      {pattern.length > MAX_PATTERN_LENGTH && (
+        <ToggleButton onClick={togglePattern}>
+          {isPatternShown ? 'Hide pattern' : 'Show pattern'}
+        </ToggleButton>
+      )}
+    </>
+  );
+}
--- a/src/components/StoreBuilder.ts
+++ b/src/components/StoreBuilder.ts
@ -56,6 +56,7 @@ export function StoreBuilder(props: StoreBuilderProps) {
      }
      throw e;
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [resolvedSpec, specUrl, options]);

  React.useEffect(() => {
--- a/src/utils/openapi.ts
+++ b/src/utils/openapi.ts
@ -368,6 +368,15 @@ export function serializeParameterValue(
  }
 }

+export function getSerializedValue(field: FieldModel, example: any) {
+  if (field.in) {
+    // decode for better readability in examples: see https://github.com/Redocly/redoc/issues/1138
+    return decodeURIComponent(serializeParameterValue(field, example));
+  } else {
+    return example;
+  }
+}
+
 export function langFromMime(contentType: string): string {
  if (contentType.search(/xml/i) !== -1) {
    return 'xml';
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,27 +13,12 @@
    "importHelpers": true,
    "outDir": "lib",
    "pretty": true,
-    "lib": [
-      "es2015",
-      "es2016",
-      "es2017",
-      "dom",
-      "WebWorker.ImportScripts"
-    ],
+    "lib": ["es2015", "es2016", "es2017", "dom", "WebWorker.ImportScripts"],
    "jsx": "react",
-    "types": [
-      "webpack",
-      "webpack-env",
-      "jest"
-    ]
+    "types": ["webpack", "webpack-env", "jest"]
  },
  "compileOnSave": false,
-  "exclude": [
-    "node_modules",
-    ".tmp",
-    "lib",
-    "e2e/**"
-  ],
+  "exclude": ["node_modules", ".tmp", "lib", "e2e/**"],
  "include": [
    "cli/index.ts",
    "./custom.d.ts",
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -32,10 +32,14 @@ const BANNER = `ReDoc - OpenAPI/Swagger-generated API Reference Documentation
  Version: ${VERSION}
  Repo: https://github.com/Redocly/redoc`;

-export default (env: { standalone?: boolean, browser?: boolean } = {}) => ({
+export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
  entry: env.standalone ? ['./src/polyfills.ts', './src/standalone.tsx'] : './src/index.ts',
  output: {
-    filename: env.standalone ? 'redoc.standalone.js' : env.browser ? 'redoc.browser.lib.js' : 'redoc.lib.js',
+    filename: env.standalone
+      ? 'redoc.standalone.js'
+      : env.browser
+      ? 'redoc.browser.lib.js'
+      : 'redoc.lib.js',
    path: path.join(__dirname, '/bundles'),
    library: 'Redoc',
    libraryTarget: 'umd',
@ -50,7 +54,7 @@ export default (env: { standalone?: boolean, browser?: boolean } = {}) => ({
      fs: path.resolve(__dirname, 'src/empty.js'),
      os: path.resolve(__dirname, 'src/empty.js'),
      tty: path.resolve(__dirname, 'src/empty.js'),
-    }
+    },
  },
  performance: false,
  externalsPresets: env.standalone || env.browser ? {} : { node: true },
@ -74,7 +78,7 @@ export default (env: { standalone?: boolean, browser?: boolean } = {}) => ({
    rules: [
      {
        test: /\.(tsx?|[cm]?js)$/,
-        use: [getBabelLoader({useBuiltIns: !!env.standalone})],
+        use: [getBabelLoader({ useBuiltIns: !!env.standalone })],
        exclude: {
          and: [/node_modules/],
          not: {