From 888aa911e2490b2adbde8309ee8ad30dbd168bd2 Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Mon, 24 Jun 2024 16:46:10 -0700 Subject: [PATCH 1/9] Update to iTwin 4.7.2 (and newer appui) For some unknown reason, this caused our three remaining class-based React components to fail to compile, so those were converted to functional components. --- package-lock.json | 462 ++++++++++++++-------- package.json | 32 +- src/mobile-ui-react/ActionSheetButton.tsx | 50 +-- src/mobile-ui-react/ResizablePanel.tsx | 183 ++++----- 4 files changed, 424 insertions(+), 303 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6fe18c..9f24816 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,23 +10,23 @@ "license": "MIT", "dependencies": { "@bentley/icons-generic-webfont": "1.0.34", - "@itwin/appui-abstract": "4.5.1", - "@itwin/appui-react": "4.12.0", - "@itwin/components-react": "4.12.0", - "@itwin/core-bentley": "4.5.1", - "@itwin/core-common": "4.5.1", - "@itwin/core-frontend": "4.5.1", - "@itwin/core-geometry": "4.5.1", - "@itwin/core-i18n": "4.5.1", - "@itwin/core-markup": "4.5.1", - "@itwin/core-orbitgt": "4.5.1", - "@itwin/core-quantity": "4.5.1", - "@itwin/core-react": "4.12.0", - "@itwin/imodel-components-react": "4.12.0", + "@itwin/appui-abstract": "4.7.2", + "@itwin/appui-react": "4.14.1", + "@itwin/components-react": "4.14.1", + "@itwin/core-bentley": "4.7.2", + "@itwin/core-common": "4.7.2", + "@itwin/core-frontend": "4.7.2", + "@itwin/core-geometry": "4.7.2", + "@itwin/core-i18n": "4.7.2", + "@itwin/core-markup": "4.7.2", + "@itwin/core-orbitgt": "4.7.2", + "@itwin/core-quantity": "4.7.2", + "@itwin/core-react": "4.14.1", + "@itwin/imodel-components-react": "4.14.1", "@itwin/mobile-sdk-core": "0.22.4", - "@itwin/presentation-common": "4.5.1", - "@itwin/presentation-frontend": "4.5.1", - "@itwin/webgl-compatibility": "4.5.1", + "@itwin/presentation-common": "4.7.2", + "@itwin/presentation-frontend": "4.7.2", + "@itwin/webgl-compatibility": "4.7.2", "classnames": "^2.2.6", "react": "^17.0.0", "react-dom": "^17.0.0", @@ -543,28 +543,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", - "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", + "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", "dependencies": { - "@floating-ui/utils": "^0.2.1" + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", - "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", "dependencies": { "@floating-ui/core": "^1.0.0", "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/react": { - "version": "0.26.11", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.11.tgz", - "integrity": "sha512-fo01Cu+jzLDVG/AYAV2OtV6flhXvxP5rDaR1Fk8WWhtsFqwk478Dr2HGtB8s0HqQCsFWVbdHYpPjMiQiR/A9VA==", + "version": "0.26.17", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.17.tgz", + "integrity": "sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==", "dependencies": { - "@floating-ui/react-dom": "^2.0.0", + "@floating-ui/react-dom": "^2.1.0", "@floating-ui/utils": "^0.2.0", "tabbable": "^6.0.0" }, @@ -574,11 +574,11 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", - "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz", + "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==", "dependencies": { - "@floating-ui/dom": "^1.6.1" + "@floating-ui/dom": "^1.0.0" }, "peerDependencies": { "react": ">=16.8.0", @@ -586,9 +586,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", - "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", @@ -646,17 +646,17 @@ "dev": true }, "node_modules/@itwin/appui-abstract": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/appui-abstract/-/appui-abstract-4.5.1.tgz", - "integrity": "sha512-wVf/Nv1nV329Pt3/Mq+gqGU2B1EAMW6jJuIWs914bXWefqgz7EeyV5K7aetYCJqaYGf3a30gHDD93E8Ul/OX0Q==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/appui-abstract/-/appui-abstract-4.7.2.tgz", + "integrity": "sha512-ioFzEAOHk6klhNgp9LJkCp6sgbb//khpuyRQwdBlKZcGaC2a1Q28xtGNZ6/a/vVjUSV9NlZh9geIXHEy8CkEjg==", "peerDependencies": { - "@itwin/core-bentley": "^4.5.1" + "@itwin/core-bentley": "^4.7.2" } }, "node_modules/@itwin/appui-react": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@itwin/appui-react/-/appui-react-4.12.0.tgz", - "integrity": "sha512-xxTTYnCProc53qKVkMMP1VdGAex/Vb2LC29cUXilxlPItNfYW7UfO943OOaqZidp9ka+/rO7lmx6Jma8Kalx2Q==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@itwin/appui-react/-/appui-react-4.14.1.tgz", + "integrity": "sha512-zfzhaAF38AkDgc29woCBf571LzpzH/E800OiVGCW6x1XTnvrloo01f4lokXQ21mzNMZ/yoOei0Wezgu1JWSENA==", "dependencies": { "@bentley/icons-generic": "^1.0.34", "@itwin/itwinui-icons-react": "^2.8.0", @@ -676,15 +676,15 @@ }, "peerDependencies": { "@itwin/appui-abstract": "^3.7.0 || ^4.0.0", - "@itwin/components-react": "^4.12.0", + "@itwin/components-react": "^4.14.1", "@itwin/core-bentley": "^3.7.0 || ^4.0.0", "@itwin/core-common": "^3.7.0 || ^4.0.0", "@itwin/core-frontend": "^3.7.0 || ^4.0.0", "@itwin/core-geometry": "^3.7.0 || ^4.0.0", "@itwin/core-quantity": "^3.7.0 || ^4.0.0", - "@itwin/core-react": "^4.12.0", + "@itwin/core-react": "^4.14.1", "@itwin/core-telemetry": "^3.7.0 || ^4.0.0", - "@itwin/imodel-components-react": "^4.12.0", + "@itwin/imodel-components-react": "^4.14.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0", "react-redux": "^7.2.2", @@ -709,15 +709,14 @@ } }, "node_modules/@itwin/components-react": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@itwin/components-react/-/components-react-4.12.0.tgz", - "integrity": "sha512-TJUkvJ3zl+bw2v6tnYMCIDspglkdErwoeVWmk0CIIwQppqWMkAhlIbWtS6ffXRdoIeFyir+et1L7xnbqlmmwjg==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@itwin/components-react/-/components-react-4.14.1.tgz", + "integrity": "sha512-RgLpcK3iq6x5z+Rmz7MHtZtuxNyO0Fv52HHYe3bggPAt1azrokukqwCD7838lVbA9o39FgErIpYq7Ea5yK33Cw==", "dependencies": { "@bentley/icons-generic": "^1.0.34", "@itwin/itwinui-icons-react": "^2.8.0", "@itwin/itwinui-react": "^3.6.0", "@itwin/itwinui-variables": "^3.0.0", - "@types/shortid": "~0.0.29", "classnames": "2.3.1", "immer": "9.0.6", "linkify-it": "~2.2.0", @@ -725,13 +724,12 @@ "react-highlight-words": "^0.20.0", "react-window": "^1.8.9", "rxjs": "^7.8.1", - "shortid": "~2.2.15", "ts-key-enum": "~2.0.12" }, "peerDependencies": { "@itwin/appui-abstract": "^3.7.0 || ^4.0.0", "@itwin/core-bentley": "^3.7.0 || ^4.0.0", - "@itwin/core-react": "^4.12.0", + "@itwin/core-react": "^4.14.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } @@ -742,100 +740,101 @@ "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "node_modules/@itwin/core-bentley": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-bentley/-/core-bentley-4.5.1.tgz", - "integrity": "sha512-GFSU2lAhw3LHafIEGLHBYUJ49mobpXwYSQ+8DMDlJjxRsA5s01jIUQ8Ne+osf8UTNoe568bHT8ZrefaiGwXScA==" + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-bentley/-/core-bentley-4.7.2.tgz", + "integrity": "sha512-g328Z14FyW3qR/+3MgxVxLA+Xo9+zvVg0YXCleOavBVp3WN+6E7Uz/yjr2xtV2a7JUGVgpZ0LpjTS7ENm38beA==" }, "node_modules/@itwin/core-common": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-common/-/core-common-4.5.1.tgz", - "integrity": "sha512-oiSS2Fu6yxGzPy69LmHwz0oGGkeudApU4rQ4mf3zEMPmzcpotuyc+cPgDswDcsWb0JIWq2TvklGJBcQS0cGsPw==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-common/-/core-common-4.7.2.tgz", + "integrity": "sha512-p/UquYbYbjKLEFY+6UqqkwaFwkqLCWsJR3Sdcwdtxb8HPI8LGCvREBMf4K3nQOHOVA3pmHoeTanLxW8C19vWYg==", "dependencies": { "flatbuffers": "~1.12.0", "js-base64": "^3.6.1" }, "peerDependencies": { - "@itwin/core-bentley": "^4.5.1", - "@itwin/core-geometry": "^4.5.1" + "@itwin/core-bentley": "^4.7.2", + "@itwin/core-geometry": "^4.7.2" } }, "node_modules/@itwin/core-frontend": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-frontend/-/core-frontend-4.5.1.tgz", - "integrity": "sha512-9VceVzaxn/Xxhi4/bIcHFzYgY39V5HcYsvymh0+ZyyOtXkGPVig0JLvrfMJQu+tdHj7oC4KrSa3uKWWentAvUg==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-frontend/-/core-frontend-4.7.2.tgz", + "integrity": "sha512-sN0ydkJy55G8sYb8iKRdpaMfLMr/vtHl2Tya0nLwR7P/3DC7V898T/3t9AlN3xC27EO9ohLy8TEvICRRUe8u3g==", "dependencies": { "@itwin/cloud-agnostic-core": "^2.1.0", - "@itwin/core-i18n": "4.5.1", - "@itwin/core-telemetry": "4.5.1", + "@itwin/core-i18n": "4.7.2", + "@itwin/core-telemetry": "4.7.2", "@itwin/object-storage-core": "^2.2.2", - "@itwin/webgl-compatibility": "4.5.1", + "@itwin/webgl-compatibility": "4.7.2", "@loaders.gl/core": "^3.1.6", "@loaders.gl/draco": "^3.1.6", "fuse.js": "^3.3.0", + "meshoptimizer": "~0.20.0", "wms-capabilities": "0.4.0" }, "peerDependencies": { - "@itwin/appui-abstract": "^4.5.1", - "@itwin/core-bentley": "^4.5.1", - "@itwin/core-common": "^4.5.1", - "@itwin/core-geometry": "^4.5.1", - "@itwin/core-orbitgt": "^4.5.1", - "@itwin/core-quantity": "^4.5.1" + "@itwin/appui-abstract": "^4.7.2", + "@itwin/core-bentley": "^4.7.2", + "@itwin/core-common": "^4.7.2", + "@itwin/core-geometry": "^4.7.2", + "@itwin/core-orbitgt": "^4.7.2", + "@itwin/core-quantity": "^4.7.2" } }, "node_modules/@itwin/core-geometry": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-geometry/-/core-geometry-4.5.1.tgz", - "integrity": "sha512-YquYcorbH6su0pfRaDAmYxK8C8cpheKiZre6VFDgWKnXUmc5fjkEbJTNgSWJuC9jFeLByPKbD0rHjUZcs9t0uQ==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-geometry/-/core-geometry-4.7.2.tgz", + "integrity": "sha512-gJS/y9JWuVK/frEYYBAsbSY2zfEdr/0P91a1WGcyy3f1WT12uM/rFs4hef8vIfOwNyO/sdkE6fGK1lIpwH2p+g==", "dependencies": { - "@itwin/core-bentley": "4.5.1", + "@itwin/core-bentley": "4.7.2", "flatbuffers": "~1.12.0" } }, "node_modules/@itwin/core-i18n": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-i18n/-/core-i18n-4.5.1.tgz", - "integrity": "sha512-/ZNFTbAsekc2O96+DuK/6QL8Co4qxsRlxww2K91AjToGxYmeqaDEZbCCDKflxn/seJ2HqcBkOkt7o0KOfrY5Dg==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-i18n/-/core-i18n-4.7.2.tgz", + "integrity": "sha512-PBFWMaFovjC692eoobeAF8EYbZH3FSBwMX2UoKjezRY/fFVqg6ZcJS0OKppZo2xssLYYQl5hZp2PGQiAA46hXA==", "dependencies": { "i18next": "^21.9.1", "i18next-browser-languagedetector": "^6.1.2", "i18next-http-backend": "^1.4.4" }, "peerDependencies": { - "@itwin/core-bentley": "^4.5.1" + "@itwin/core-bentley": "^4.7.2" } }, "node_modules/@itwin/core-markup": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-markup/-/core-markup-4.5.1.tgz", - "integrity": "sha512-USzMN5xecKrY2oKTNpRFi0WHkHL4p0hwVrUkBlXBduBGmfnZm1eegl1muUu6E+tL4ifj+j27ehnA0vaZfSXQig==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-markup/-/core-markup-4.7.2.tgz", + "integrity": "sha512-2M0v45mvTpJUfrDAFgOwCv5Fhc7ImzQr7WWCKdH2Hgyxozjss3J2InGRABUco7PPoranJofWO7GsI87RSdOanA==", "dependencies": { "@svgdotjs/svg.js": "3.0.13" }, "peerDependencies": { - "@itwin/core-bentley": "^4.5.1", - "@itwin/core-common": "^4.5.1", - "@itwin/core-frontend": "^4.5.1", - "@itwin/core-geometry": "^4.5.1" + "@itwin/core-bentley": "^4.7.2", + "@itwin/core-common": "^4.7.2", + "@itwin/core-frontend": "^4.7.2", + "@itwin/core-geometry": "^4.7.2" } }, "node_modules/@itwin/core-orbitgt": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-orbitgt/-/core-orbitgt-4.5.1.tgz", - "integrity": "sha512-uXncJVSVxk0U6nQcEzq1obS7MhNKCTdqNDFRHo7rsveMcL+kXAx83OuR4G/ckyzx2kt02oaCrfUBpdVB6xRCNw==" + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-orbitgt/-/core-orbitgt-4.7.2.tgz", + "integrity": "sha512-MyvMwsFHxtl0DST8IxNeKRiPE9xHdSifpYSN2mGOV71dS0a58Vj9KCtZ1FRWaKZKDZYX8gfJhFSaD9jECGQX5Q==" }, "node_modules/@itwin/core-quantity": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-quantity/-/core-quantity-4.5.1.tgz", - "integrity": "sha512-nGaBmKUq0H/wxWQ3J5+iPasXTMTY+aO/jC3lrXd+wk0UtrdnxXkXSTwZVcIW9qqtFwVck4TTN4FKxF8NuJipGQ==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-quantity/-/core-quantity-4.7.2.tgz", + "integrity": "sha512-b03eI0Vi6hEWxijRz4Si5hpRTMgL/duag38c6jNmtu5P/OsQ2xD7707BvkTGIJP6t0EBriDdbtQZOm5NJbZnnQ==", "peerDependencies": { - "@itwin/core-bentley": "^4.5.1" + "@itwin/core-bentley": "^4.7.2" } }, "node_modules/@itwin/core-react": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@itwin/core-react/-/core-react-4.12.0.tgz", - "integrity": "sha512-POY6XR/LYEh8wHD99X1Y+PQSWwN/uxF3xp846nzpmKPkr1YbPaPvVsiOxHHeYB9/CHP/3MyVlLyE5MKbsDAbgw==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@itwin/core-react/-/core-react-4.14.1.tgz", + "integrity": "sha512-KU3hu7QcKiU1h0VH5RnApuyYuOTfclCRK4fnMcGKOEMjUZK7JOUQsfuXUED4ecu6+jjxyVLPO8ASK9dVxKt5Aw==", "dependencies": { "@bentley/icons-generic": "^1.0.34", "@itwin/itwinui-icons-react": "^2.8.0", @@ -861,25 +860,25 @@ "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "node_modules/@itwin/core-telemetry": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/core-telemetry/-/core-telemetry-4.5.1.tgz", - "integrity": "sha512-Cd6Ul9sjSL+HWZgUg84Q8tm9mx/NKZFSdNQFejVZR1hIaJ1PBgqYUbo/xwnGY/AQSKb5LtMZo4lBfyvUX8ALUQ==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/core-telemetry/-/core-telemetry-4.7.2.tgz", + "integrity": "sha512-0pdUjbhJoRqiPuan1YIUjSC5oUzSqBv7CWvo7Q/sh44/rb67D5yByErwDvLW2uz8rO9YjjSd8abq+hYMp2PqnA==", "dependencies": { - "@itwin/core-bentley": "4.5.1", - "@itwin/core-common": "4.5.1" + "@itwin/core-bentley": "4.7.2", + "@itwin/core-common": "4.7.2" } }, "node_modules/@itwin/ecschema-metadata": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/ecschema-metadata/-/ecschema-metadata-4.5.1.tgz", - "integrity": "sha512-LE189DiZBf9QQfRie6kEUi/tVZ3vRImCd49quSIUom5ORYFGYKAjxuUEuljtU5f3tLbK8++s12f0OG1CpSL8PQ==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/ecschema-metadata/-/ecschema-metadata-4.7.2.tgz", + "integrity": "sha512-al5ZOftLr1DY4UoU4Ed/gW1N3fnQvpcqwMT4Bb/KlcdIl/2QvvazV8SyjI8E/ZC6BNr3teEDQ7gRcOQjdbuk7g==", "peer": true, "dependencies": { "almost-equal": "^1.1.0" }, "peerDependencies": { - "@itwin/core-bentley": "^4.5.1", - "@itwin/core-quantity": "^4.5.1" + "@itwin/core-bentley": "^4.7.2", + "@itwin/core-quantity": "^4.7.2" } }, "node_modules/@itwin/eslint-plugin": { @@ -1132,9 +1131,9 @@ "dev": true }, "node_modules/@itwin/imodel-components-react": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@itwin/imodel-components-react/-/imodel-components-react-4.12.0.tgz", - "integrity": "sha512-1DYxGeCDNTD0pIqdn9qe1d15mTbeVB+D1GqHSBZp8SgqJZyTlbPsN6yUau8C0yfazl56NCRNRMuxDOZGdh1PJQ==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/@itwin/imodel-components-react/-/imodel-components-react-4.14.1.tgz", + "integrity": "sha512-6ZlROuhXyLoIOLKa7t/p6yhJUD4rGvnncixNQ+VhhwlA/O2tDTNxNmL19Gj1ELfO61Ix1H8s4i3gMzq3XpB8Eg==", "dependencies": { "@bentley/icons-generic": "^1.0.34", "@itwin/itwinui-icons-react": "^2.8.0", @@ -1145,13 +1144,13 @@ }, "peerDependencies": { "@itwin/appui-abstract": "^3.7.0 || ^4.0.0", - "@itwin/components-react": "^4.12.0", + "@itwin/components-react": "^4.14.1", "@itwin/core-bentley": "^3.7.0 || ^4.0.0", "@itwin/core-common": "^3.7.0 || ^4.0.0", "@itwin/core-frontend": "^3.7.0 || ^4.0.0", "@itwin/core-geometry": "^3.7.0 || ^4.0.0", "@itwin/core-quantity": "^3.7.0 || ^4.0.0", - "@itwin/core-react": "^4.12.0", + "@itwin/core-react": "^4.14.1", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } @@ -1180,13 +1179,14 @@ } }, "node_modules/@itwin/itwinui-react": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/@itwin/itwinui-react/-/itwinui-react-3.8.1.tgz", - "integrity": "sha512-5LnSW9XhSNtIKq1ZcW1fAcMt2lfZ2vRQx9WIYTcq8NPVryBt6JS8ma0cNSp7pQld6HrrYNFwLjPSEvKIHdMGow==", + "version": "3.11.3", + "resolved": "https://registry.npmjs.org/@itwin/itwinui-react/-/itwinui-react-3.11.3.tgz", + "integrity": "sha512-DMdcKd95RtYG0OpBYzsEIcKQCzvcNTf6CsMlJL/j2S1bkCYhac9RHBjNzqIn1bSHlWTvHYEZAwpqdf1ssjfQQg==", "dependencies": { "@floating-ui/react": "^0.26.10", "@itwin/itwinui-illustrations-react": "^2.1.0", "classnames": "^2.3.2", + "jotai": "^2.8.0", "react-table": "^7.8.0", "react-transition-group": "^4.4.5", "tslib": "^2.6.0" @@ -1215,10 +1215,41 @@ "react-dom": ">=16.8.6 < 19.0.0" } }, + "node_modules/@itwin/itwinui-react/node_modules/@types/react": { + "version": "18.3.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", + "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", + "optional": true, + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@itwin/itwinui-react/node_modules/jotai": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.8.3.tgz", + "integrity": "sha512-pR4plVvdbzB6zyt7VLLHPMAkcRSKhRIvZKd+qkifQLa3CEziEo1uwZjePj4acTmQrboiISBlYSdCz3gWcr1Nkg==", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=17.0.0", + "react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/@itwin/itwinui-variables": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@itwin/itwinui-variables/-/itwinui-variables-3.1.0.tgz", - "integrity": "sha512-CHCS+hkaO4c0SUT1Lgi23Gpy8d/fZZKXCyd907c+a5wf8JAOtFQbuCa566YJS+08QDP11Jr+mzDDAMF1Yhk3yg==" + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@itwin/itwinui-variables/-/itwinui-variables-3.2.0.tgz", + "integrity": "sha512-YuJ3IyqRRynQRKPiTz6odF8hVxmAVABxitrqj2VZ1ZtKRVO6EyrWMgZP90cYF1l0EjqzOxG71focaHcZH5C6Ow==" }, "node_modules/@itwin/mobile-sdk-core": { "version": "0.22.4", @@ -1239,23 +1270,107 @@ "base64-js": "^1.5.1" } }, - "node_modules/@itwin/object-storage-core": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@itwin/object-storage-core/-/object-storage-core-2.2.2.tgz", - "integrity": "sha512-yaMAWmDvBRWtH/CFkG02y5B+JaA7W8j0Vquk1dAkoxTxCTTQ54w77wJjpGGLGmNs9qO09K3FsXQnrYMRx/ZzzQ==", + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-bentley": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-bentley/-/core-bentley-4.5.1.tgz", + "integrity": "sha512-GFSU2lAhw3LHafIEGLHBYUJ49mobpXwYSQ+8DMDlJjxRsA5s01jIUQ8Ne+osf8UTNoe568bHT8ZrefaiGwXScA==" + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-common": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-common/-/core-common-4.5.1.tgz", + "integrity": "sha512-oiSS2Fu6yxGzPy69LmHwz0oGGkeudApU4rQ4mf3zEMPmzcpotuyc+cPgDswDcsWb0JIWq2TvklGJBcQS0cGsPw==", "dependencies": { - "@itwin/cloud-agnostic-core": "2.2.2", - "axios": "~1.6.5" + "flatbuffers": "~1.12.0", + "js-base64": "^3.6.1" }, - "engines": { - "node": ">=12.20 <19.0.0" + "peerDependencies": { + "@itwin/core-bentley": "^4.5.1", + "@itwin/core-geometry": "^4.5.1" + } + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-frontend": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-frontend/-/core-frontend-4.5.1.tgz", + "integrity": "sha512-9VceVzaxn/Xxhi4/bIcHFzYgY39V5HcYsvymh0+ZyyOtXkGPVig0JLvrfMJQu+tdHj7oC4KrSa3uKWWentAvUg==", + "dependencies": { + "@itwin/cloud-agnostic-core": "^2.1.0", + "@itwin/core-i18n": "4.5.1", + "@itwin/core-telemetry": "4.5.1", + "@itwin/object-storage-core": "^2.2.2", + "@itwin/webgl-compatibility": "4.5.1", + "@loaders.gl/core": "^3.1.6", + "@loaders.gl/draco": "^3.1.6", + "fuse.js": "^3.3.0", + "wms-capabilities": "0.4.0" }, "peerDependencies": { - "inversify": "^6.0.1", - "reflect-metadata": "^0.1.13" + "@itwin/appui-abstract": "^4.5.1", + "@itwin/core-bentley": "^4.5.1", + "@itwin/core-common": "^4.5.1", + "@itwin/core-geometry": "^4.5.1", + "@itwin/core-orbitgt": "^4.5.1", + "@itwin/core-quantity": "^4.5.1" } }, - "node_modules/@itwin/presentation-common": { + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-geometry": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-geometry/-/core-geometry-4.5.1.tgz", + "integrity": "sha512-YquYcorbH6su0pfRaDAmYxK8C8cpheKiZre6VFDgWKnXUmc5fjkEbJTNgSWJuC9jFeLByPKbD0rHjUZcs9t0uQ==", + "dependencies": { + "@itwin/core-bentley": "4.5.1", + "flatbuffers": "~1.12.0" + } + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-i18n": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-i18n/-/core-i18n-4.5.1.tgz", + "integrity": "sha512-/ZNFTbAsekc2O96+DuK/6QL8Co4qxsRlxww2K91AjToGxYmeqaDEZbCCDKflxn/seJ2HqcBkOkt7o0KOfrY5Dg==", + "dependencies": { + "i18next": "^21.9.1", + "i18next-browser-languagedetector": "^6.1.2", + "i18next-http-backend": "^1.4.4" + }, + "peerDependencies": { + "@itwin/core-bentley": "^4.5.1" + } + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-markup": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-markup/-/core-markup-4.5.1.tgz", + "integrity": "sha512-USzMN5xecKrY2oKTNpRFi0WHkHL4p0hwVrUkBlXBduBGmfnZm1eegl1muUu6E+tL4ifj+j27ehnA0vaZfSXQig==", + "dependencies": { + "@svgdotjs/svg.js": "3.0.13" + }, + "peerDependencies": { + "@itwin/core-bentley": "^4.5.1", + "@itwin/core-common": "^4.5.1", + "@itwin/core-frontend": "^4.5.1", + "@itwin/core-geometry": "^4.5.1" + } + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-orbitgt": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-orbitgt/-/core-orbitgt-4.5.1.tgz", + "integrity": "sha512-uXncJVSVxk0U6nQcEzq1obS7MhNKCTdqNDFRHo7rsveMcL+kXAx83OuR4G/ckyzx2kt02oaCrfUBpdVB6xRCNw==" + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-quantity": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-quantity/-/core-quantity-4.5.1.tgz", + "integrity": "sha512-nGaBmKUq0H/wxWQ3J5+iPasXTMTY+aO/jC3lrXd+wk0UtrdnxXkXSTwZVcIW9qqtFwVck4TTN4FKxF8NuJipGQ==", + "peerDependencies": { + "@itwin/core-bentley": "^4.5.1" + } + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/core-telemetry": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/core-telemetry/-/core-telemetry-4.5.1.tgz", + "integrity": "sha512-Cd6Ul9sjSL+HWZgUg84Q8tm9mx/NKZFSdNQFejVZR1hIaJ1PBgqYUbo/xwnGY/AQSKb5LtMZo4lBfyvUX8ALUQ==", + "dependencies": { + "@itwin/core-bentley": "4.5.1", + "@itwin/core-common": "4.5.1" + } + }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/presentation-common": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/@itwin/presentation-common/-/presentation-common-4.5.1.tgz", "integrity": "sha512-C+u94nIpezL5bS83J+w7AQPZOwf8KBYzYc+QwyC/x35HkcSPQRq/+k8Z9SdPOt+nTpeQvkEqO1C4BMs2SCIM5w==", @@ -1266,7 +1381,7 @@ "@itwin/ecschema-metadata": "^4.5.1" } }, - "node_modules/@itwin/presentation-frontend": { + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/presentation-frontend": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/@itwin/presentation-frontend/-/presentation-frontend-4.5.1.tgz", "integrity": "sha512-fJ+qphteEBTsHnEQWlpRKg66csUfJAx4pqZAf9ZWLO+pOVl6JMhZMdagwC9UDHJyjX6EgPAF+27+Z8lBWfPGRw==", @@ -1284,17 +1399,70 @@ "@itwin/presentation-common": "^4.5.1" } }, + "node_modules/@itwin/mobile-sdk-core/node_modules/@itwin/webgl-compatibility": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@itwin/webgl-compatibility/-/webgl-compatibility-4.5.1.tgz", + "integrity": "sha512-0PVyVYqlGZq2tfcnO+KkBeFh8c7semBI53otDChUIFHggzo2O+PCseATyDgbD+cMqT+9PXZtBwJzk1tkOfEj5Q==", + "dependencies": { + "@itwin/core-bentley": "4.5.1" + } + }, + "node_modules/@itwin/object-storage-core": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@itwin/object-storage-core/-/object-storage-core-2.2.2.tgz", + "integrity": "sha512-yaMAWmDvBRWtH/CFkG02y5B+JaA7W8j0Vquk1dAkoxTxCTTQ54w77wJjpGGLGmNs9qO09K3FsXQnrYMRx/ZzzQ==", + "dependencies": { + "@itwin/cloud-agnostic-core": "2.2.2", + "axios": "~1.6.5" + }, + "engines": { + "node": ">=12.20 <19.0.0" + }, + "peerDependencies": { + "inversify": "^6.0.1", + "reflect-metadata": "^0.1.13" + } + }, + "node_modules/@itwin/presentation-common": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/presentation-common/-/presentation-common-4.7.2.tgz", + "integrity": "sha512-sed5dV423csmParq5FOGRaXzTE02N8vvyc4CldVQ05leKVfHQFEYaJMsI5k26d72pXWLR5hc0FlGhA1rppH3og==", + "peerDependencies": { + "@itwin/core-bentley": "^4.7.2", + "@itwin/core-common": "^4.7.2", + "@itwin/core-quantity": "^4.7.2", + "@itwin/ecschema-metadata": "^4.7.2" + } + }, + "node_modules/@itwin/presentation-frontend": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/presentation-frontend/-/presentation-frontend-4.7.2.tgz", + "integrity": "sha512-tfTUrRjORINdoc777v852VHssQ1O56AllPVZ0eM3i0CQmwFrcBp8FTHExRAOv61s4PhR2OuZExMC2ZINlm+JlQ==", + "dependencies": { + "@itwin/unified-selection": "^0.1.0", + "rxjs": "^7.8.1", + "rxjs-for-await": "^1.0.0" + }, + "peerDependencies": { + "@itwin/core-bentley": "^4.7.2", + "@itwin/core-common": "^4.7.2", + "@itwin/core-frontend": "^4.7.2", + "@itwin/core-quantity": "^4.7.2", + "@itwin/ecschema-metadata": "^4.7.2", + "@itwin/presentation-common": "^4.7.2" + } + }, "node_modules/@itwin/unified-selection": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@itwin/unified-selection/-/unified-selection-0.1.0.tgz", "integrity": "sha512-1Pe2i3sw5dK4h394uC5wTRWvnXxeBZGv+t9LcG7tQr2L+l0Hv+Ryo5+yTN34kABEhMe2UwSHnBRU8jOGsiorIQ==" }, "node_modules/@itwin/webgl-compatibility": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@itwin/webgl-compatibility/-/webgl-compatibility-4.5.1.tgz", - "integrity": "sha512-0PVyVYqlGZq2tfcnO+KkBeFh8c7semBI53otDChUIFHggzo2O+PCseATyDgbD+cMqT+9PXZtBwJzk1tkOfEj5Q==", + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/@itwin/webgl-compatibility/-/webgl-compatibility-4.7.2.tgz", + "integrity": "sha512-UypCjwzvKh1RVGrm+gQl0DnKKnsUpzLJSudPBKI0ykPqwbW/UlrqTq9m7igEAyY0ebuuG7sOxdFYj2LmrkiZ+g==", "dependencies": { - "@itwin/core-bentley": "4.5.1" + "@itwin/core-bentley": "4.7.2" } }, "node_modules/@jridgewell/gen-mapping": { @@ -1990,11 +2158,6 @@ "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", "dev": true }, - "node_modules/@types/shortid": { - "version": "0.0.32", - "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.32.tgz", - "integrity": "sha512-LwWF89yy6Ol8abraYbVedIKzMlgJCTx8zm40yx9t0ZPOJaVR0OmSO4zRRAKfyOJtCwZrEBmhueZX8OiNbQydYw==" - }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.57.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.0.tgz", @@ -3449,9 +3612,9 @@ } }, "node_modules/dompurify": { - "version": "2.4.9", - "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.9.tgz", - "integrity": "sha512-iHtnxYMotKgOTvxIqq677JsKHvCOkAFqj9x8Mek2zdeHW1XjuFKwjpmZeMaXQRQ8AbJZDbcRz/+r1QhwvFtmQg==" + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.5.tgz", + "integrity": "sha512-FgbqnEPiv5Vdtwt6Mxl7XSylttCC03cqP5ldNT2z+Kj0nLxPHJH4+1Cyf5Jasxhw93Rl4Oo11qRoUV72fmya2Q==" }, "node_modules/domutils": { "version": "2.8.0", @@ -6140,6 +6303,11 @@ "node": ">= 8" } }, + "node_modules/meshoptimizer": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.20.0.tgz", + "integrity": "sha512-olcJ1q+YVnjroRJpCL1Dj5aZxr2JMr2hRutMUwhuHZvpAL7SIZgOT6eMlFF4TbBGSR89tawE/gqB79J/LrW/Nw==" + }, "node_modules/micromatch": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", @@ -6278,11 +6446,6 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, - "node_modules/nanoid": { - "version": "2.1.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz", - "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==" - }, "node_modules/nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -8079,15 +8242,6 @@ "vscode-textmate": "5.2.0" } }, - "node_modules/shortid": { - "version": "2.2.16", - "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz", - "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==", - "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", - "dependencies": { - "nanoid": "^2.1.0" - } - }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", diff --git a/package.json b/package.json index 076f11e..a043bca 100644 --- a/package.json +++ b/package.json @@ -27,23 +27,23 @@ }, "dependencies": { "@bentley/icons-generic-webfont": "1.0.34", - "@itwin/appui-abstract": "4.5.1", - "@itwin/appui-react": "4.12.0", - "@itwin/components-react": "4.12.0", - "@itwin/core-bentley": "4.5.1", - "@itwin/core-common": "4.5.1", - "@itwin/core-frontend": "4.5.1", - "@itwin/core-geometry": "4.5.1", - "@itwin/core-i18n": "4.5.1", - "@itwin/core-markup": "4.5.1", - "@itwin/core-orbitgt": "4.5.1", - "@itwin/core-quantity": "4.5.1", - "@itwin/core-react": "4.12.0", - "@itwin/imodel-components-react": "4.12.0", + "@itwin/appui-abstract": "4.7.2", + "@itwin/appui-react": "4.14.1", + "@itwin/components-react": "4.14.1", + "@itwin/core-bentley": "4.7.2", + "@itwin/core-common": "4.7.2", + "@itwin/core-frontend": "4.7.2", + "@itwin/core-geometry": "4.7.2", + "@itwin/core-i18n": "4.7.2", + "@itwin/core-markup": "4.7.2", + "@itwin/core-orbitgt": "4.7.2", + "@itwin/core-quantity": "4.7.2", + "@itwin/core-react": "4.14.1", + "@itwin/imodel-components-react": "4.14.1", "@itwin/mobile-sdk-core": "0.22.4", - "@itwin/presentation-common": "4.5.1", - "@itwin/presentation-frontend": "4.5.1", - "@itwin/webgl-compatibility": "4.5.1", + "@itwin/presentation-common": "4.7.2", + "@itwin/presentation-frontend": "4.7.2", + "@itwin/webgl-compatibility": "4.7.2", "classnames": "^2.2.6", "react": "^17.0.0", "react-dom": "^17.0.0", diff --git a/src/mobile-ui-react/ActionSheetButton.tsx b/src/mobile-ui-react/ActionSheetButton.tsx index a941b7e..c6c5fb0 100644 --- a/src/mobile-ui-react/ActionSheetButton.tsx +++ b/src/mobile-ui-react/ActionSheetButton.tsx @@ -37,37 +37,27 @@ export interface ActionSheetButtonProps extends ActionSheetProps, CommonProps { * in mobile-sdk-core. * @public */ -export class ActionSheetButton extends React.Component { - constructor(props: ActionSheetButtonProps) { - super(props); - } - - public static onClick = async (props: ActionSheetButtonProps, source: React.MouseEvent | DOMRect) => { +export function ActionSheetButton(props: ActionSheetButtonProps) { + const { className, style, iconSpec, size, width, height, iconSize } = props; + const onClick = React.useCallback(async (source: React.MouseEvent | DOMRect) => { const result = await presentActionSheet(props, "currentTarget" in source ? source.currentTarget.getBoundingClientRect() : source); props.onSelected?.(result); - }; - - public override render() { - const { iconSpec, size, width, height, iconSize } = this.props; - const onClick = async (event: React.MouseEvent) => { - return ActionSheetButton.onClick(this.props, event); - }; - let actualIconSize = iconSize; - if (this.props.iconSize === undefined && this.props.iconSpec === undefined) { - actualIconSize = "16px"; - } - return ( - - ); + }, [props]); + let actualIconSize = iconSize; + if (iconSize === undefined && iconSpec === undefined) { + actualIconSize = "16px"; } + return ( + + ); } diff --git a/src/mobile-ui-react/ResizablePanel.tsx b/src/mobile-ui-react/ResizablePanel.tsx index dd58ace..0af65c9 100644 --- a/src/mobile-ui-react/ResizablePanel.tsx +++ b/src/mobile-ui-react/ResizablePanel.tsx @@ -345,7 +345,11 @@ export function DraggableComponent(props: DraggableComponentProps) { setLastPosition(undefined); props.onDragEnd?.(); }; - return + return {props.children} ; } @@ -365,57 +369,50 @@ interface TouchCaptorProps extends CommonProps { onTouchStart?: (e: TouchEvent) => void; onTouchMove?: (e: TouchEvent) => void; onTouchEnd?: (e: TouchEvent) => void; + children?: React.ReactNode; } // This is a copy of PointerCaptor that has been changed to work with touch events instead. -class TouchCaptor extends React.PureComponent { - public override componentDidMount() { - document.addEventListener("touchend", this._handleDocumentTouchEnd); - document.addEventListener("touchmove", this._handleDocumentTouchMove); - } - - public override componentWillUnmount() { - document.removeEventListener("touchend", this._handleDocumentTouchEnd); - document.removeEventListener("touchmove", this._handleDocumentTouchMove); - } - - public override render() { - const className = classnames( - "nz-base-pointerCaptor", - this.props.isTouchStarted && "nz-captured", - this.props.className); - return ( -
-
- {this.props.children} -
- ); - } - - private _handleTouchStart = (e: React.TouchEvent) => { - this.props.onTouchStart && this.props.onTouchStart(e.nativeEvent); - }; - - private _handleDocumentTouchEnd = (e: TouchEvent) => { - if (!this.props.isTouchStarted) +// 2024-06-24: Converted to a function due to compile errors that I couldn't understand after +// updating to iTwin 4.7.x. +function TouchCaptor(props: TouchCaptorProps) { + const { className, children, isTouchStarted, onTouchStart, onTouchMove, onTouchEnd } = props; + const handleTouchStart = React.useCallback((e: React.TouchEvent) => { + onTouchStart?.(e.nativeEvent); + }, [onTouchStart]); + const handleDocumentTouchEnd = React.useCallback((e: TouchEvent) => { + if (!isTouchStarted) return; - this.props.onTouchEnd && this.props.onTouchEnd(e); - }; - - private _handleDocumentTouchMove = (e: TouchEvent) => { - if (!this.props.isTouchStarted) + onTouchEnd?.(e); + }, [onTouchEnd, isTouchStarted]); + const handleDocumentTouchMove = React.useCallback((e: TouchEvent) => { + if (!isTouchStarted) return; - this.props.onTouchMove && this.props.onTouchMove(e); - }; -} - -interface TouchDragHandleState { - isPointerDown: boolean; + onTouchMove?.(e); + }, [onTouchMove, isTouchStarted]); + React.useEffect(() => { + document.addEventListener("touchend", handleDocumentTouchEnd); + document.addEventListener("touchmove", handleDocumentTouchMove); + return () => { + document.removeEventListener("touchend", handleDocumentTouchEnd); + document.removeEventListener("touchmove", handleDocumentTouchMove); + }; + }, [handleDocumentTouchEnd, handleDocumentTouchMove]); + const fullClassName = classnames( + "nz-base-pointerCaptor", + isTouchStarted && "nz-captured", + className); + return ( +
+
+ {children} +
+ ); } interface TouchDragHandleProps extends CommonProps { @@ -429,77 +426,57 @@ interface TouchDragHandleProps extends CommonProps { onDragStart?: (initialPosition: XAndY) => void; /** Function called when component drag is finished. */ onDragEnd?: () => void; + children?: React.ReactNode; } -// A copy of the DragHandle class that uses TouchCaptor instead of PointerCaptor and only allows single touches during drags. -class TouchDragHandle extends React.PureComponent { - private _initial: XAndY | undefined = undefined; - // private _isDragged = false; - - public override readonly state: TouchDragHandleState = { - isPointerDown: false, - }; - - public override render() { - return ( - - ); - } - - private _handlePointerDown = (e: TouchEvent) => { - // if (e.target instanceof Element) { - // e.target.releasePointerCapture(e.pointerId); - // } - +// A copy of the DragHandle component that uses TouchCaptor instead of PointerCaptor and only allows single touches during drags. +// 2024-06-24: Converted to a function due to compile errors that I couldn't understand after +// updating to iTwin 4.7.x. +function TouchDragHandle(props: TouchDragHandleProps) { + const { className, style, lastPosition, onDrag, onDragStart, onDragEnd, children } = props; + const [ isPointerDown, setIsPointerDown ] = React.useState(false); + const [ initial, setInitial ] = React.useState(); + const handlePointerDown = React.useCallback((e: TouchEvent) => { if (e.touches.length !== 1) return; - this.setState({ isPointerDown: true }); + setIsPointerDown(true); e.preventDefault(); - // this._isDragged = false; const touch = e.touches[0]; - this._initial = {x: touch.clientX, y: touch.clientY}; - }; - - private _handlePointerMove = (e: TouchEvent) => { + setInitial({x: touch.clientX, y: touch.clientY}); + }, []); + const handlePointerMove = React.useCallback((e: TouchEvent) => { if (e.touches.length !== 1) return; const touch = e.touches[0]; const current = new Point2d(touch.clientX, touch.clientY); - if (this.props.lastPosition) { - const dragged = current.minus(this.props.lastPosition); - this.props.onDrag?.(dragged); + if (lastPosition) { + const dragged = current.minus(lastPosition); + onDrag?.(dragged); return; } - if (this._initial && current.distance(this._initial) >= 6) { - // this._isDragged = true; - this.props.onDragStart?.(this._initial); + if (initial && current.distance(initial) >= 6) { + onDragStart?.(initial); } - }; - - private _handlePointerUp = () => { - this.setState({ isPointerDown: false }); - this._initial = undefined; - if (this.props.lastPosition) { - this.props.onDragEnd?.(); - return; + }, [lastPosition, initial, onDragStart, onDrag]); + const handlePointerUp = React.useCallback(() => { + setIsPointerDown(false); + setInitial(undefined); + if (lastPosition) { + onDragEnd?.(); } - }; - - // private _handleClick = () => { - // if (this._isDragged) - // return; - // this.props.onClick?.(); - // } + }, [lastPosition, onDragEnd]); + return ( + + ); } From 75085d5e5a7156362d09076097ac83aeda2f9c97 Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 14:22:54 -0700 Subject: [PATCH 2/9] Update @types/react and fix lint errors --- package-lock.json | 16 ++++++++-------- package.json | 2 +- src/mobile-ui-react/MobileUi.tsx | 8 ++++++++ src/mobile-ui-react/PanViewport.ts | 2 ++ src/mobile-ui-react/TabBar.tsx | 2 +- 5 files changed, 20 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9f24816..ca51937 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,7 @@ "@itwin/eslint-plugin": "4.0.0-dev.48", "@svgr/cli": "^6.3.1", "@types/node": "10.14.1", - "@types/react": "^16.14.17", + "@types/react": "^17.0.0", "@types/react-dom": "16.8.4", "@types/react-redux": "^7.1.19", "@typescript-eslint/eslint-plugin": "^5.55.0", @@ -2110,12 +2110,12 @@ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { - "version": "16.14.37", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.37.tgz", - "integrity": "sha512-Jy/9txct4JC2nQsJNACeFczzIQ2Bh7s1PZpbYMs9jbj/jREWxEH0qGFYYZb7dq7H1sU0AAzHAPevtxBHGk6N6Q==", + "version": "17.0.80", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz", + "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", + "@types/scheduler": "^0.16", "csstype": "^3.0.2" } }, @@ -2148,9 +2148,9 @@ } }, "node_modules/@types/scheduler": { - "version": "0.16.3", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/semver": { "version": "7.5.0", diff --git a/package.json b/package.json index a043bca..7def95c 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "@itwin/eslint-plugin": "4.0.0-dev.48", "@svgr/cli": "^6.3.1", "@types/node": "10.14.1", - "@types/react": "^16.14.17", + "@types/react": "^17.0.0", "@types/react-dom": "16.8.4", "@types/react-redux": "^7.1.19", "@typescript-eslint/eslint-plugin": "^5.55.0", diff --git a/src/mobile-ui-react/MobileUi.tsx b/src/mobile-ui-react/MobileUi.tsx index 6be2cbb..15c186d 100644 --- a/src/mobile-ui-react/MobileUi.tsx +++ b/src/mobile-ui-react/MobileUi.tsx @@ -341,9 +341,17 @@ function stringSetHas(set: Set, values: ReadonlyArray) { * A custom React hook function for UiSyncEvents. * @param handler - The callback function. * @param eventIds - The optional event ids to handle. + * + * __NOTE__: This function should probably be deprecated, but right now there is no obvious way to + * replace it. Consequently, the following is for information only: + * NOT@deprecated in 0.22.5. UiSyncEventArgs were deprecated in appui-react 4.13.x. */ +// @todo FIX Remove deprecated usage once appui-react provides a reasonable solution. +// eslint-disable-next-line deprecation/deprecation export function useSyncUiEvent(handler: (args: UiSyncEventArgs) => void, ...eventIds: ReadonlyArray) { React.useEffect(() => { + // @todo FIX Remove deprecated usage once appui-react provides a reasonable solution. + // eslint-disable-next-line deprecation/deprecation return SyncUiEventDispatcher.onSyncUiEvent.addListener((args: UiSyncEventArgs) => { if (eventIds.length === 0 || stringSetHas(args.eventIds, eventIds)) { handler(args); diff --git a/src/mobile-ui-react/PanViewport.ts b/src/mobile-ui-react/PanViewport.ts index f93d07a..4bb5434 100644 --- a/src/mobile-ui-react/PanViewport.ts +++ b/src/mobile-ui-react/PanViewport.ts @@ -70,6 +70,8 @@ export class PanTracker { return this._vpParentDivId; } + // @todo FIX Remove deprecated usage once appui-react provides a reasonable solution. + // eslint-disable-next-line deprecation/deprecation private _onSyncUi = (args: UiSyncEventArgs) => { if (args.eventIds.has(SessionStateActionId.SetIModelConnection) && this._vpParentDivId) { let panTracker = PanTracker.getWithKey(this._vpParentDivId); diff --git a/src/mobile-ui-react/TabBar.tsx b/src/mobile-ui-react/TabBar.tsx index dad1a8f..1213076 100644 --- a/src/mobile-ui-react/TabBar.tsx +++ b/src/mobile-ui-react/TabBar.tsx @@ -137,7 +137,7 @@ export interface TabsAndStandAlonePanelsAPI {    * Renders the TabBar and stand-alone panels, this should be called in the parent's rendering section of code. * @returns A React fragment with the TabBar and the stand-alone panels. */ - renderTabBarAndPanels: () => JSX.Element; + renderTabBarAndPanels: () => React.JSX.Element; /** The --mui-bottom-panel-animation-duration CSS variable value in milliseconds. */ openCloseTiming: number; /** The onAutoClose handler for a resizable panel. */ From c5c0a970f8ed483872fe8fb98bcd71533242fa64 Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 15:31:50 -0700 Subject: [PATCH 3/9] Revert to class-based TouchCaptor and TouchDragHandle --- src/mobile-ui-react/ResizablePanel.tsx | 273 ++++++++++++++++++------- 1 file changed, 200 insertions(+), 73 deletions(-) diff --git a/src/mobile-ui-react/ResizablePanel.tsx b/src/mobile-ui-react/ResizablePanel.tsx index 0af65c9..79d9af8 100644 --- a/src/mobile-ui-react/ResizablePanel.tsx +++ b/src/mobile-ui-react/ResizablePanel.tsx @@ -373,46 +373,97 @@ interface TouchCaptorProps extends CommonProps { } // This is a copy of PointerCaptor that has been changed to work with touch events instead. -// 2024-06-24: Converted to a function due to compile errors that I couldn't understand after -// updating to iTwin 4.7.x. -function TouchCaptor(props: TouchCaptorProps) { - const { className, children, isTouchStarted, onTouchStart, onTouchMove, onTouchEnd } = props; - const handleTouchStart = React.useCallback((e: React.TouchEvent) => { - onTouchStart?.(e.nativeEvent); - }, [onTouchStart]); - const handleDocumentTouchEnd = React.useCallback((e: TouchEvent) => { - if (!isTouchStarted) +class TouchCaptor extends React.PureComponent { + public override componentDidMount() { + document.addEventListener("touchend", this._handleDocumentTouchEnd); + document.addEventListener("touchmove", this._handleDocumentTouchMove); + } + + public override componentWillUnmount() { + document.removeEventListener("touchend", this._handleDocumentTouchEnd); + document.removeEventListener("touchmove", this._handleDocumentTouchMove); + } + + public override render() { + const className = classnames( + "nz-base-pointerCaptor", + this.props.isTouchStarted && "nz-captured", + this.props.className); + return ( +
+
+ {this.props.children} +
+ ); + } + + private _handleTouchStart = (e: React.TouchEvent) => { + this.props.onTouchStart && this.props.onTouchStart(e.nativeEvent); + }; + + private _handleDocumentTouchEnd = (e: TouchEvent) => { + if (!this.props.isTouchStarted) return; - onTouchEnd?.(e); - }, [onTouchEnd, isTouchStarted]); - const handleDocumentTouchMove = React.useCallback((e: TouchEvent) => { - if (!isTouchStarted) + this.props.onTouchEnd && this.props.onTouchEnd(e); + }; + + private _handleDocumentTouchMove = (e: TouchEvent) => { + if (!this.props.isTouchStarted) return; - onTouchMove?.(e); - }, [onTouchMove, isTouchStarted]); - React.useEffect(() => { - document.addEventListener("touchend", handleDocumentTouchEnd); - document.addEventListener("touchmove", handleDocumentTouchMove); - return () => { - document.removeEventListener("touchend", handleDocumentTouchEnd); - document.removeEventListener("touchmove", handleDocumentTouchMove); - }; - }, [handleDocumentTouchEnd, handleDocumentTouchMove]); - const fullClassName = classnames( - "nz-base-pointerCaptor", - isTouchStarted && "nz-captured", - className); - return ( -
-
- {children} -
- ); + this.props.onTouchMove && this.props.onTouchMove(e); + }; +} + +// @todo Use the functional version of TouchCaptor below after sufficient testing. +// // 2024-06-24: Converted to a function due to compile errors that I couldn't understand after +// // updating to iTwin 4.7.x. +// function TouchCaptor(props: TouchCaptorProps) { +// const { className, children, isTouchStarted, onTouchStart, onTouchMove, onTouchEnd } = props; +// const handleTouchStart = React.useCallback((e: React.TouchEvent) => { +// onTouchStart?.(e.nativeEvent); +// }, [onTouchStart]); +// const handleDocumentTouchEnd = React.useCallback((e: TouchEvent) => { +// if (!isTouchStarted) +// return; +// onTouchEnd?.(e); +// }, [onTouchEnd, isTouchStarted]); +// const handleDocumentTouchMove = React.useCallback((e: TouchEvent) => { +// if (!isTouchStarted) +// return; +// onTouchMove?.(e); +// }, [onTouchMove, isTouchStarted]); +// React.useEffect(() => { +// document.addEventListener("touchend", handleDocumentTouchEnd); +// document.addEventListener("touchmove", handleDocumentTouchMove); +// return () => { +// document.removeEventListener("touchend", handleDocumentTouchEnd); +// document.removeEventListener("touchmove", handleDocumentTouchMove); +// }; +// }, [handleDocumentTouchEnd, handleDocumentTouchMove]); +// const fullClassName = classnames( +// "nz-base-pointerCaptor", +// isTouchStarted && "nz-captured", +// className); +// return ( +//
+//
+// {children} +//
+// ); +// } + +interface TouchDragHandleState { + isPointerDown: boolean; } interface TouchDragHandleProps extends CommonProps { @@ -429,54 +480,130 @@ interface TouchDragHandleProps extends CommonProps { children?: React.ReactNode; } -// A copy of the DragHandle component that uses TouchCaptor instead of PointerCaptor and only allows single touches during drags. -// 2024-06-24: Converted to a function due to compile errors that I couldn't understand after -// updating to iTwin 4.7.x. -function TouchDragHandle(props: TouchDragHandleProps) { - const { className, style, lastPosition, onDrag, onDragStart, onDragEnd, children } = props; - const [ isPointerDown, setIsPointerDown ] = React.useState(false); - const [ initial, setInitial ] = React.useState(); - const handlePointerDown = React.useCallback((e: TouchEvent) => { +// A copy of the DragHandle class that uses TouchCaptor instead of PointerCaptor and only allows single touches during drags. +class TouchDragHandle extends React.PureComponent { + private _initial: XAndY | undefined = undefined; + // private _isDragged = false; + + public override readonly state: TouchDragHandleState = { + isPointerDown: false, + }; + + public override render() { + const { style, children, className, lastPosition } = this.props; + return ( + + {children} + + ); + } + + private _handlePointerDown = (e: TouchEvent) => { + // if (e.target instanceof Element) { + // e.target.releasePointerCapture(e.pointerId); + // } + if (e.touches.length !== 1) return; - setIsPointerDown(true); + this.setState({ isPointerDown: true }); e.preventDefault(); + // this._isDragged = false; const touch = e.touches[0]; - setInitial({x: touch.clientX, y: touch.clientY}); - }, []); - const handlePointerMove = React.useCallback((e: TouchEvent) => { + this._initial = {x: touch.clientX, y: touch.clientY}; + }; + + private _handlePointerMove = (e: TouchEvent) => { if (e.touches.length !== 1) return; const touch = e.touches[0]; const current = new Point2d(touch.clientX, touch.clientY); - if (lastPosition) { - const dragged = current.minus(lastPosition); - onDrag?.(dragged); + if (this.props.lastPosition) { + const dragged = current.minus(this.props.lastPosition); + this.props.onDrag?.(dragged); return; } - if (initial && current.distance(initial) >= 6) { - onDragStart?.(initial); + if (this._initial && current.distance(this._initial) >= 6) { + // this._isDragged = true; + this.props.onDragStart?.(this._initial); } - }, [lastPosition, initial, onDragStart, onDrag]); - const handlePointerUp = React.useCallback(() => { - setIsPointerDown(false); - setInitial(undefined); - if (lastPosition) { - onDragEnd?.(); + }; + + private _handlePointerUp = () => { + this.setState({ isPointerDown: false }); + this._initial = undefined; + if (this.props.lastPosition) { + this.props.onDragEnd?.(); + return; } - }, [lastPosition, onDragEnd]); - return ( - - ); + }; + + // private _handleClick = () => { + // if (this._isDragged) + // return; + // this.props.onClick?.(); + // } } + +// @todo Use the functional version of TouchDragHandle below after sufficient testing. +// // 2024-06-24: Converted to a function due to compile errors that I couldn't understand after +// // updating to iTwin 4.7.x. +// function TouchDragHandle(props: TouchDragHandleProps) { +// const { className, style, lastPosition, onDrag, onDragStart, onDragEnd, children } = props; +// const [ isPointerDown, setIsPointerDown ] = React.useState(false); +// const [ initial, setInitial ] = React.useState(); +// const handlePointerDown = React.useCallback((e: TouchEvent) => { +// if (e.touches.length !== 1) +// return; +// setIsPointerDown(true); + +// e.preventDefault(); +// const touch = e.touches[0]; + +// setInitial({x: touch.clientX, y: touch.clientY}); +// }, []); +// const handlePointerMove = React.useCallback((e: TouchEvent) => { +// if (e.touches.length !== 1) +// return; +// const touch = e.touches[0]; +// const current = new Point2d(touch.clientX, touch.clientY); +// if (lastPosition) { +// const dragged = current.minus(lastPosition); +// onDrag?.(dragged); +// return; +// } + +// if (initial && current.distance(initial) >= 6) { +// onDragStart?.(initial); +// } +// }, [lastPosition, initial, onDragStart, onDrag]); +// const handlePointerUp = React.useCallback(() => { +// setIsPointerDown(false); +// setInitial(undefined); +// if (lastPosition) { +// onDragEnd?.(); +// } +// }, [lastPosition, onDragEnd]); +// return ( +// +// {children} +// +// ); +// } From 78786681df6a23d4aea68a38e1d34e9d17792b96 Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 15:35:34 -0700 Subject: [PATCH 4/9] Finish functional to class reversion --- src/mobile-ui-react/ResizablePanel.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/mobile-ui-react/ResizablePanel.tsx b/src/mobile-ui-react/ResizablePanel.tsx index 79d9af8..b6b467e 100644 --- a/src/mobile-ui-react/ResizablePanel.tsx +++ b/src/mobile-ui-react/ResizablePanel.tsx @@ -369,7 +369,6 @@ interface TouchCaptorProps extends CommonProps { onTouchStart?: (e: TouchEvent) => void; onTouchMove?: (e: TouchEvent) => void; onTouchEnd?: (e: TouchEvent) => void; - children?: React.ReactNode; } // This is a copy of PointerCaptor that has been changed to work with touch events instead. @@ -477,7 +476,6 @@ interface TouchDragHandleProps extends CommonProps { onDragStart?: (initialPosition: XAndY) => void; /** Function called when component drag is finished. */ onDragEnd?: () => void; - children?: React.ReactNode; } // A copy of the DragHandle class that uses TouchCaptor instead of PointerCaptor and only allows single touches during drags. From 00a636f5fc21f53f98efab4b9fc33db7990c01fa Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 15:36:40 -0700 Subject: [PATCH 5/9] Remove compile error reference that is no longer correct --- src/mobile-ui-react/ResizablePanel.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/mobile-ui-react/ResizablePanel.tsx b/src/mobile-ui-react/ResizablePanel.tsx index b6b467e..1260389 100644 --- a/src/mobile-ui-react/ResizablePanel.tsx +++ b/src/mobile-ui-react/ResizablePanel.tsx @@ -419,8 +419,7 @@ class TouchCaptor extends React.PureComponent { } // @todo Use the functional version of TouchCaptor below after sufficient testing. -// // 2024-06-24: Converted to a function due to compile errors that I couldn't understand after -// // updating to iTwin 4.7.x. +// // 2024-06-24: Converted to a function. // function TouchCaptor(props: TouchCaptorProps) { // const { className, children, isTouchStarted, onTouchStart, onTouchMove, onTouchEnd } = props; // const handleTouchStart = React.useCallback((e: React.TouchEvent) => { @@ -554,8 +553,7 @@ class TouchDragHandle extends React.PureComponent Date: Tue, 25 Jun 2024 15:46:31 -0700 Subject: [PATCH 6/9] Update @types/react-dom to version 17 --- package-lock.json | 10 +++++----- package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index ca51937..3cc3df0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,7 @@ "@svgr/cli": "^6.3.1", "@types/node": "10.14.1", "@types/react": "^17.0.0", - "@types/react-dom": "16.8.4", + "@types/react-dom": "^17.0.0", "@types/react-redux": "^7.1.19", "@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/parser": "^5.55.0", @@ -2120,12 +2120,12 @@ } }, "node_modules/@types/react-dom": { - "version": "16.8.4", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.4.tgz", - "integrity": "sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==", + "version": "17.0.25", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", + "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", "dev": true, "dependencies": { - "@types/react": "*" + "@types/react": "^17" } }, "node_modules/@types/react-redux": { diff --git a/package.json b/package.json index 7def95c..287148d 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "@svgr/cli": "^6.3.1", "@types/node": "10.14.1", "@types/react": "^17.0.0", - "@types/react-dom": "16.8.4", + "@types/react-dom": "^17.0.0", "@types/react-redux": "^7.1.19", "@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/parser": "^5.55.0", From 4a9f2358d97ee5386b5585d4b623b48c0dc7a16c Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 16:21:34 -0700 Subject: [PATCH 7/9] Reproduce public ActionSheetButton.onClick. --- src/mobile-ui-react/ActionSheetButton.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/mobile-ui-react/ActionSheetButton.tsx b/src/mobile-ui-react/ActionSheetButton.tsx index c6c5fb0..7b57753 100644 --- a/src/mobile-ui-react/ActionSheetButton.tsx +++ b/src/mobile-ui-react/ActionSheetButton.tsx @@ -39,10 +39,6 @@ export interface ActionSheetButtonProps extends ActionSheetProps, CommonProps { */ export function ActionSheetButton(props: ActionSheetButtonProps) { const { className, style, iconSpec, size, width, height, iconSize } = props; - const onClick = React.useCallback(async (source: React.MouseEvent | DOMRect) => { - const result = await presentActionSheet(props, "currentTarget" in source ? source.currentTarget.getBoundingClientRect() : source); - props.onSelected?.(result); - }, [props]); let actualIconSize = iconSize; if (iconSize === undefined && iconSpec === undefined) { actualIconSize = "16px"; @@ -51,7 +47,7 @@ export function ActionSheetButton(props: ActionSheetButtonProps) { { await ActionSheetButton.onClick(props, event); }} strokeWidth="1px" size={size} width={width} @@ -61,3 +57,8 @@ export function ActionSheetButton(props: ActionSheetButtonProps) { /> ); } + +ActionSheetButton.onClick = async (props: ActionSheetButtonProps, source: React.MouseEvent | DOMRect) => { + const result = await presentActionSheet(props, "currentTarget" in source ? source.currentTarget.getBoundingClientRect() : source); + props.onSelected?.(result); +}; From 8f55ce48f7d75078dad1dab448d37c3ce2dde008 Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 16:33:06 -0700 Subject: [PATCH 8/9] Document ActionSheetButton.onClick --- src/mobile-ui-react/ActionSheetButton.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/mobile-ui-react/ActionSheetButton.tsx b/src/mobile-ui-react/ActionSheetButton.tsx index 7b57753..0be4bdc 100644 --- a/src/mobile-ui-react/ActionSheetButton.tsx +++ b/src/mobile-ui-react/ActionSheetButton.tsx @@ -58,6 +58,14 @@ export function ActionSheetButton(props: ActionSheetButtonProps) { ); } +/** + * Act as though an {@link ActionSheetButton} with the given props had been clicked. This will show + * an action sheet using the native UI and call `props.onSelected` with the user's selection. + * @param props The {@link ActionSheetButtonProps} to use to show the action sheet. + * @param source The mouse event that triggered the click (whose target's rectangle will be used + * for the action sheet), or the DOM rectangle of the source component that wants to show the action + * sheet. + */ ActionSheetButton.onClick = async (props: ActionSheetButtonProps, source: React.MouseEvent | DOMRect) => { const result = await presentActionSheet(props, "currentTarget" in source ? source.currentTarget.getBoundingClientRect() : source); props.onSelected?.(result); From 004aa19a29c3b718f8c2a8b5e74c6680dd87a046 Mon Sep 17 00:00:00 2001 From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com> Date: Tue, 25 Jun 2024 16:41:46 -0700 Subject: [PATCH 9/9] Add comment about usePointerCaptor --- src/mobile-ui-react/ResizablePanel.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/mobile-ui-react/ResizablePanel.tsx b/src/mobile-ui-react/ResizablePanel.tsx index 1260389..55b76f1 100644 --- a/src/mobile-ui-react/ResizablePanel.tsx +++ b/src/mobile-ui-react/ResizablePanel.tsx @@ -553,6 +553,9 @@ class TouchDragHandle extends React.PureComponent