diff --git a/lerna.json b/lerna.json index 9332b26f66..81625b3b04 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.2.12-alpha.41", + "version": "2.2.12-alpha.42", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index df2e19ea34..fa643c995f 100644 --- a/packages/backend-core/package.json +++ b/packages/backend-core/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/backend-core", - "version": "2.2.12-alpha.41", + "version": "2.2.12-alpha.42", "description": "Budibase backend core libraries used in server and worker", "main": "dist/src/index.js", "types": "dist/src/index.d.ts", @@ -23,7 +23,7 @@ }, "dependencies": { "@budibase/nano": "10.1.1", - "@budibase/types": "2.2.12-alpha.41", + "@budibase/types": "2.2.12-alpha.42", "@shopify/jest-koa-mocks": "5.0.1", "@techpass/passport-openidconnect": "0.3.2", "aws-cloudfront-sign": "2.2.0", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 6437628002..f07b5bf0a8 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", - "version": "2.2.12-alpha.41", + "version": "2.2.12-alpha.42", "license": "MPL-2.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", @@ -38,7 +38,7 @@ ], "dependencies": { "@adobe/spectrum-css-workflow-icons": "1.2.1", - "@budibase/string-templates": "2.2.12-alpha.41", + "@budibase/string-templates": "2.2.12-alpha.42", "@spectrum-css/accordion": "3.0.24", "@spectrum-css/actionbutton": "1.0.1", "@spectrum-css/actiongroup": "1.0.1", diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 6842b94a32..bdcbaa5d88 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,4 +1,4 @@ -const ignoredClasses = [".flatpickr-calendar"] +const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"] let clickHandlers = [] /** @@ -19,7 +19,7 @@ const handleClick = event => { } // Ignore clicks for modals, unless the handler is registered from a modal - const sourceInModal = handler.element.closest(".spectrum-Modal") != null + const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null const clickInModal = event.target.closest(".spectrum-Modal") != null if (clickInModal && !sourceInModal) { return @@ -33,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true) /** * Adds or updates a click handler */ -const updateHandler = (id, element, callback) => { +const updateHandler = (id, element, anchor, callback) => { let existingHandler = clickHandlers.find(x => x.id === id) if (!existingHandler) { - clickHandlers.push({ id, element, callback }) + clickHandlers.push({ id, element, anchor, callback }) } else { existingHandler.callback = callback } @@ -51,12 +51,22 @@ const removeHandler = id => { /** * Svelte action to apply a click outside handler for a certain element + * opts.anchor is an optional param specifying the real root source of the + * component being observed. This is required for things like popovers, where + * the element using the clickoutside action is the popover, but the popover is + * rendered at the root of the DOM somewhere, whereas the popover anchor is the + * element we actually want to consider when determining the source component. */ -export default (element, callback) => { +export default (element, opts) => { const id = Math.random() - updateHandler(id, element, callback) + const update = newOpts => { + const callback = newOpts?.callback || newOpts + const anchor = newOpts?.anchor || element + updateHandler(id, element, anchor, callback) + } + update(opts) return { - update: newCallback => updateHandler(id, element, newCallback), + update, destroy: () => removeHandler(id), } } diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index 7eb77d90fa..5505b2546d 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -68,7 +68,10 @@