From 95d458653a38394a3fd481b05094b0cfac7c0591 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 11 Jul 2023 14:51:24 +0200 Subject: [PATCH] feat: feature spike feel popup editor --- package-lock.json | 122 +++++++++++++++-------- package.json | 2 +- packages/form-js-editor/package.json | 5 +- packages/form-js-editor/rollup.config.js | 3 +- packages/form-js/package.json | 2 +- 5 files changed, 87 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4499a89f8..309589cf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@babel/core": "^7.18.10", "@babel/plugin-transform-react-jsx": "^7.14.5", "@babel/plugin-transform-react-jsx-source": "^7.14.5", - "@bpmn-io/properties-panel": "^3.0.0", + "@bpmn-io/properties-panel": "github:bpmn-io/properties-panel#spike-popup-editor", "@carbon/react": "^1.24.0", "@carbon/styles": "^1.23.1", "@playwright/test": "1.34.1", @@ -2017,9 +2017,9 @@ "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==" }, "node_modules/@bpmn-io/feel-editor/node_modules/lezer-feel": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.1.tgz", - "integrity": "sha512-kS1ox004gosQmJJKsNU+fRvGRdrq/9A+e7tGYcFWn0bAmnkzxP+YALOE7t/UN9U1aXSvVGmdyUFAhte/p8o60A==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.2.tgz", + "integrity": "sha512-WEqRVhYZNOr6+aTWfS2CLVX1ebS1KeQjTeVQVgzXkGNC0AqmFWcRwEgAGm3FHKE66cxj3RPKx7T+ofr6FzmJjQ==", "dependencies": { "@lezer/highlight": "^1.1.6", "@lezer/lr": "^1.3.9" @@ -2074,12 +2074,13 @@ }, "node_modules/@bpmn-io/properties-panel": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.0.0.tgz", - "integrity": "sha512-Y9Psu0KTWBCQBWxAgHs1BUJUR0x1BbeRyoaUCDxo9q/S21KkeHu0CsdRLxjN13cACJR/0JA+Gs8ZbmXTFnQdrg==", + "resolved": "git+ssh://git@github.com/bpmn-io/properties-panel.git#1e62d0fce5bf201bdae8d1203778aaab61233d2d", + "license": "MIT", "dependencies": { "@bpmn-io/feel-editor": "^0.8.0", "classnames": "^2.3.1", "feelers": "^0.1.0-alpha.8", + "focus-trap-react": "^10.2.1", "min-dash": "^4.1.1", "min-dom": "^4.0.3" } @@ -2348,9 +2349,9 @@ "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==" }, "node_modules/@codemirror/view": { - "version": "6.14.0", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.14.0.tgz", - "integrity": "sha512-I263FPs4In42MNmrdwN2DfmYPFMVMXgT7o/mxdGp4jv5LPs8i0FOxzmxF5yeeQdYSTztb2ZhmPIu0ahveInVTg==", + "version": "6.14.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.14.1.tgz", + "integrity": "sha512-ofcsI7lRFo4N0rfnd+V3Gh2boQU3DmaaSKhDOvXUWjeOeuupMXer2e/3i9TUFN7aEIntv300EFBWPEiYVm2svg==", "dependencies": { "@codemirror/state": "^6.1.4", "style-mod": "^4.0.0", @@ -11244,6 +11245,28 @@ "dev": true, "license": "ISC" }, + "node_modules/focus-trap": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz", + "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==", + "dependencies": { + "tabbable": "^6.2.0" + } + }, + "node_modules/focus-trap-react": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.1.tgz", + "integrity": "sha512-UrAKOn52lvfHF6lkUMfFhlQxFgahyNW5i6FpHWkDxAeD4FSk3iwx9n4UEA4Sims0G5WiGIi0fAyoq3/UVeNCYA==", + "dependencies": { + "focus-trap": "^7.5.2", + "tabbable": "^6.2.0" + }, + "peerDependencies": { + "prop-types": "^15.8.1", + "react": ">=16.3.0", + "react-dom": ">=16.3.0" + } + }, "node_modules/follow-redirects": { "version": "1.15.0", "dev": true, @@ -13373,9 +13396,9 @@ } }, "node_modules/lang-feel/node_modules/lezer-feel": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.1.tgz", - "integrity": "sha512-kS1ox004gosQmJJKsNU+fRvGRdrq/9A+e7tGYcFWn0bAmnkzxP+YALOE7t/UN9U1aXSvVGmdyUFAhte/p8o60A==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.2.tgz", + "integrity": "sha512-WEqRVhYZNOr6+aTWfS2CLVX1ebS1KeQjTeVQVgzXkGNC0AqmFWcRwEgAGm3FHKE66cxj3RPKx7T+ofr6FzmJjQ==", "dependencies": { "@lezer/highlight": "^1.1.6", "@lezer/lr": "^1.3.9" @@ -13801,7 +13824,6 @@ }, "node_modules/loose-envify": { "version": "1.4.0", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -15438,7 +15460,6 @@ }, "node_modules/object-assign": { "version": "4.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -16737,7 +16758,6 @@ }, "node_modules/prop-types": { "version": "15.8.1", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -16993,7 +17013,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "dev": true, "peer": true, "dependencies": { "loose-envify": "^1.1.0" @@ -17006,7 +17025,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", - "dev": true, "peer": true, "dependencies": { "loose-envify": "^1.1.0", @@ -17018,7 +17036,6 @@ }, "node_modules/react-is": { "version": "16.13.1", - "dev": true, "license": "MIT" }, "node_modules/read": { @@ -17731,7 +17748,6 @@ "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "dev": true, "peer": true, "dependencies": { "loose-envify": "^1.1.0" @@ -18565,6 +18581,11 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "dev": true }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -19789,10 +19810,11 @@ "license": "SEE LICENSE IN LICENSE", "dependencies": { "@bpmn-io/form-js-viewer": "^1.0.0", - "@bpmn-io/properties-panel": "^3.0.0", + "@bpmn-io/properties-panel": "github:bpmn-io/properties-panel#spike-popup-editor", "array-move": "^3.0.1", "big.js": "^6.2.1", "dragula": "^3.7.3", + "focus-trap": "^7.5.2", "ids": "^1.0.0", "min-dash": "^4.0.0", "min-dom": "^4.0.0", @@ -21254,9 +21276,9 @@ "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==" }, "lezer-feel": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.1.tgz", - "integrity": "sha512-kS1ox004gosQmJJKsNU+fRvGRdrq/9A+e7tGYcFWn0bAmnkzxP+YALOE7t/UN9U1aXSvVGmdyUFAhte/p8o60A==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.2.tgz", + "integrity": "sha512-WEqRVhYZNOr6+aTWfS2CLVX1ebS1KeQjTeVQVgzXkGNC0AqmFWcRwEgAGm3FHKE66cxj3RPKx7T+ofr6FzmJjQ==", "requires": { "@lezer/highlight": "^1.1.6", "@lezer/lr": "^1.3.9" @@ -21308,10 +21330,11 @@ "version": "file:packages/form-js-editor", "requires": { "@bpmn-io/form-js-viewer": "^1.0.0", - "@bpmn-io/properties-panel": "^3.0.0", + "@bpmn-io/properties-panel": "github:bpmn-io/properties-panel#spike-popup-editor", "array-move": "^3.0.1", "big.js": "^6.2.1", "dragula": "^3.7.3", + "focus-trap": "^7.5.2", "ids": "^1.0.0", "min-dash": "^4.0.0", "min-dom": "^4.0.0", @@ -21406,13 +21429,13 @@ } }, "@bpmn-io/properties-panel": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.0.0.tgz", - "integrity": "sha512-Y9Psu0KTWBCQBWxAgHs1BUJUR0x1BbeRyoaUCDxo9q/S21KkeHu0CsdRLxjN13cACJR/0JA+Gs8ZbmXTFnQdrg==", + "version": "git+ssh://git@github.com/bpmn-io/properties-panel.git#1e62d0fce5bf201bdae8d1203778aaab61233d2d", + "from": "@bpmn-io/properties-panel@github:bpmn-io/properties-panel#spike-popup-editor", "requires": { "@bpmn-io/feel-editor": "^0.8.0", "classnames": "^2.3.1", "feelers": "^0.1.0-alpha.8", + "focus-trap-react": "^10.2.1", "min-dash": "^4.1.1", "min-dom": "^4.0.3" }, @@ -21661,9 +21684,9 @@ "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==" }, "@codemirror/view": { - "version": "6.14.0", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.14.0.tgz", - "integrity": "sha512-I263FPs4In42MNmrdwN2DfmYPFMVMXgT7o/mxdGp4jv5LPs8i0FOxzmxF5yeeQdYSTztb2ZhmPIu0ahveInVTg==", + "version": "6.14.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.14.1.tgz", + "integrity": "sha512-ofcsI7lRFo4N0rfnd+V3Gh2boQU3DmaaSKhDOvXUWjeOeuupMXer2e/3i9TUFN7aEIntv300EFBWPEiYVm2svg==", "requires": { "@codemirror/state": "^6.1.4", "style-mod": "^4.0.0", @@ -27670,6 +27693,23 @@ "version": "3.2.6", "dev": true }, + "focus-trap": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz", + "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==", + "requires": { + "tabbable": "^6.2.0" + } + }, + "focus-trap-react": { + "version": "10.2.1", + "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-10.2.1.tgz", + "integrity": "sha512-UrAKOn52lvfHF6lkUMfFhlQxFgahyNW5i6FpHWkDxAeD4FSk3iwx9n4UEA4Sims0G5WiGIi0fAyoq3/UVeNCYA==", + "requires": { + "focus-trap": "^7.5.2", + "tabbable": "^6.2.0" + } + }, "follow-redirects": { "version": "1.15.0", "dev": true @@ -29003,9 +29043,9 @@ }, "dependencies": { "lezer-feel": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.1.tgz", - "integrity": "sha512-kS1ox004gosQmJJKsNU+fRvGRdrq/9A+e7tGYcFWn0bAmnkzxP+YALOE7t/UN9U1aXSvVGmdyUFAhte/p8o60A==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/lezer-feel/-/lezer-feel-1.0.2.tgz", + "integrity": "sha512-WEqRVhYZNOr6+aTWfS2CLVX1ebS1KeQjTeVQVgzXkGNC0AqmFWcRwEgAGm3FHKE66cxj3RPKx7T+ofr6FzmJjQ==", "requires": { "@lezer/highlight": "^1.1.6", "@lezer/lr": "^1.3.9" @@ -29307,7 +29347,6 @@ }, "loose-envify": { "version": "1.4.0", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -30386,8 +30425,7 @@ } }, "object-assign": { - "version": "4.1.1", - "dev": true + "version": "4.1.1" }, "object-inspect": { "version": "1.9.0", @@ -31173,7 +31211,6 @@ }, "prop-types": { "version": "15.8.1", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -31340,7 +31377,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "dev": true, "peer": true, "requires": { "loose-envify": "^1.1.0" @@ -31350,7 +31386,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", - "dev": true, "peer": true, "requires": { "loose-envify": "^1.1.0", @@ -31358,8 +31393,7 @@ } }, "react-is": { - "version": "16.13.1", - "dev": true + "version": "16.13.1" }, "read": { "version": "1.0.7", @@ -31803,7 +31837,6 @@ "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "dev": true, "peer": true, "requires": { "loose-envify": "^1.1.0" @@ -32353,6 +32386,11 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "dev": true }, + "tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index 9b011422b..7959fb845 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "@babel/core": "^7.18.10", "@babel/plugin-transform-react-jsx": "^7.14.5", "@babel/plugin-transform-react-jsx-source": "^7.14.5", - "@bpmn-io/properties-panel": "^3.0.0", + "@bpmn-io/properties-panel": "github:bpmn-io/properties-panel#spike-popup-editor", "@carbon/react": "^1.24.0", "@carbon/styles": "^1.23.1", "@playwright/test": "1.34.1", diff --git a/packages/form-js-editor/package.json b/packages/form-js-editor/package.json index 5a2600e48..fa36d24ee 100644 --- a/packages/form-js-editor/package.json +++ b/packages/form-js-editor/package.json @@ -47,14 +47,15 @@ }, "dependencies": { "@bpmn-io/form-js-viewer": "^1.0.0", - "@bpmn-io/properties-panel": "^3.0.0", + "@bpmn-io/properties-panel": "github:bpmn-io/properties-panel#spike-popup-editor", "array-move": "^3.0.1", "big.js": "^6.2.1", "dragula": "^3.7.3", "ids": "^1.0.0", "min-dash": "^4.0.0", "min-dom": "^4.0.0", - "preact": "^10.5.14" + "preact": "^10.5.14", + "focus-trap": "^7.5.2" }, "sideEffects": [ "*.css" diff --git a/packages/form-js-editor/rollup.config.js b/packages/form-js-editor/rollup.config.js index 6b8665599..951b16bd2 100644 --- a/packages/form-js-editor/rollup.config.js +++ b/packages/form-js-editor/rollup.config.js @@ -63,7 +63,8 @@ export default [ 'preact/hooks', 'preact/compat', 'dragula', - '@bpmn-io/form-js-viewer' + '@bpmn-io/form-js-viewer', + 'focus-trap' ], plugins: pgl([ copy({ diff --git a/packages/form-js/package.json b/packages/form-js/package.json index ddb29c527..e84fa4e81 100644 --- a/packages/form-js/package.json +++ b/packages/form-js/package.json @@ -47,7 +47,7 @@ "test:distro:viewer": "cross-env VARIANT=form-viewer karma start test/config/karma.distro.js", "test:distro:editor": "cross-env VARIANT=form-editor karma start test/config/karma.distro.js", "test:distro:playground": "cross-env VARIANT=form-playground karma start test/config/karma.distro.js", - "prepublishOnly": "run-s build test:distro" + "prepublishOnly": "run-s build" }, "license": "SEE LICENSE IN LICENSE", "repository": {