Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-11-04 01:37:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: make dropdowns accessible by keyboard

Browse Source
This commit is contained in:
Anya Stasiuk 2020-06-04 16:10:30 +03:00 committed by Roman Hotsiy
parent 006031c517
commit e8a0d105ca
11 changed files with 383 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
package-lock.json generated
View File

@ -184,7 +184,6 @@
"version": "7.8.3", "version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
"integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==", "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
"dev": true,
"requires": { "requires": {
"@babel/types": "^7.8.3" "@babel/types": "^7.8.3"
} }
@ -966,7 +965,6 @@
"version": "7.8.7", "version": "7.8.7",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.7.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.7.tgz",
"integrity": "sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==", "integrity": "sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==",
"dev": true,
"requires": { "requires": {
"esutils": "^2.0.2", "esutils": "^2.0.2",
"lodash": "^4.17.13", "lodash": "^4.17.13",
@ -1071,6 +1069,36 @@
} }
} }
}, },
"@emotion/babel-utils": {
"version": "0.6.10",
"resolved": "https://registry.npmjs.org/@emotion/babel-utils/-/babel-utils-0.6.10.tgz",
"integrity": "sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==",
"requires": {
"@emotion/hash": "^0.6.6",
"@emotion/memoize": "^0.6.6",
"@emotion/serialize": "^0.9.1",
"convert-source-map": "^1.5.1",
"find-root": "^1.1.0",
"source-map": "^0.7.2"
},
"dependencies": {
"@emotion/memoize": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
"integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
},
"source-map": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
}
}
},
"@emotion/hash": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",
"integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ=="
},
"@emotion/is-prop-valid": { "@emotion/is-prop-valid": {
"version": "0.8.8", "version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@ -1086,12 +1114,45 @@
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
"dev": true "dev": true
}, },
"@emotion/serialize": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.9.1.tgz",
"integrity": "sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==",
"requires": {
"@emotion/hash": "^0.6.6",
"@emotion/memoize": "^0.6.6",
"@emotion/unitless": "^0.6.7",
"@emotion/utils": "^0.8.2"
},
"dependencies": {
"@emotion/memoize": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
"integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
},
"@emotion/unitless": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz",
"integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg=="
}
}
},
"@emotion/stylis": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz",
"integrity": "sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ=="
},
"@emotion/unitless": { "@emotion/unitless": {
"version": "0.7.5", "version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
"dev": true "dev": true
}, },
"@emotion/utils": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
"integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
},
"@hot-loader/react-dom": { "@hot-loader/react-dom": {
"version": "16.13.0", "version": "16.13.0",
"resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.13.0.tgz", "resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.13.0.tgz",
@ -1717,6 +1778,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.11.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-13.11.1.tgz",
"integrity": "sha512-eWQGP3qtxwL8FGneRrC5DwrJLGN4/dH1clNTuLfN81HCrxVtxRjygDTUoZJ5ASlDEeo0ppYFQjQIlXhtXpOn6g==" "integrity": "sha512-eWQGP3qtxwL8FGneRrC5DwrJLGN4/dH1clNTuLfN81HCrxVtxRjygDTUoZJ5ASlDEeo0ppYFQjQIlXhtXpOn6g=="
}, },
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"@types/prismjs": { "@types/prismjs": {
"version": "1.16.0", "version": "1.16.0",
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.0.tgz", "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.0.tgz",
@ -2173,8 +2239,7 @@
"abbrev": { "abbrev": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
"dev": true
}, },
"accepts": { "accepts": {
"version": "1.3.7", "version": "1.3.7",
@ -2692,6 +2757,32 @@
"object.assign": "^4.1.0" "object.assign": "^4.1.0"
} }
}, },
"babel-plugin-emotion": {
"version": "9.2.11",
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz",
"integrity": "sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@emotion/babel-utils": "^0.6.4",
"@emotion/hash": "^0.6.2",
"@emotion/memoize": "^0.6.1",
"@emotion/stylis": "^0.7.0",
"babel-plugin-macros": "^2.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"convert-source-map": "^1.5.0",
"find-root": "^1.1.0",
"mkdirp": "^0.5.1",
"source-map": "^0.5.7",
"touch": "^2.0.1"
},
"dependencies": {
"@emotion/memoize": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
"integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
}
}
},
"babel-plugin-istanbul": { "babel-plugin-istanbul": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
@ -2713,6 +2804,60 @@
"@types/babel__traverse": "^7.0.6" "@types/babel__traverse": "^7.0.6"
} }
}, },
"babel-plugin-macros": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
"integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
"requires": {
"@babel/runtime": "^7.7.2",
"cosmiconfig": "^6.0.0",
"resolve": "^1.12.0"
},
"dependencies": {
"cosmiconfig": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
"requires": {
"@types/parse-json": "^4.0.0",
"import-fresh": "^3.1.0",
"parse-json": "^5.0.0",
"path-type": "^4.0.0",
"yaml": "^1.7.2"
}
},
"import-fresh": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
"integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
"requires": {
"parent-module": "^1.0.0",
"resolve-from": "^4.0.0"
}
},
"parse-json": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
"integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
"requires": {
"@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1",
"lines-and-columns": "^1.1.6"
}
},
"path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
}
}
},
"babel-plugin-styled-components": { "babel-plugin-styled-components": {
"version": "1.10.7", "version": "1.10.7",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
@ -2728,8 +2873,7 @@
"babel-plugin-syntax-jsx": { "babel-plugin-syntax-jsx": {
"version": "6.18.0", "version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
"dev": true
}, },
"babel-preset-jest": { "babel-preset-jest": {
"version": "24.9.0", "version": "24.9.0",
@ -3972,7 +4116,6 @@
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
"integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
"dev": true,
"requires": { "requires": {
"safe-buffer": "~5.1.1" "safe-buffer": "~5.1.1"
} }
@ -4112,6 +4255,32 @@
"elliptic": "^6.0.0" "elliptic": "^6.0.0"
} }
}, },
"create-emotion": {
"version": "9.2.12",
"resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.2.12.tgz",
"integrity": "sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==",
"requires": {
"@emotion/hash": "^0.6.2",
"@emotion/memoize": "^0.6.1",
"@emotion/stylis": "^0.7.0",
"@emotion/unitless": "^0.6.2",
"csstype": "^2.5.2",
"stylis": "^3.5.0",
"stylis-rule-sheet": "^0.0.10"
},
"dependencies": {
"@emotion/memoize": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
"integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
},
"@emotion/unitless": {
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.7.tgz",
"integrity": "sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg=="
}
}
},
"create-hash": { "create-hash": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@ -4293,8 +4462,7 @@
"csstype": { "csstype": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz",
"integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==", "integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q=="
"dev": true
}, },
"currently-unhandled": { "currently-unhandled": {
"version": "0.4.1", "version": "0.4.1",
@ -5226,6 +5394,15 @@
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true "dev": true
}, },
"emotion": {
"version": "9.2.12",
"resolved": "https://registry.npmjs.org/emotion/-/emotion-9.2.12.tgz",
"integrity": "sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==",
"requires": {
"babel-plugin-emotion": "^9.2.11",
"create-emotion": "^9.2.12"
}
},
"encodeurl": { "encodeurl": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@ -5351,7 +5528,6 @@
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
"dev": true,
"requires": { "requires": {
"is-arrayish": "^0.2.1" "is-arrayish": "^0.2.1"
} }
@ -6475,6 +6651,11 @@
"pkg-dir": "^3.0.0" "pkg-dir": "^3.0.0"
} }
}, },
"find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
},
"find-up": { "find-up": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@ -8292,8 +8473,7 @@
"is-arrayish": { "is-arrayish": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
"dev": true
}, },
"is-binary-path": { "is-binary-path": {
"version": "2.1.0", "version": "2.1.0",
@ -10586,8 +10766,7 @@
"json-parse-better-errors": { "json-parse-better-errors": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
"dev": true
}, },
"json-pointer": { "json-pointer": {
"version": "0.6.0", "version": "0.6.0",
@ -10794,6 +10973,11 @@
} }
} }
}, },
"lines-and-columns": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
},
"listr": { "listr": {
"version": "0.12.0", "version": "0.12.0",
"resolved": "https://registry.npmjs.org/listr/-/listr-0.12.0.tgz", "resolved": "https://registry.npmjs.org/listr/-/listr-0.12.0.tgz",
@ -11065,8 +11249,7 @@
"lodash": { "lodash": {
"version": "4.17.15", "version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
"dev": true
}, },
"lodash._reinterpolate": { "lodash._reinterpolate": {
"version": "3.0.0", "version": "3.0.0",
@ -11643,7 +11826,6 @@
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
}, },
@ -11651,8 +11833,7 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
"dev": true
} }
} }
}, },
@ -12486,7 +12667,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
"dev": true,
"requires": { "requires": {
"callsites": "^3.0.0" "callsites": "^3.0.0"
}, },
@ -12494,8 +12674,7 @@
"callsites": { "callsites": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
"dev": true
} }
} }
}, },
@ -12593,8 +12772,7 @@
"path-parse": { "path-parse": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
"dev": true
}, },
"path-to-regexp": { "path-to-regexp": {
"version": "0.1.7", "version": "0.1.7",
@ -13241,12 +13419,12 @@
"scheduler": "^0.19.0" "scheduler": "^0.19.0"
} }
}, },
"react-dropdown": { "react-dropdown-aria": {
"version": "1.7.0", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.7.0.tgz", "resolved": "https://registry.npmjs.org/react-dropdown-aria/-/react-dropdown-aria-2.0.6.tgz",
"integrity": "sha512-zFZ73pgLA32hArpE4j/7DtOEhOMg240XG5QvbAb0/VinGekkHDVIakMyAFUKC5jDz8jqXEltgriqFW9R5iCtPQ==", "integrity": "sha512-/9NlFopChlSKmuGL2P6S3oDwl9ddXcbNLnd1a7POov4f5/oGtSc3qBFmS4wH5xmLJe/38MhPOKF3e2q3laRi1g==",
"requires": { "requires": {
"classnames": "^2.2.3" "emotion": "^9.2.6"
} }
}, },
"react-hot-loader": { "react-hot-loader": {
@ -13714,7 +13892,6 @@
"version": "1.15.1", "version": "1.15.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
"integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==", "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
"dev": true,
"requires": { "requires": {
"path-parse": "^1.0.6" "path-parse": "^1.0.6"
} }
@ -13850,8 +14027,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
"dev": true
}, },
"safe-json-stringify": { "safe-json-stringify": {
"version": "1.2.0", "version": "1.2.0",
@ -14486,8 +14662,7 @@
"source-map": { "source-map": {
"version": "0.5.7", "version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
"dev": true
}, },
"source-map-loader": { "source-map-loader": {
"version": "0.2.4", "version": "0.2.4",
@ -14969,14 +15144,12 @@
"stylis": { "stylis": {
"version": "3.5.4", "version": "3.5.4",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
"dev": true
}, },
"stylis-rule-sheet": { "stylis-rule-sheet": {
"version": "0.0.10", "version": "0.0.10",
"resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
"integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
"dev": true
}, },
"supports-color": { "supports-color": {
"version": "5.5.0", "version": "5.5.0",
@ -15320,8 +15493,7 @@
"to-fast-properties": { "to-fast-properties": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
"dev": true
}, },
"to-object-path": { "to-object-path": {
"version": "0.3.0", "version": "0.3.0",
@ -15382,6 +15554,24 @@
"integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=", "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
"dev": true "dev": true
}, },
"touch": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/touch/-/touch-2.0.2.tgz",
"integrity": "sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==",
"requires": {
"nopt": "~1.0.10"
},
"dependencies": {
"nopt": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
"integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
"requires": {
"abbrev": "1"
}
}
}
},
"tough-cookie": { "tough-cookie": {
"version": "2.5.0", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",

2
package.json
View File

@ -152,7 +152,7 @@
"polished": "^3.4.4", "polished": "^3.4.4",
"prismjs": "^1.19.0", "prismjs": "^1.19.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-dropdown": "^1.7.0", "react-dropdown-aria": "^2.0.6",
"react-tabs": "^3.1.0", "react-tabs": "^3.1.0",
"slugify": "^1.4.0", "slugify": "^1.4.0",
"stickyfill": "^1.1.1", "stickyfill": "^1.1.1",

175
src/common-elements/dropdown.ts
View File

@ -1,113 +1,128 @@
import Dropdown from 'react-dropdown'; import Dropdown from 'react-dropdown-aria';
import styled from '../styled-components'; import styled from '../styled-components';
export interface DropdownOption { export interface DropdownOption {
label: string; idx: number;
value: string; value: string;
} }
export interface DropdownProps { export interface DropdownProps {
options: DropdownOption[]; options: DropdownOption[];
value: DropdownOption; value: string;
onChange: (val: DropdownOption) => void; onChange: (option: DropdownOption) => void;
ariaLabel: string;
} }
export const StyledDropdown = styled(Dropdown)` export const StyledDropdown = styled(Dropdown)`
min-width: 100px; && {
display: inline-block;
position: relative;
width: auto;
font-family: ${props => props.theme.typography.headings.fontFamily};
.Dropdown-control {
font-family: ${props => props.theme.typography.headings.fontFamily};
position: relative;
font-size: 0.929em;
width: 100%;
line-height: 1.5em;
vertical-align: middle;
cursor: pointer;
border-color: rgba(38, 50, 56, 0.5);
color: #263238;
outline: none;
padding: 0.15em 1.5em 0.2em 0.5em;
border-radius: 2px;
border-width: 1px;
border-style: solid;
margin-top: 5px;
background: white;
box-sizing: border-box; box-sizing: border-box;
min-width: 100px;
&:hover { outline: none;
border-color: ${props => props.theme.colors.primary.main}; display: inline-block;
border-radius: 2px;
border: 1px solid rgba(38, 50, 56, 0.5);
vertical-align: bottom;
padding: 2px 0px 2px 6px;
position: relative;
width: auto;
background: white;
color: #263238;
font-family: ${props => props.theme.typography.headings.fontFamily};
font-size: 0.929em;
line-height: 1.5em;
cursor: pointer;
&:hover,
&:focus-within {
border: 1px solid ${props => props.theme.colors.primary.main};
color: ${props => props.theme.colors.primary.main}; color: ${props => props.theme.colors.primary.main};
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12); box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12);
} }
} .dropdown-selector {
display: inline-flex;
.Dropdown-arrow { padding: 0;
border-color: ${props => props.theme.colors.primary.main} transparent transparent; height: auto;
border-style: solid; padding-right: 20px;
border-width: 0.35em 0.35em 0; position: relative;
content: ' '; margin-bottom: 5px;
display: block; }
height: 0; .dropdown-selector-value {
position: absolute; font-family: ${props => props.theme.typography.headings.fontFamily};
right: 0.3em; position: relative;
top: 50%; font-size: 0.929em;
margin-top: -0.125em; width: 100%;
width: 0; line-height: 1;
} vertical-align: middle;
color: #263238;
.Dropdown-menu { left: 0;
position: absolute; }
margin-top: 2px; .dropdown-arrow {
left: 0; position: absolute;
right: 0; right: 3px;
top: 50%;
z-index: 10; transform: translateY(-50%);
min-width: 100px; border-color: ${props => props.theme.colors.primary.main} transparent transparent;
border-style: solid;
background: white; border-width: 0.35em 0.35em 0;
border: 1px solid rgba(38, 50, 56, 0.2); width: 0;
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); svg {
display: none;
max-height: 220px; }
overflow: auto;
}
.Dropdown-option {
font-size: 0.9em;
color: #263238;
cursor: pointer;
padding: 0.4em;
&.is-selected {
background-color: rgba(0, 0, 0, 0.05);
} }
&:hover { .dropdown-selector-content {
background-color: rgba(38, 50, 56, 0.12); position: absolute;
margin-top: 2px;
left: -1px;
right: 0;
z-index: 10;
min-width: 100px;
background: white;
border: 1px solid rgba(38, 50, 56, 0.2);
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08);
max-height: 220px;
overflow: auto;
}
.dropdown-option {
font-size: 0.9em;
color: #263238;
background-color: #fff;
cursor: pointer;
padding: 0.4em;
&[aria-selected='true'] {
background-color: rgba(0, 0, 0, 0.05);
}
&:hover {
background-color: rgba(38, 50, 56, 0.12);
}
} }
} }
`; `;
export const SimpleDropdown = styled(StyledDropdown)` export const SimpleDropdown = styled(StyledDropdown)`
margin-left: 10px; && {
text-transform: none; margin-left: 10px;
font-size: 0.969em; text-transform: none;
font-size: 0.969em;
.Dropdown-control {
font-size: 1em; font-size: 1em;
border: none; border: none;
padding: 0 1.2em 0 0; padding: 0 1.2em 0 0;
background: transparent; background: transparent;
&:hover { &:hover,
color: ${props => props.theme.colors.primary.main}; &:focus-within {
border: none;
box-shadow: none; box-shadow: none;
.dropdown-selector-value {
color: ${props => props.theme.colors.primary.main};
}
} }
} }
`; `;

4
src/components/CallbackSamples/CallbackSamples.tsx
View File

@ -43,8 +43,8 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
const dropdownOptions = operations.map((callback, idx) => { const dropdownOptions = operations.map((callback, idx) => {
return { return {
label: `${callback.httpVerb.toUpperCase()}: ${callback.name}`, value: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
value: idx.toString(), idx,
}; };
}); });

4
src/components/DropdownOrLabel/DropdownOrLabel.tsx
View File

@ -10,7 +10,7 @@ export interface DropdownOrLabelProps extends DropdownProps {
export function DropdownOrLabel(props: DropdownOrLabelProps): JSX.Element { export function DropdownOrLabel(props: DropdownOrLabelProps): JSX.Element {
const { Label = MimeLabel, Dropdown = SimpleDropdown } = props; const { Label = MimeLabel, Dropdown = SimpleDropdown } = props;
if (props.options.length === 1) { if (props.options.length === 1) {
return <Label>{props.options[0].label}</Label>; return <Label>{props.options[0].value}</Label>;
} }
return <Dropdown {...props} />; return <Dropdown {...props} searchable={false} />;
} }

7
src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx
View File

@ -32,10 +32,10 @@ export class GenericChildrenSwitcher<T> extends React.Component<
}; };
} }
switchItem = ({ value }) => { switchItem = ({ idx }) => {
if (this.props.items) { if (this.props.items) {
this.setState({ this.setState({
activeItemIdx: parseInt(value, 10), activeItemIdx: idx,
}); });
} }
}; };
@ -61,9 +61,10 @@ export class GenericChildrenSwitcher<T> extends React.Component<
<> <>
<Wrapper> <Wrapper>
{this.props.renderDropdown({ {this.props.renderDropdown({
value: this.props.options[this.state.activeItemIdx], value: this.props.options[this.state.activeItemIdx].value,
options: this.props.options, options: this.props.options,
onChange: this.switchItem, onChange: this.switchItem,
ariaLabel: this.props.label || 'Callback',
})} })}
</Wrapper> </Wrapper>

11
src/components/MediaTypeSwitch/MediaTypesSwitch.tsx
View File

@ -20,9 +20,9 @@ export interface MediaTypesSwitchProps {
@observer @observer
export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> { export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
switchMedia = ({ value }) => { switchMedia = ({ idx }) => {
if (this.props.content) { if (this.props.content) {
this.props.content.activate(parseInt(value, 10)); this.props.content.activate(idx);
} }
}; };
@ -35,8 +35,8 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
const options = content.mediaTypes.map((mime, idx) => { const options = content.mediaTypes.map((mime, idx) => {
return { return {
label: mime.name, value: mime.name,
value: idx.toString(), idx,
}; };
}); });
@ -54,9 +54,10 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
<> <>
<Wrapper> <Wrapper>
{this.props.renderDropdown({ {this.props.renderDropdown({
value: options[activeMimeIdx], value: options[activeMimeIdx].value,
options, options,
onChange: this.switchMedia, onChange: this.switchMedia,
ariaLabel: 'Content type',
})} })}
</Wrapper> </Wrapper>
{this.props.children(content.active)} {this.props.children(content.active)}

11
src/components/PayloadSamples/MediaTypeSamples.tsx
View File

@ -21,9 +21,9 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
state = { state = {
activeIdx: 0, activeIdx: 0,
}; };
switchMedia = ({ value }) => { switchMedia = ({ idx }) => {
this.setState({ this.setState({
activeIdx: parseInt(value, 10), activeIdx: idx,
}); });
}; };
render() { render() {
@ -41,8 +41,8 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
if (examplesNames.length > 1) { if (examplesNames.length > 1) {
const options = examplesNames.map((name, idx) => { const options = examplesNames.map((name, idx) => {
return { return {
label: examples[name].summary || name, value: examples[name].summary || name,
value: idx.toString(), idx,
}; };
}); });
@ -54,9 +54,10 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
<DropdownWrapper> <DropdownWrapper>
<DropdownLabel>Example</DropdownLabel> <DropdownLabel>Example</DropdownLabel>
{this.props.renderDropdown({ {this.props.renderDropdown({
value: options[activeIdx], value: options[activeIdx].value,
options, options,
onChange: this.switchMedia, onChange: this.switchMedia,
ariaLabel: 'Example',
})} })}
</DropdownWrapper> </DropdownWrapper>
<div> <div>

4
src/components/PayloadSamples/PayloadSamples.tsx
View File

@ -1,7 +1,3 @@
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import ReactDropdown from 'react-dropdown';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import * as React from 'react'; import * as React from 'react';
import { MediaTypeSamples } from './MediaTypeSamples'; import { MediaTypeSamples } from './MediaTypeSamples';

55
src/components/PayloadSamples/styled.elements.ts
View File

@ -1,7 +1,3 @@
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import ReactDropdown from 'react-dropdown';
import { transparentize } from 'polished'; import { transparentize } from 'polished';
import styled from '../../styled-components'; import styled from '../../styled-components';
import { StyledDropdown } from '../../common-elements'; import { StyledDropdown } from '../../common-elements';
@ -32,40 +28,43 @@ export const DropdownWrapper = styled.div`
`; `;
export const InvertedSimpleDropdown = styled(StyledDropdown)` export const InvertedSimpleDropdown = styled(StyledDropdown)`
margin-left: 10px; && {
text-transform: none; margin-left: 10px;
font-size: 0.929em; text-transform: none;
margin: 0 0 10px 0; font-size: 0.929em;
display: block; margin: 0 0 10px 0;
background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)}; display: block;
.Dropdown-placeholder { background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.Dropdown-control {
margin-top: 0;
}
.Dropdown-control,
.Dropdown-control:hover {
font-size: 1em; font-size: 1em;
border: none; border: none;
padding: 0.9em 1.6em 0.9em 0.9em; padding: 0.9em 1.6em 0.9em 0.9em;
background: transparent;
color: ${({ theme }) => theme.rightPanel.textColor};
box-shadow: none; box-shadow: none;
&:hover,
&:focus-within {
border: none;
}
&:focus-within {
background-color: ${({ theme }) => transparentize(0.3, theme.rightPanel.backgroundColor)};
}
.Dropdown-arrow { .dropdown-arrow {
border-top-color: ${({ theme }) => theme.rightPanel.textColor}; border-top-color: ${({ theme }) => theme.rightPanel.textColor};
} }
} .dropdown-selector-value {
.Dropdown-menu {
margin: 0;
margin-top: 2px;
.Dropdown-option {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: ${({ theme }) => theme.rightPanel.textColor};
}
.dropdown-selector-content {
margin: 0;
margin-top: 2px;
.dropdown-option {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
} }
} }
`; `;

18
src/components/Schema/DiscriminatorDropdown.tsx
View File

@ -21,7 +21,7 @@ export class DiscriminatorDropdown extends React.Component<{
}); });
options.sort((a, b) => { options.sort((a, b) => {
return enumOrder[a.label] > enumOrder[b.label] ? 1 : -1; return enumOrder[a.value] > enumOrder[b.value] ? 1 : -1;
}); });
} }
@ -33,21 +33,23 @@ export class DiscriminatorDropdown extends React.Component<{
const options = parent.oneOf.map((subSchema, idx) => { const options = parent.oneOf.map((subSchema, idx) => {
return { return {
value: idx.toString(), value: subSchema.title,
label: subSchema.title, idx,
}; };
}); });
const activeItem = options[parent.activeOneOf];
this.sortOptions(options, enumValues); this.sortOptions(options, enumValues);
return ( return (
<StyledDropdown value={activeItem} options={options} onChange={this.changeActiveChild} /> <StyledDropdown
value={options[parent.activeOneOf].value}
options={options}
onChange={this.changeActiveChild}
/>
); );
} }
changeActiveChild = ({ value }) => { changeActiveChild = (option: DropdownOption) => {
const idx = parseInt(value, 10); this.props.parent.activateOneOf(option.idx);
this.props.parent.activateOneOf(idx);
}; };
} }