From ef69f04a7b08a34c0d8b37f3f4c2928f76046b34 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Jun 2023 23:24:47 +0200 Subject: [PATCH 1/5] upgrade overlayscrollbars one way (has visual bugs) --- code/lib/core-server/package.json | 4 +- code/package.json | 2 +- code/ui/components/package.json | 2 +- .../src/ScrollArea/OverlayScrollbars.tsx | 14 +- code/yarn.lock | 257 +++++------------- 5 files changed, 79 insertions(+), 200 deletions(-) diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 545b6d767144..7c2bad104752 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -70,7 +70,6 @@ "@storybook/types": "7.1.0-alpha.29", "@types/detect-port": "^1.3.0", "@types/node": "^16.0.0", - "@types/node-fetch": "^2.5.7", "@types/pretty-hrtime": "^1.0.0", "@types/semver": "^7.3.4", "better-opn": "^2.1.1", @@ -84,7 +83,6 @@ "globby": "^11.0.2", "ip": "^2.0.0", "lodash": "^4.17.21", - "node-fetch": "^2.6.7", "open": "^8.4.0", "pretty-hrtime": "^1.0.3", "prompts": "^2.4.0", @@ -101,10 +99,12 @@ "devDependencies": { "@types/compression": "^1.7.0", "@types/ip": "^1.1.0", + "@types/node-fetch": "^2.5.7", "@types/serve-favicon": "^2.5.2", "@types/ws": "^8", "jest-os-detection": "^1.3.1", "jest-specific-snapshot": "^7.0.0", + "node-fetch": "^3.3.1", "slash": "^5.0.0", "typescript": "~4.9.3" }, diff --git a/code/package.json b/code/package.json index 74f7a3f6d4ea..52eb37b23a7e 100644 --- a/code/package.json +++ b/code/package.json @@ -242,7 +242,7 @@ "lerna": "^6.4.0", "lint-staged": "^10.5.4", "lodash": "^4.17.21", - "node-gyp": "^8.4.0", + "node-gyp": "^9.3.1", "nx": "16.2.1", "nx-cloud": "16.0.5", "prettier": "2.8.0", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 26d4a3ba37d3..35374819963a 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -63,7 +63,7 @@ "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", - "overlayscrollbars": "^1.13.1", + "overlayscrollbars": "^2.2.0", "polished": "^4.2.2", "prettier": "^2.8.0", "react-popper-tooltip": "^4.4.2", diff --git a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx index a2514a27a51a..318eee988140 100644 --- a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx +++ b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx @@ -1,11 +1,11 @@ import type { HTMLAttributes, FC } from 'react'; import React, { useRef, useEffect } from 'react'; -import OverlayScrollbars from 'overlayscrollbars'; +import type { Options } from 'overlayscrollbars'; +import { OverlayScrollbars } from 'overlayscrollbars'; interface OverlayScrollbarsComponentProps extends HTMLAttributes { children?: any; - options?: OverlayScrollbars.Options; - extensions?: OverlayScrollbars.Extensions; + options?: Options; } /** @@ -17,7 +17,7 @@ interface OverlayScrollbarsComponentProps extends HTMLAttributes export const OverlayScrollbarsComponent: FC = ({ options = {}, - extensions, + className, children, ...rest @@ -26,7 +26,7 @@ export const OverlayScrollbarsComponent: FC = ( const osInstance = useRef(); useEffect(() => { - osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions); + osInstance.current = OverlayScrollbars(osTargetRef.current, options); mergeHostClassNames(osInstance.current, className); return () => { if (OverlayScrollbars.valid(osInstance.current)) { @@ -73,9 +73,9 @@ export const OverlayScrollbarsComponent: FC = ( function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) { if (OverlayScrollbars.valid(osInstance)) { - const { host } = osInstance.getElements(); + const { host } = osInstance.elements(); const regex = new RegExp( - `(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, '$|')}$`, + `(^os-host([-_].+|)$)|${osInstance.elements().host.className.replace(/\s/g, '$|')}$`, 'g' ); const osClassNames = host.className diff --git a/code/yarn.lock b/code/yarn.lock index b4a8d2e1cdfd..763c72d3552e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2908,7 +2908,7 @@ __metadata: languageName: node linkType: hard -"@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3": +"@gar/promisify@npm:^1.1.3": version: 1.1.3 resolution: "@gar/promisify@npm:1.1.3" checksum: 0b3c9958d3cd17f4add3574975e3115ae05dc7f1298a60810414b16f6f558c137b5fb3cd3905df380bacfd955ec13f67c1e6710cbb5c246a7e8d65a8289b2bff @@ -4158,16 +4158,6 @@ __metadata: languageName: node linkType: hard -"@npmcli/fs@npm:^1.0.0": - version: 1.1.1 - resolution: "@npmcli/fs@npm:1.1.1" - dependencies: - "@gar/promisify": ^1.0.1 - semver: ^7.3.5 - checksum: 4143c317a7542af9054018b71601e3c3392e6704e884561229695f099a71336cbd580df9a9ffb965d0024bf0ed593189ab58900fd1714baef1c9ee59c738c3e2 - languageName: node - linkType: hard - "@npmcli/fs@npm:^2.1.0": version: 2.1.2 resolution: "@npmcli/fs@npm:2.1.2" @@ -4239,16 +4229,6 @@ __metadata: languageName: node linkType: hard -"@npmcli/move-file@npm:^1.0.1": - version: 1.1.2 - resolution: "@npmcli/move-file@npm:1.1.2" - dependencies: - mkdirp: ^1.0.4 - rimraf: ^3.0.2 - checksum: 02e946f3dafcc6743132fe2e0e2b585a96ca7265653a38df5a3e53fcf26c7c7a57fc0f861d7c689a23fdb6d6836c7eea5050c8086abf3c994feb2208d1514ff0 - languageName: node - linkType: hard - "@npmcli/move-file@npm:^2.0.0": version: 2.0.1 resolution: "@npmcli/move-file@npm:2.0.1" @@ -6277,7 +6257,7 @@ __metadata: "@types/util-deprecate": ^1.0.0 css: ^3.0.0 memoizerific: ^1.11.3 - overlayscrollbars: ^1.13.1 + overlayscrollbars: ^2.2.0 polished: ^4.2.2 prettier: ^2.8.0 react-popper-tooltip: ^4.4.2 @@ -6388,7 +6368,7 @@ __metadata: jest-os-detection: ^1.3.1 jest-specific-snapshot: ^7.0.0 lodash: ^4.17.21 - node-fetch: ^2.6.7 + node-fetch: ^3.3.1 open: ^8.4.0 pretty-hrtime: ^1.0.3 prompts: ^2.4.0 @@ -7414,7 +7394,7 @@ __metadata: lerna: ^6.4.0 lint-staged: ^10.5.4 lodash: ^4.17.21 - node-gyp: ^8.4.0 + node-gyp: ^9.3.1 nx: 16.2.1 nx-cloud: 16.0.5 prettier: 2.8.0 @@ -8132,13 +8112,6 @@ __metadata: languageName: node linkType: hard -"@tootallnate/once@npm:1": - version: 1.1.2 - resolution: "@tootallnate/once@npm:1.1.2" - checksum: 8fe4d006e90422883a4fa9339dd05a83ff626806262e1710cee5758d493e8cbddf2db81c0e4690636dc840b02c9fda62877866ea774ebd07c1777ed5fafbdec6 - languageName: node - linkType: hard - "@tootallnate/once@npm:2": version: 2.0.0 resolution: "@tootallnate/once@npm:2.0.0" @@ -9981,7 +9954,7 @@ __metadata: languageName: node linkType: hard -"abbrev@npm:1, abbrev@npm:^1.0.0": +"abbrev@npm:^1.0.0": version: 1.1.1 resolution: "abbrev@npm:1.1.1" checksum: 3f762677702acb24f65e813070e306c61fafe25d4b2583f9dfc935131f774863f3addd5741572ed576bd69cabe473c5af18e1e108b829cb7b6b4747884f726e6 @@ -10133,7 +10106,7 @@ __metadata: languageName: node linkType: hard -"agentkeepalive@npm:^4.1.3, agentkeepalive@npm:^4.2.1": +"agentkeepalive@npm:^4.2.1": version: 4.3.0 resolution: "agentkeepalive@npm:4.3.0" dependencies: @@ -11992,32 +11965,6 @@ __metadata: languageName: node linkType: hard -"cacache@npm:^15.2.0": - version: 15.3.0 - resolution: "cacache@npm:15.3.0" - dependencies: - "@npmcli/fs": ^1.0.0 - "@npmcli/move-file": ^1.0.1 - chownr: ^2.0.0 - fs-minipass: ^2.0.0 - glob: ^7.1.4 - infer-owner: ^1.0.4 - lru-cache: ^6.0.0 - minipass: ^3.1.1 - minipass-collect: ^1.0.2 - minipass-flush: ^1.0.5 - minipass-pipeline: ^1.2.2 - mkdirp: ^1.0.3 - p-map: ^4.0.0 - promise-inflight: ^1.0.1 - rimraf: ^3.0.2 - ssri: ^8.0.1 - tar: ^6.0.2 - unique-filename: ^1.1.1 - checksum: 886fcc0acc4f6fd5cd142d373d8276267bc6d655d7c4ce60726fbbec10854de3395ee19bbf9e7e73308cdca9fdad0ad55060ff3bd16c6d4165c5b8d21515e1d8 - languageName: node - linkType: hard - "cacache@npm:^16.1.0": version: 16.1.3 resolution: "cacache@npm:16.1.3" @@ -13593,6 +13540,13 @@ __metadata: languageName: node linkType: hard +"data-uri-to-buffer@npm:^4.0.0": + version: 4.0.1 + resolution: "data-uri-to-buffer@npm:4.0.1" + checksum: 20a6b93107597530d71d4cb285acee17f66bcdfc03fd81040921a81252f19db27588d87fc8fc69e1950c55cfb0bf8ae40d0e5e21d907230813eb5d5a7f9eb45b + languageName: node + linkType: hard + "data-urls@npm:^3.0.1, data-urls@npm:^3.0.2": version: 3.0.2 resolution: "data-urls@npm:3.0.2" @@ -14632,7 +14586,7 @@ __metadata: languageName: node linkType: hard -"encoding@npm:^0.1.12, encoding@npm:^0.1.13": +"encoding@npm:^0.1.13": version: 0.1.13 resolution: "encoding@npm:0.1.13" dependencies: @@ -16158,6 +16112,16 @@ __metadata: languageName: node linkType: hard +"fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4": + version: 3.2.0 + resolution: "fetch-blob@npm:3.2.0" + dependencies: + node-domexception: ^1.0.0 + web-streams-polyfill: ^3.0.3 + checksum: 60054bf47bfa10fb0ba6cb7742acec2f37c1f56344f79a70bb8b1c48d77675927c720ff3191fa546410a0442c998d27ab05e9144c32d530d8a52fbe68f843b69 + languageName: node + linkType: hard + "fetch-retry@npm:^5.0.2": version: 5.0.6 resolution: "fetch-retry@npm:5.0.6" @@ -16544,6 +16508,15 @@ __metadata: languageName: node linkType: hard +"formdata-polyfill@npm:^4.0.10": + version: 4.0.10 + resolution: "formdata-polyfill@npm:4.0.10" + dependencies: + fetch-blob: ^3.1.2 + checksum: 5392ec484f9ce0d5e0d52fb5a78e7486637d516179b0eb84d81389d7eccf9ca2f663079da56f761355c0a65792810e3b345dc24db9a8bbbcf24ef3c8c88570c6 + languageName: node + linkType: hard + "formik@npm:^2.2.9": version: 2.4.0 resolution: "formik@npm:2.4.0" @@ -18052,17 +18025,6 @@ __metadata: languageName: node linkType: hard -"http-proxy-agent@npm:^4.0.1": - version: 4.0.1 - resolution: "http-proxy-agent@npm:4.0.1" - dependencies: - "@tootallnate/once": 1 - agent-base: 6 - debug: 4 - checksum: 4fa4774d65b5331814b74ac05cefea56854fc0d5989c80b13432c1b0d42a14c9f4342ca3ad9f0359a52e78da12b1744c9f8a28e50042136ea9171675d972a5fd - languageName: node - linkType: hard - "http-proxy-agent@npm:^5.0.0": version: 5.0.0 resolution: "http-proxy-agent@npm:5.0.0" @@ -21636,30 +21598,6 @@ __metadata: languageName: node linkType: hard -"make-fetch-happen@npm:^9.1.0": - version: 9.1.0 - resolution: "make-fetch-happen@npm:9.1.0" - dependencies: - agentkeepalive: ^4.1.3 - cacache: ^15.2.0 - http-cache-semantics: ^4.1.0 - http-proxy-agent: ^4.0.1 - https-proxy-agent: ^5.0.0 - is-lambda: ^1.0.1 - lru-cache: ^6.0.0 - minipass: ^3.1.3 - minipass-collect: ^1.0.2 - minipass-fetch: ^1.3.2 - minipass-flush: ^1.0.5 - minipass-pipeline: ^1.2.4 - negotiator: ^0.6.2 - promise-retry: ^2.0.1 - socks-proxy-agent: ^6.0.0 - ssri: ^8.0.0 - checksum: 2c737faf6a7f67077679da548b5bfeeef890595bf8c4323a1f76eae355d27ebb33dcf9cf1a673f944cf2f2a7cbf4e2b09f0a0a62931737728f210d902c6be966 - languageName: node - linkType: hard - "makeerror@npm:1.0.12": version: 1.0.12 resolution: "makeerror@npm:1.0.12" @@ -22791,21 +22729,6 @@ __metadata: languageName: node linkType: hard -"minipass-fetch@npm:^1.3.2": - version: 1.4.1 - resolution: "minipass-fetch@npm:1.4.1" - dependencies: - encoding: ^0.1.12 - minipass: ^3.1.0 - minipass-sized: ^1.0.3 - minizlib: ^2.0.0 - dependenciesMeta: - encoding: - optional: true - checksum: a43da7401cd7c4f24b993887d41bd37d097356083b0bb836fd655916467463a1e6e9e553b2da4fcbe8745bf23d40c8b884eab20745562199663b3e9060cd8e7a - languageName: node - linkType: hard - "minipass-fetch@npm:^2.0.3": version: 2.1.2 resolution: "minipass-fetch@npm:2.1.2" @@ -22855,7 +22778,7 @@ __metadata: languageName: node linkType: hard -"minipass-pipeline@npm:^1.2.2, minipass-pipeline@npm:^1.2.4": +"minipass-pipeline@npm:^1.2.4": version: 1.2.4 resolution: "minipass-pipeline@npm:1.2.4" dependencies: @@ -22873,7 +22796,7 @@ __metadata: languageName: node linkType: hard -"minipass@npm:^3.0.0, minipass@npm:^3.1.0, minipass@npm:^3.1.1, minipass@npm:^3.1.3, minipass@npm:^3.1.6": +"minipass@npm:^3.0.0, minipass@npm:^3.1.1, minipass@npm:^3.1.6": version: 3.3.6 resolution: "minipass@npm:3.3.6" dependencies: @@ -22903,7 +22826,7 @@ __metadata: languageName: node linkType: hard -"minizlib@npm:^2.0.0, minizlib@npm:^2.1.1, minizlib@npm:^2.1.2": +"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2": version: 2.1.2 resolution: "minizlib@npm:2.1.2" dependencies: @@ -23162,7 +23085,7 @@ __metadata: languageName: node linkType: hard -"negotiator@npm:0.6.3, negotiator@npm:^0.6.2, negotiator@npm:^0.6.3": +"negotiator@npm:0.6.3, negotiator@npm:^0.6.3": version: 0.6.3 resolution: "negotiator@npm:0.6.3" checksum: 3ec9fd413e7bf071c937ae60d572bc67155262068ed522cf4b3be5edbe6ddf67d095ec03a3a14ebf8fc8e95f8e1d61be4869db0dbb0de696f6b837358bd43fc2 @@ -23294,6 +23217,13 @@ __metadata: languageName: node linkType: hard +"node-domexception@npm:^1.0.0": + version: 1.0.0 + resolution: "node-domexception@npm:1.0.0" + checksum: 5e5d63cda29856402df9472335af4bb13875e1927ad3be861dc5ebde38917aecbf9ae337923777af52a48c426b70148815e890a5d72760f1b4d758cc671b1a2b + languageName: node + linkType: hard + "node-fetch-native@npm:^1.0.2": version: 1.1.1 resolution: "node-fetch-native@npm:1.1.1" @@ -23329,6 +23259,17 @@ __metadata: languageName: node linkType: hard +"node-fetch@npm:^3.3.1": + version: 3.3.1 + resolution: "node-fetch@npm:3.3.1" + dependencies: + data-uri-to-buffer: ^4.0.0 + fetch-blob: ^3.1.4 + formdata-polyfill: ^4.0.10 + checksum: 78671bffed741a2f3ccb15588a42fd7e9db2bdc9f99f9f584e0c749307f9603d961692f0877d853b28a4d1375ab2253b19978dd3bfc0c3189b42adc340bef927 + languageName: node + linkType: hard + "node-forge@npm:^1, node-forge@npm:^1.3.1": version: 1.3.1 resolution: "node-forge@npm:1.3.1" @@ -23347,27 +23288,7 @@ __metadata: languageName: node linkType: hard -"node-gyp@npm:^8.4.0": - version: 8.4.1 - resolution: "node-gyp@npm:8.4.1" - dependencies: - env-paths: ^2.2.0 - glob: ^7.1.4 - graceful-fs: ^4.2.6 - make-fetch-happen: ^9.1.0 - nopt: ^5.0.0 - npmlog: ^6.0.0 - rimraf: ^3.0.2 - semver: ^7.3.5 - tar: ^6.1.2 - which: ^2.0.2 - bin: - node-gyp: bin/node-gyp.js - checksum: 80ef333b3a882eb6a2695a8e08f31d618f4533eff192864e4a3a16b67ff0abc9d8c1d5fac0395550ec699326b9248c5e2b3be178492f7f4d1ccf97d2cf948021 - languageName: node - linkType: hard - -"node-gyp@npm:^9.0.0, node-gyp@npm:latest": +"node-gyp@npm:^9.0.0, node-gyp@npm:^9.3.1, node-gyp@npm:latest": version: 9.3.1 resolution: "node-gyp@npm:9.3.1" dependencies: @@ -23443,17 +23364,6 @@ __metadata: languageName: node linkType: hard -"nopt@npm:^5.0.0": - version: 5.0.0 - resolution: "nopt@npm:5.0.0" - dependencies: - abbrev: 1 - bin: - nopt: bin/nopt.js - checksum: fc5c4f07155cb455bf5fc3dd149fac421c1a40fd83c6bfe83aa82b52f02c17c5e88301321318adaa27611c8a6811423d51d29deaceab5fa158b585a61a551061 - languageName: node - linkType: hard - "nopt@npm:^6.0.0": version: 6.0.0 resolution: "nopt@npm:6.0.0" @@ -24283,10 +24193,10 @@ __metadata: languageName: node linkType: hard -"overlayscrollbars@npm:^1.13.1": - version: 1.13.3 - resolution: "overlayscrollbars@npm:1.13.3" - checksum: 2eea68189aebf772282305ff83c90a6caa20b7e0f2b0dd792a017a6226c68a2db756665c59a8a40b1de53e83c3918c9a13dc35875b6e1d56ff08237cb6f57699 +"overlayscrollbars@npm:^2.2.0": + version: 2.2.0 + resolution: "overlayscrollbars@npm:2.2.0" + checksum: 25a2b5cc6c5cd5276bb82b7338ceed307815c3d0ee8ea8053f4b19898189b955d00da4f03e1615b8e330fdf61275e02791818937901fff17cc5462d7bb9b8edc languageName: node linkType: hard @@ -28314,17 +28224,6 @@ __metadata: languageName: node linkType: hard -"socks-proxy-agent@npm:^6.0.0": - version: 6.2.1 - resolution: "socks-proxy-agent@npm:6.2.1" - dependencies: - agent-base: ^6.0.2 - debug: ^4.3.3 - socks: ^2.6.2 - checksum: d75c1cf1fdd7f8309a43a77f84409b793fc0f540742ef915154e70ac09a08b0490576fe85d4f8d68bbf80e604a62957a17ab5ef50d312fe1442b0ab6f8f6e6f6 - languageName: node - linkType: hard - "socks-proxy-agent@npm:^7.0.0": version: 7.0.0 resolution: "socks-proxy-agent@npm:7.0.0" @@ -28698,15 +28597,6 @@ __metadata: languageName: node linkType: hard -"ssri@npm:^8.0.0, ssri@npm:^8.0.1": - version: 8.0.1 - resolution: "ssri@npm:8.0.1" - dependencies: - minipass: ^3.1.1 - checksum: 5cfae216ae02dcd154d1bbed2d0a60038a4b3a2fcaac3c7e47401ff4e058e551ee74cfdba618871bf168cd583db7b8324f94af6747d4303b73cd4c3f6dc5c9c2 - languageName: node - linkType: hard - "stack-utils@npm:^2.0.2, stack-utils@npm:^2.0.3": version: 2.0.6 resolution: "stack-utils@npm:2.0.6" @@ -29407,7 +29297,7 @@ __metadata: languageName: node linkType: hard -"tar@npm:^6.0.2, tar@npm:^6.1.11, tar@npm:^6.1.13, tar@npm:^6.1.2": +"tar@npm:^6.1.11, tar@npm:^6.1.13, tar@npm:^6.1.2": version: 6.1.15 resolution: "tar@npm:6.1.15" dependencies: @@ -30477,15 +30367,6 @@ __metadata: languageName: node linkType: hard -"unique-filename@npm:^1.1.1": - version: 1.1.1 - resolution: "unique-filename@npm:1.1.1" - dependencies: - unique-slug: ^2.0.0 - checksum: d005bdfaae6894da8407c4de2b52f38b3c58ec86e79fc2ee19939da3085374413b073478ec54e721dc8e32b102cf9e50d0481b8331abdc62202e774b789ea874 - languageName: node - linkType: hard - "unique-filename@npm:^2.0.0": version: 2.0.1 resolution: "unique-filename@npm:2.0.1" @@ -30504,15 +30385,6 @@ __metadata: languageName: node linkType: hard -"unique-slug@npm:^2.0.0": - version: 2.0.2 - resolution: "unique-slug@npm:2.0.2" - dependencies: - imurmurhash: ^0.1.4 - checksum: 9eabc51680cf0b8b197811a48857e41f1364b25362300c1ff636c0eca5ec543a92a38786f59cf0697e62c6f814b11ecbe64e8093db71246468a1f03b80c83970 - languageName: node - linkType: hard - "unique-slug@npm:^3.0.0": version: 3.0.0 resolution: "unique-slug@npm:3.0.0" @@ -31626,6 +31498,13 @@ __metadata: languageName: node linkType: hard +"web-streams-polyfill@npm:^3.0.3": + version: 3.2.1 + resolution: "web-streams-polyfill@npm:3.2.1" + checksum: 70ed6b5708e14afa2ab699221ea197d7c68ec0c8274bbe0181aecc5ba636ca27cbd383d2049f0eb9d529e738f5c088825502b317f3df24d18a278e4cc9a10e8b + languageName: node + linkType: hard + "webidl-conversions@npm:^3.0.0": version: 3.0.1 resolution: "webidl-conversions@npm:3.0.1" From d2cb64f8bc7148e5e2a8d1bbf886273acd74f3d7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 6 Jun 2023 23:56:04 +0200 Subject: [PATCH 2/5] switch to use react component, re-copy css into css-in-js --- code/ui/components/package.json | 1 + .../src/ScrollArea/GlobalScrollAreaStyles.tsx | 925 +++++++++--------- .../src/ScrollArea/OverlayScrollbars.tsx | 87 +- .../components/src/ScrollArea/ScrollArea.tsx | 5 +- .../syntaxhighlighter/syntaxhighlighter.tsx | 4 +- .../src/components/sidebar/Sidebar.tsx | 98 +- code/yarn.lock | 11 + 7 files changed, 559 insertions(+), 572 deletions(-) diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 35374819963a..c7fa6cc617ca 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -64,6 +64,7 @@ "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", "overlayscrollbars": "^2.2.0", + "overlayscrollbars-react": "^0.5.0", "polished": "^4.2.2", "prettier": "^2.8.0", "react-popper-tooltip": "^4.4.2", diff --git a/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx index 593b06cecb21..1484d8e03ecf 100644 --- a/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx +++ b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx @@ -1,456 +1,495 @@ import React from 'react'; -import { Global, keyframes } from '@storybook/theming'; +import { Global } from '@storybook/theming'; import type { Theme, CSSObject } from '@storybook/theming'; -const hsResizeObserverDummyAnimation = keyframes`0%{z-index:0}to{z-index:-1}`; - -export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => ({ - 'html.os-html, html.os-html>.os-host': { - display: 'block', - overflow: 'hidden', - boxSizing: 'border-box', - height: '100%!important' as any as '100%', - width: '100%!important' as any as '100%', - minWidth: '100%!important' as any as '100%', - minHeight: '100%!important' as any as '100%', - margin: '0!important' as any as 0, - position: 'absolute!important' as any as 'absolute', - }, - 'html.os-html>.os-host>.os-padding': { - position: 'absolute', - }, - 'body.os-dragging, body.os-dragging *': { - cursor: 'default', - }, - '.os-host, .os-host-textarea': { - position: 'relative', - overflow: 'visible!important' as any as 'visible', - flexDirection: 'column', - flexWrap: 'nowrap', - justifyContent: 'flex-start', - alignContent: 'flex-start', - alignItems: 'flex-start', - }, - '.os-host-flexbox': { - overflow: 'hidden!important' as any as 'hidden', - display: 'flex', - }, - '.os-host-flexbox>.os-size-auto-observer': { - height: 'inherit!important' as any as 'inherit', - }, - '.os-host-flexbox>.os-content-glue': { - flexGrow: 1, - flexShrink: 0, - }, - '.os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue': { - minHeight: 0, - minWidth: 0, - flexGrow: 0, - flexShrink: 1, - flexBasis: 'auto', - }, - '#os-dummy-scrollbar-size': { - position: 'fixed', - opacity: 0, - visibility: 'hidden', - overflow: 'scroll', - height: 500, - width: 500, - }, - '#os-dummy-scrollbar-size>div': { - width: '200%', - height: '200%', - margin: 10, - }, - '#os-dummy-scrollbar-size, .os-viewport': {}, - '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport': - { - scrollbarWidth: 'none!important' as any as 'none', - }, - '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner': - { - display: 'none!important' as any as 'none', - width: '0!important' as any as 0, - height: '0!important' as any as 0, - visibility: 'hidden!important' as any as 'hidden', - background: '0 0!important', - }, - '.os-content-glue': { - boxSizing: 'inherit', - maxHeight: '100%', - maxWidth: '100%', - width: '100%', - pointerEvents: 'none', - }, - '.os-padding': { - boxSizing: 'inherit', - direction: 'inherit', - position: 'absolute', - overflow: 'visible', - padding: 0, - margin: 0, - left: 0, - top: 0, - bottom: 0, - right: 0, - width: 'auto!important' as any as 'auto', - height: 'auto!important' as any as 'auto', - zIndex: 1, - }, - '.os-host-overflow>.os-padding': { - overflow: 'hidden', - }, - '.os-viewport': { - direction: 'inherit!important' as any as 'inherit', - boxSizing: 'inherit!important' as any as 'inherit', - resize: 'none!important' as any as 'none', - outline: '0!important' as any as 0, - position: 'absolute', - overflow: 'hidden', - top: 0, - left: 0, - bottom: 0, - right: 0, - padding: 0, - margin: 0, - }, - '.os-content-arrange': { - position: 'absolute', - zIndex: -1, - minHeight: 1, - minWidth: 1, - pointerEvents: 'none', - }, - '.os-content': { - direction: 'inherit', - boxSizing: 'border-box!important' as any as 'border-box', - position: 'relative', - display: 'block', - height: '100%', - width: '100%', - visibility: 'visible', - }, - '.os-content:before, .os-content:after': { - content: "''", - display: 'table', - width: 0, - height: 0, - lineHeight: 0, - fontSize: 0, - }, - '.os-content>.os-textarea': { - boxSizing: 'border-box!important' as any as 'border-box', - direction: 'inherit!important' as any as 'inherit', - background: '0 0!important', - outline: '0 transparent!important', - overflow: 'hidden!important' as any as 'hidden', - position: 'absolute!important' as any as 'absolute', - display: 'block!important' as any as 'block', - top: '0!important' as any as 0, - left: '0!important' as any as 0, - margin: '0!important' as any as 0, - borderRadius: '0!important' as any as 0, - float: 'none!important' as any as 'none', - filter: 'none!important' as any as 'none', - border: '0!important' as any as 0, - resize: 'none!important' as any as 'none', - transform: 'none!important' as any as 'none', - maxWidth: 'none!important' as any as 'none', - maxHeight: 'none!important' as any as 'none', - boxShadow: 'none!important' as any as 'none', - perspective: 'none!important' as any as 'none', - opacity: '1!important' as any as 1, - zIndex: '1!important' as any as 1, - clip: 'auto!important' as any as 'auto', - verticalAlign: 'baseline!important' as any as 'baseline', - padding: 0, - }, - '.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea': { - right: '0!important' as any as 0, - }, - '.os-content>.os-textarea-cover': { - zIndex: -1, - pointerEvents: 'none', - }, - '.os-content>.os-textarea[wrap=off]': { - whiteSpace: 'pre!important' as any as 'pre', - margin: '0!important' as any as 0, - }, - '.os-text-inherit': { - fontFamily: 'inherit', - fontSize: 'inherit', - fontWeight: 'inherit', - fontStyle: 'inherit', - fontVariant: 'inherit', - textTransform: 'inherit', - textDecoration: 'inherit', - textIndent: 'inherit', - textAlign: 'inherit', - textShadow: 'inherit', - textOverflow: 'inherit', - letterSpacing: 'inherit', - wordSpacing: 'inherit', - lineHeight: 'inherit', - unicodeBidi: 'inherit', - direction: 'inherit', - color: 'inherit', - cursor: 'text', - }, - '.os-resize-observer, .os-resize-observer-host': { - boxSizing: 'inherit', - display: 'block', - opacity: 0, - position: 'absolute', - top: 0, - left: 0, - height: '100%', - width: '100%', - overflow: 'hidden', - pointerEvents: 'none', - zIndex: -1, - }, - '.os-resize-observer-host': { - padding: 'inherit', - border: 'inherit', - borderColor: 'transparent', - borderStyle: 'solid', - boxSizing: 'border-box', - }, - '.os-resize-observer-host:after': { - content: "''", - }, - '.os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after': { - height: '200%', - width: '200%', - padding: 'inherit', - border: 'inherit', - margin: 0, - display: 'block', - boxSizing: 'content-box', - }, - '.os-resize-observer.observed, object.os-resize-observer': { - boxSizing: 'border-box!important' as any as 'border-box', - }, - '.os-size-auto-observer': { - boxSizing: 'inherit!important' as any as 'inherit', - height: '100%', - width: 'inherit', - maxWidth: 1, - position: 'relative', - float: 'left', - maxHeight: 1, - overflow: 'hidden', - zIndex: -1, - padding: 0, - margin: 0, - pointerEvents: 'none', - flexGrow: 'inherit', - flexShrink: 0, - flexBasis: 0, - }, - '.os-size-auto-observer>.os-resize-observer': { - width: '1000%', - height: '1000%', - minHeight: 1, - minWidth: 1, - }, - '.os-resize-observer-item': { - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0, - overflow: 'hidden', - zIndex: -1, - opacity: 0, - direction: 'ltr!important' as any as 'ltr', - flex: 'none!important' as any as 'none', - }, - '.os-resize-observer-item-final': { - position: 'absolute', - left: 0, - top: 0, - transition: 'none!important' as any as 'none', - flex: 'none!important' as any as 'none', - }, - '.os-resize-observer': { - animationDuration: '.001s', - animationName: `${hsResizeObserverDummyAnimation}`, - }, - '.os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner': { - transition: 'opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s', - }, - 'html.os-html>.os-host>.os-scrollbar': { - position: 'absolute', - zIndex: 999999, - }, - '.os-scrollbar, .os-scrollbar-corner': { - position: 'absolute', - opacity: 1, - zIndex: 1, - }, - '.os-scrollbar-corner': { - bottom: 0, - right: 0, - height: 10, - width: 10, - backgroundColor: 'transparent', - }, - '.os-scrollbar': { - pointerEvents: 'none', - padding: 2, - boxSizing: 'border-box', - background: 0, - }, - '.os-scrollbar-track': { - pointerEvents: 'auto', - position: 'relative', - height: '100%', - width: '100%', - padding: '0!important' as any as 0, - border: '0!important' as any as 0, - }, - '.os-scrollbar-handle': { - pointerEvents: 'auto', - position: 'absolute', - width: '100%', - height: '100%', - }, - '.os-scrollbar-handle-off, .os-scrollbar-track-off': { - pointerEvents: 'none', - }, - '.os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *': { - pointerEvents: 'none!important' as any as 'none', - }, - '.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle': { - opacity: '0!important' as any as 0, - }, - '.os-scrollbar-horizontal': { - bottom: 0, - left: 0, - right: 10, - height: 10, - }, - '.os-scrollbar-vertical': { - top: 0, - right: 0, - bottom: 10, - width: 10, - }, - '.os-host-rtl>.os-scrollbar-horizontal': { - right: 0, - }, - '.os-host-rtl>.os-scrollbar-vertical': { - right: 'auto', - left: 0, - }, - '.os-host-rtl>.os-scrollbar-corner': { - right: 'auto', - left: 0, - }, - '.os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner': - { +export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => + ({ + '.os-size-observer,\n.os-size-observer-listener': { + direction: 'inherit', + pointerEvents: 'none', + overflow: 'hidden', + visibility: 'hidden', + boxSizing: 'border-box', + }, + '.os-size-observer,\n.os-size-observer-listener,\n.os-size-observer-listener-item,\n.os-size-observer-listener-item-final': + { + writingMode: 'horizontal-tb', + position: 'absolute', + left: '0', + top: '0', + }, + '.os-size-observer': { + zIndex: -1, + contain: 'strict', + display: 'flex', + flexDirection: 'row', + flexWrap: 'nowrap', + padding: 'inherit', + border: 'inherit', + boxSizing: 'inherit', + margin: '-133px', + top: '0', + right: '0', + bottom: '0', + left: '0', + transform: 'scale(0.1)', + }, + '.os-size-observer::before': { + content: '""', + flex: 'none', + boxSizing: 'inherit', + padding: '10px', + width: '10px', + height: '10px', + }, + '.os-size-observer-appear': { + animation: 'os-size-observer-appear-animation 1ms forwards', + }, + '.os-size-observer-listener': { + boxSizing: 'border-box', + position: 'relative', + flex: 'auto', + padding: 'inherit', + border: 'inherit', + margin: '-133px', + transform: 'scale(10)', + }, + '.os-size-observer-listener.ltr': { marginRight: '-266px', marginLeft: '0' }, + '.os-size-observer-listener.rtl': { marginLeft: '-266px', marginRight: '0' }, + '.os-size-observer-listener:empty::before': { + content: '""', + width: '100%', + height: '100%', + }, + '.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item': + { + display: 'block', + position: 'relative', + padding: 'inherit', + border: 'inherit', + boxSizing: 'content-box', + flex: 'auto', + }, + '.os-size-observer-listener-scroll': { + boxSizing: 'border-box', + display: 'flex', + }, + '.os-size-observer-listener-item': { + right: '0', + bottom: '0', + overflow: 'hidden', + direction: 'ltr', + flex: 'none', + }, + '.os-size-observer-listener-item-final': { transition: 'none' }, + '@keyframes os-size-observer-appear-animation': { + from: { cursor: 'auto' }, + to: { cursor: 'none' }, + }, + '.os-trinsic-observer': { + flex: 'none', + boxSizing: 'border-box', + position: 'relative', + maxWidth: '0px', + maxHeight: '1px', + padding: '0', + margin: '0', + border: 'none', + overflow: 'hidden', + zIndex: -1, + height: '0', + top: 'calc(100% + 1px)', + contain: 'strict', + }, + '.os-trinsic-observer:not(:empty)': { + height: 'calc(100% + 1px)', + top: '-1px', + }, + '.os-trinsic-observer:not(:empty) > .os-size-observer': { + width: '1000%', + height: '1000%', + minHeight: '1px', + minWidth: '1px', + }, + '.os-environment': { + '--os-custom-prop': '-1', + position: 'fixed', + opacity: 0, + visibility: 'hidden', + overflow: 'scroll', + height: '200px', + width: '200px', + zIndex: 'var(--os-custom-prop)', + }, + '.os-environment div': { width: '200%', height: '200%', margin: '10px 0' }, + '.os-environment.os-environment-flexbox-glue': { + display: 'flex', + flexDirection: 'row', + flexWrap: 'nowrap', + height: 'auto', + width: 'auto', + minHeight: '200px', + minWidth: '200px', + }, + '.os-environment.os-environment-flexbox-glue div': { + flex: 'auto', + width: 'auto', + height: 'auto', + maxHeight: '100%', + maxWidth: '100%', + margin: '0', + }, + '.os-environment.os-environment-flexbox-glue-max': { maxHeight: '200px' }, + '.os-environment.os-environment-flexbox-glue-max div': { + overflow: 'visible', + }, + '.os-environment.os-environment-flexbox-glue-max div::before': { + content: '""', + display: 'block', + height: '999px', + width: '999px', + }, + '.os-environment,\n[data-overlayscrollbars-viewport]': { + msOverflowStyle: 'scrollbar !important', + }, + '[data-overlayscrollbars-initialize],\n[data-overlayscrollbars~=scrollbarHidden],\n[data-overlayscrollbars-viewport~=scrollbarHidden],\n.os-scrollbar-hidden.os-environment': + { + scrollbarWidth: 'none !important', + }, + '[data-overlayscrollbars-initialize]::-webkit-scrollbar,\n[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar-corner': + { + WebkitAppearance: 'none !important', + appearance: 'none !important', + display: 'none !important', + width: '0 !important', + height: '0 !important', + }, + '[data-overlayscrollbars-initialize]': { overflow: 'auto' }, + 'html[data-overlayscrollbars],\nhtml.os-scrollbar-hidden,\nhtml.os-scrollbar-hidden > body': { + boxSizing: 'border-box', + margin: '0', + width: '100%', + height: '100%', + }, + 'html[data-overlayscrollbars] > body': { overflow: 'visible' }, + '[data-overlayscrollbars~=host]': { position: 'relative' }, + '[data-overlayscrollbars~=host],\n[data-overlayscrollbars-padding]': { + display: 'flex', + flexDirection: 'row !important', + flexWrap: 'nowrap !important', + }, + '[data-overlayscrollbars-padding],\n[data-overlayscrollbars-viewport]': { + boxSizing: 'inherit', + position: 'relative', + flex: 'auto !important', + height: 'auto', + width: '100%', + padding: '0', + margin: '0', + border: 'none', + zIndex: 0, + overflow: 'hidden', + }, + '[data-overlayscrollbars-viewport]': { '--os-vaw': '0', '--os-vah': '0' }, + '[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before': { + content: '""', + position: 'absolute', + pointerEvents: 'none', + zIndex: -1, + minWidth: '1px', + minHeight: '1px', + width: 'var(--os-vaw)', + height: 'var(--os-vah)', + }, + '[data-overlayscrollbars~=host],\n[data-overlayscrollbars~=viewport]': { + overflow: 'hidden', + }, + '[data-overlayscrollbars~=overflowVisible],\n[data-overlayscrollbars-padding~=overflowVisible],\n[data-overlayscrollbars-viewport~=overflowVisible]': + { + overflow: 'visible', + }, + '[data-overlayscrollbars-overflow-x=hidden]': { + overflowX: 'hidden', + overflowY: 'hidden', + }, + '[data-overlayscrollbars-overflow-x=scroll]': { overflowX: 'scroll' }, + '[data-overlayscrollbars-overflow-y=scroll]': { overflowY: 'scroll' }, + '[data-overlayscrollbars~=scrollbarPressed],\n[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]': + { + scrollBehavior: 'auto !important', + }, + '[data-overlayscrollbars-content]': { boxSizing: 'inherit' }, + '[data-overlayscrollbars-grid],\n[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]': + { + display: 'grid', + gridTemplate: '1fr/1fr', + }, + '[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport]': + { + height: 'auto !important', + width: 'auto !important', + }, + '.os-scrollbar': { + contain: ['size layout', 'size layout style'], + transition: + 'opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s', + pointerEvents: 'none', + position: 'absolute', opacity: 0, visibility: 'hidden', + '--os-size': '0', + '--os-padding-perpendicular': '0', + '--os-padding-axis': '0', + '--os-track-border-radius': '0', + '--os-track-bg': 'none', + '--os-track-bg-hover': 'none', + '--os-track-bg-active': 'none', + '--os-track-border': 'none', + '--os-track-border-hover': 'none', + '--os-track-border-active': 'none', + '--os-handle-border-radius': '0', + '--os-handle-bg': 'none', + '--os-handle-bg-hover': 'none', + '--os-handle-bg-active': 'none', + '--os-handle-border': 'none', + '--os-handle-border-hover': 'none', + '--os-handle-border-active': 'none', + '--os-handle-min-size': '33px', + '--os-handle-max-size': 'none', + '--os-handle-perpendicular-size': '100%', + '--os-handle-perpendicular-size-hover': '100%', + '--os-handle-perpendicular-size-active': '100%', + '--os-handle-interactive-area-offset': '0', + }, + 'body > .os-scrollbar': { position: 'fixed', zIndex: 99999 }, + '.os-scrollbar-transitionless': { transition: 'none' }, + '.os-scrollbar-track': { + position: 'relative', + direction: 'ltr !important', + padding: '0 !important', + border: 'none !important', + }, + '.os-scrollbar-handle': { position: 'absolute' }, + '.os-scrollbar-track,\n.os-scrollbar-handle': { pointerEvents: 'none', + width: '100%', + height: '100%', + }, + '.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,\n.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle': + { + pointerEvents: 'auto', + touchAction: 'none', + }, + '.os-scrollbar-horizontal': { + bottom: '0', + left: '0', + padding: 'var(--os-padding-perpendicular) var(--os-padding-axis)', + right: 'var(--os-size)', + height: 'var(--os-size)', + }, + '.os-scrollbar-vertical': { + top: '0', + right: '0', + padding: 'var(--os-padding-axis) var(--os-padding-perpendicular)', + bottom: 'var(--os-size)', + width: 'var(--os-size)', + }, + '.os-scrollbar-rtl.os-scrollbar-horizontal': { right: '0' }, + '.os-scrollbar-rtl.os-scrollbar-vertical': { right: 'auto', left: '0' }, + '.os-scrollbar-visible,\n.os-scrollbar-interaction.os-scrollbar-visible': { + opacity: 1, + visibility: 'visible', + }, + '.os-scrollbar-auto-hidden': { opacity: 0, visibility: 'hidden' }, + '.os-scrollbar-unusable,\n.os-scrollbar-unusable *,\n.os-scrollbar-wheel,\n.os-scrollbar-wheel *': + { + pointerEvents: 'none !important', + }, + '.os-scrollbar-unusable .os-scrollbar-handle': { opacity: '0 !important' }, + '.os-scrollbar-horizontal .os-scrollbar-handle': { + bottom: '0', + minWidth: 'var(--os-handle-min-size)', + maxWidth: 'var(--os-handle-max-size)', + height: 'var(--os-handle-perpendicular-size)', + transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s', + }, + '.os-scrollbar-vertical .os-scrollbar-handle': { + right: '0', + minHeight: 'var(--os-handle-min-size)', + maxHeight: 'var(--os-handle-max-size)', + width: 'var(--os-handle-perpendicular-size)', + transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s', + }, + '.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle': { + right: 'auto', + left: '0', }, - '.os-scrollbar-corner-resize-both': { - cursor: 'nwse-resize', - }, - '.os-host-rtl>.os-scrollbar-corner-resize-both': { - cursor: 'nesw-resize', - }, - '.os-scrollbar-corner-resize-horizontal': { - cursor: 'ew-resize', - }, - '.os-scrollbar-corner-resize-vertical': { - cursor: 'ns-resize', - }, - '.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize': { - cursor: 'default', - }, - '.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical': { - top: 0, - bottom: 0, - }, - '.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal': - { - right: 0, - left: 0, - }, - '.os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize': { - opacity: '1!important' as any as 1, - visibility: 'visible!important' as any as 'visible', - }, - '.os-scrollbar-corner.os-scrollbar-corner-resize': { - backgroundImage: - 'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)', - backgroundRepeat: 'no-repeat', - backgroundPosition: '100% 100%', - pointerEvents: 'auto!important' as any as 'auto', - }, - '.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize': { - transform: 'scale(-1,1)', - }, - '.os-host-overflow': { - overflow: 'hidden!important' as any as 'hidden', - }, - '.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal': { - left: 10, - right: 0, - }, - '.os-scrollbar.os-scrollbar-unusable': { - background: 0, - }, - '.os-scrollbar>.os-scrollbar-track': { - background: 0, - }, - '.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle': { - minWidth: 30, - }, - '.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle': { - minHeight: 30, - }, - '.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': { - transition: 'background-color .3s', - }, - '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track': { - borderRadius: 10, - }, - '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': { - background: theme.textMutedColor, - opacity: 0.5, - }, - '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': { - opacity: 0.6, - }, - '.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before': - { - content: "''", + '.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl': + { + left: '0', + right: '0', + }, + '.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl': + { + top: '0', + bottom: '0', + }, + '.os-scrollbar .os-scrollbar-track': { + border: 'var(--os-track-border)', + borderRadius: 'var(--os-track-border-radius)', + background: 'var(--os-track-bg)', + transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s', + }, + '.os-scrollbar .os-scrollbar-track:hover': { + border: 'var(--os-track-border-hover)', + background: 'var(--os-track-bg-hover)', + }, + '.os-scrollbar .os-scrollbar-track:active': { + border: 'var(--os-track-border-active)', + background: 'var(--os-track-bg-active)', + }, + '.os-scrollbar .os-scrollbar-handle': { + border: 'var(--os-handle-border)', + borderRadius: 'var(--os-handle-border-radius)', + background: 'var(--os-handle-bg)', + }, + '.os-scrollbar .os-scrollbar-handle:before': { + content: '""', position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, + left: '0', + right: '0', + top: '0', + bottom: '0', display: 'block', }, - '.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before': - { - display: 'none', - }, - '.os-scrollbar-horizontal .os-scrollbar-handle:before': { - top: -6, - bottom: -2, - }, - '.os-scrollbar-vertical .os-scrollbar-handle:before': { - left: -6, - right: -2, - }, - '.os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before': { - right: -6, - left: -2, - }, -}); + '.os-scrollbar .os-scrollbar-handle:hover': { + border: 'var(--os-handle-border-hover)', + background: 'var(--os-handle-bg-hover)', + }, + '.os-scrollbar .os-scrollbar-handle:active': { + border: 'var(--os-handle-border-active)', + background: 'var(--os-handle-bg-active)', + }, + '.os-scrollbar-horizontal.os-scrollbar-rtl': { + left: 'var(--os-size)', + right: '0', + }, + '.os-scrollbar-horizontal .os-scrollbar-handle:before': { + top: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', + bottom: 'calc(var(--os-padding-perpendicular) * -1)', + }, + '.os-scrollbar-horizontal:hover .os-scrollbar-handle': { + height: 'var(--os-handle-perpendicular-size-hover)', + }, + '.os-scrollbar-horizontal:active .os-scrollbar-handle': { + height: 'var(--os-handle-perpendicular-size-active)', + }, + '.os-scrollbar-vertical .os-scrollbar-handle:before': { + left: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', + right: 'calc(var(--os-padding-perpendicular) * -1)', + }, + '.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': { + right: + 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', + left: 'calc(var(--os-padding-perpendicular) * -1)', + }, + '.os-scrollbar-vertical:hover .os-scrollbar-handle': { + width: 'var(--os-handle-perpendicular-size-hover)', + }, + '.os-scrollbar-vertical:active .os-scrollbar-handle': { + width: 'var(--os-handle-perpendicular-size-active)', + }, + '[data-overlayscrollbars~=updating] > .os-scrollbar,\n.os-theme-none.os-scrollbar': { + display: 'none !important', + }, + '.os-theme-dark,\n.os-theme-light': { + boxSizing: 'border-box', + '--os-size': '10px', + '--os-padding-perpendicular': '2px', + '--os-padding-axis': '2px', + '--os-track-border-radius': '10px', + '--os-handle-interactive-area-offset': '4px', + '--os-handle-border-radius': '10px', + }, + '.os-theme-dark': { + '--os-handle-bg': 'rgba(0, 0, 0, 0.44)', + '--os-handle-bg-hover': 'rgba(0, 0, 0, 0.55)', + '--os-handle-bg-active': 'rgba(0, 0, 0, 0.66)', + }, + '.os-theme-light': { + '--os-handle-bg': 'rgba(255, 255, 255, 0.44)', + '--os-handle-bg-hover': 'rgba(255, 255, 255, 0.55)', + '--os-handle-bg-active': 'rgba(255, 255, 255, 0.66)', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle': + { + borderRadius: '10px', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track': + { + borderRadius: '10px', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal': + { + padding: '2px 2px', + right: '10px', + height: '10px', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl': + { + left: '10px', + right: '0', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle': + { + minWidth: '33px', + maxWidth: 'none', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before': + { + top: 'calc((\n 2px + 4px\n ) * -1)', + bottom: 'calc(2px * -1)', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical': + { + padding: '2px 2px', + bottom: '10px', + width: '10px', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle': + { + minHeight: '33px', + maxHeight: 'none', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before': + { + left: 'calc((\n 2px + 4px\n ) * -1)', + right: 'calc(2px * -1)', + }, + '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': + { + right: 'calc((\n 2px + 4px\n ) * -1)', + left: 'calc(2px * -1)', + }, + '.os-no-css-vars.os-theme-dark .os-scrollbar-handle': { + background: 'rgba(0, 0, 0, 0.44)', + }, + '.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle': { + background: 'rgba(0, 0, 0, 0.55)', + }, + '.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle': { + background: 'rgba(0, 0, 0, 0.66)', + }, + '.os-no-css-vars.os-theme-light .os-scrollbar-handle': { + background: 'rgba(255, 255, 255, 0.44)', + }, + '.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle': { + background: 'rgba(255, 255, 255, 0.55)', + }, + '.os-no-css-vars.os-theme-light:active .os-scrollbar-handle': { + background: 'rgba(255, 255, 255, 0.66)', + }, + } as any as CSSObject); const GlobalScrollAreaStyles = () => ; diff --git a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx index 318eee988140..852a9fa793c1 100644 --- a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx +++ b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx @@ -1,90 +1,29 @@ -import type { HTMLAttributes, FC } from 'react'; +import type { FC } from 'react'; import React, { useRef, useEffect } from 'react'; -import type { Options } from 'overlayscrollbars'; -import { OverlayScrollbars } from 'overlayscrollbars'; +import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react'; +import { useOverlayScrollbars } from 'overlayscrollbars-react'; -interface OverlayScrollbarsComponentProps extends HTMLAttributes { - children?: any; - options?: Options; -} - -/** - * Using overlayscrollbars-react component results use the esm modules - * which doesn't go through babel leading to IE 11 uncompatibility - * A PR is submitted that may fix this: - * https://github.com/KingSora/OverlayScrollbars/pull/218 - * */ - -export const OverlayScrollbarsComponent: FC = ({ +export const OverlayScrollbarsComponent: FC<{ + options: UseOverlayScrollbarsParams['options']; + className?: string; +}> = ({ options = {}, className, children, - ...rest }) => { - const osTargetRef = useRef(); - const osInstance = useRef(); - - useEffect(() => { - osInstance.current = OverlayScrollbars(osTargetRef.current, options); - mergeHostClassNames(osInstance.current, className); - return () => { - if (OverlayScrollbars.valid(osInstance.current)) { - osInstance.current.destroy(); - osInstance.current = null; - } - }; - }, []); + const ref = useRef(); + const [initialize] = useOverlayScrollbars({ options }); useEffect(() => { - if (OverlayScrollbars.valid(osInstance.current)) { - osInstance.current.options(options); - } - }, [options]); - - useEffect(() => { - if (OverlayScrollbars.valid(osInstance.current)) { - mergeHostClassNames(osInstance.current, className); - } - }, [className]); + initialize(ref.current); + }, [initialize]); return ( -
-
-
-
-
{children}
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {children}
); }; -function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) { - if (OverlayScrollbars.valid(osInstance)) { - const { host } = osInstance.elements(); - const regex = new RegExp( - `(^os-host([-_].+|)$)|${osInstance.elements().host.className.replace(/\s/g, '$|')}$`, - 'g' - ); - const osClassNames = host.className - .split(' ') - .filter((name) => name.match(regex)) - .join(' '); - - host.className = `${osClassNames} ${className || ''}`; - } -} - export default OverlayScrollbarsComponent; diff --git a/code/ui/components/src/ScrollArea/ScrollArea.tsx b/code/ui/components/src/ScrollArea/ScrollArea.tsx index 46d989742b10..02cce4bdd8f5 100644 --- a/code/ui/components/src/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/ScrollArea/ScrollArea.tsx @@ -8,7 +8,10 @@ const OverlayScrollbars = lazy(() => import('./OverlayScrollbars')); const Scroller: FC = ({ horizontal, vertical, ...props }) => ( }> - + ); diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx index 4a84d4bda34f..bb1c08b8e415 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -104,8 +104,8 @@ const UnstyledScroller: FC> = ({ children, className, }): JSX.Element => ( - - {children} + +
{children}
 ); const Scroller = styled(UnstyledScroller)( diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index e6d8ba1ca285..715bc07d50c7 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -33,15 +33,7 @@ const StyledSpaced = styled(Spaced)({ paddingBottom: '2.5rem', }); -const CustomScrollArea = styled(ScrollArea)({ - '&&&&& .os-scrollbar-handle:before': { - left: -12, - }, - '&&&&& .os-scrollbar-vertical': { - right: 5, - }, - padding: 20, -}); +const CustomScrollArea = ScrollArea; const Swap = React.memo(function Swap({ children, @@ -104,50 +96,52 @@ export const Sidebar = React.memo(function Sidebar({ return ( - - +
+ + - - {({ - query, - results, - isBrowsing, - closeMenu, - getMenuProps, - getItemProps, - highlightedIndex, - }) => ( - - - - - )} - - + + {({ + query, + results, + isBrowsing, + closeMenu, + getMenuProps, + getItemProps, + highlightedIndex, + }) => ( + + + + + )} + + +
); diff --git a/code/yarn.lock b/code/yarn.lock index 763c72d3552e..2513cf877d8b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6258,6 +6258,7 @@ __metadata: css: ^3.0.0 memoizerific: ^1.11.3 overlayscrollbars: ^2.2.0 + overlayscrollbars-react: ^0.5.0 polished: ^4.2.2 prettier: ^2.8.0 react-popper-tooltip: ^4.4.2 @@ -24193,6 +24194,16 @@ __metadata: languageName: node linkType: hard +"overlayscrollbars-react@npm:^0.5.0": + version: 0.5.0 + resolution: "overlayscrollbars-react@npm:0.5.0" + peerDependencies: + overlayscrollbars: ^2.0.0 + react: ">=16.8.0" + checksum: 2d70c41e8f171c0e701825b17a3184e403f8173a7124112834feec8f90d3633337acfffdeaf41583b2f948191b855d8a468ebd0990d8437a792ca4899801abd0 + languageName: node + linkType: hard + "overlayscrollbars@npm:^2.2.0": version: 2.2.0 resolution: "overlayscrollbars@npm:2.2.0" From 265fea0b1a91ba280c15b3a4c00a0c3786f0c10c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 7 Jun 2023 09:15:25 +0200 Subject: [PATCH 3/5] improvements --- .../src/ScrollArea/OverlayScrollbars.tsx | 1 + .../src/ScrollArea/ScrollArea.stories.tsx | 8 +- .../src/components/sidebar/Sidebar.tsx | 98 ++++++++++--------- 3 files changed, 58 insertions(+), 49 deletions(-) diff --git a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx index 852a9fa793c1..2bd638ffc345 100644 --- a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx +++ b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx @@ -1,6 +1,7 @@ import type { FC } from 'react'; import React, { useRef, useEffect } from 'react'; import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react'; + import { useOverlayScrollbars } from 'overlayscrollbars-react'; export const OverlayScrollbarsComponent: FC<{ diff --git a/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx index 85d3e8aa7522..e4a7a09e7dc2 100644 --- a/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx +++ b/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx @@ -51,9 +51,11 @@ export const Vertical = () => ( export const Horizontal = () => ( - {list((i) => ( - {i} - ))} +
+ {list((i) => ( + {i} + ))} +
); diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 715bc07d50c7..e6d8ba1ca285 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -33,7 +33,15 @@ const StyledSpaced = styled(Spaced)({ paddingBottom: '2.5rem', }); -const CustomScrollArea = ScrollArea; +const CustomScrollArea = styled(ScrollArea)({ + '&&&&& .os-scrollbar-handle:before': { + left: -12, + }, + '&&&&& .os-scrollbar-vertical': { + right: 5, + }, + padding: 20, +}); const Swap = React.memo(function Swap({ children, @@ -96,52 +104,50 @@ export const Sidebar = React.memo(function Sidebar({ return ( -
- - + + - - {({ - query, - results, - isBrowsing, - closeMenu, - getMenuProps, - getItemProps, - highlightedIndex, - }) => ( - - - - - )} - - -
+ + {({ + query, + results, + isBrowsing, + closeMenu, + getMenuProps, + getItemProps, + highlightedIndex, + }) => ( + + + + + )} + + ); From c7e64a7ac4307a253707efb3384c8429f4b223be Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 7 Jun 2023 10:57:09 +0200 Subject: [PATCH 4/5] undo unintended change --- .../ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx index bb1c08b8e415..4a84d4bda34f 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -104,8 +104,8 @@ const UnstyledScroller: FC> = ({ children, className, }): JSX.Element => ( - -
{children}
+ + {children} ); const Scroller = styled(UnstyledScroller)( From bcfd4e7c02dbad9aee894630d958b3a10e8701ee Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 7 Jun 2023 12:17:22 +0200 Subject: [PATCH 5/5] fix color --- code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx index 1484d8e03ecf..a7650a8f922f 100644 --- a/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx +++ b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx @@ -351,7 +351,8 @@ export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) = '.os-scrollbar .os-scrollbar-handle': { border: 'var(--os-handle-border)', borderRadius: 'var(--os-handle-border-radius)', - background: 'var(--os-handle-bg)', + background: theme.textMutedColor, + opacity: 0.5, }, '.os-scrollbar .os-scrollbar-handle:before': { content: '""', @@ -364,7 +365,7 @@ export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) = }, '.os-scrollbar .os-scrollbar-handle:hover': { border: 'var(--os-handle-border-hover)', - background: 'var(--os-handle-bg-hover)', + opacity: 0.6, }, '.os-scrollbar .os-scrollbar-handle:active': { border: 'var(--os-handle-border-active)',