@brightspace-ui/core 3.153.4 → 3.154.0

package/components/dialog/demo/dialog.html

@@ -12,11 +12,15 @@
 			import '../../button/button.js';
 			import '../../dropdown/dropdown-button-subtle.js';
 			import '../../dropdown/dropdown-content.js';
+			import '../../dropdown/dropdown.js';
+			import '../../dropdown/dropdown-menu.js';
 			import '../../filter/filter.js';
 			import '../../filter/filter-dimension-set.js';
 			import '../../filter/filter-dimension-set-value.js';
 			import '../../inputs/input-checkbox.js';
 			import '../../list/demo/demo-list.js';
+			import '../../menu/menu.js';
+			import '../../menu/menu-item.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
 			import './dialog-async-content-until.js';
@@ -82,6 +86,36 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog with complex opener</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-dropdown>
+						<button class="d2l-dropdown-opener">Open it!</button>
+						<d2l-dropdown-menu id="dropdown">
+							<d2l-menu label="Astronomy">
+								<d2l-menu-item id="complex-opener" text="Open dialog"></d2l-menu-item>
+								<d2l-menu-item text="Item 2"></d2l-menu-item>
+								<d2l-menu-item text="Item 3"></d2l-menu-item>
+								<d2l-menu-item text="Item 4"></d2l-menu-item>
+							</d2l-menu>
+						</d2l-dropdown-menu>
+					</d2l-dropdown>
+					<d2l-dialog id="complex-opener-dialog" title-text="Dialog Title">
+						<div>
+							Hello
+						</div>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#complex-opener').addEventListener('d2l-menu-item-select', () => {
+							document.querySelector('#complex-opener-dialog').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Dialog (with promise)</h2>
 
 			<d2l-demo-snippet>

package/components/dialog/dialog-mixin.js

@@ -3,7 +3,7 @@ import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
-import { getComposedActiveElement, getFirstFocusableDescendant, getNextFocusable, isFocusable } from '../../helpers/focus.js';
+import { getComposedActiveElement, getFirstFocusableDescendant, getFirstFocusableRelative, getNextFocusable, isFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { html } from 'lit';
@@ -530,15 +530,9 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	}
 
-	_tryApplyFocus(focusable) {
-		if (!isFocusable(focusable)) {
-			focusable = findComposedAncestor(focusable, (node) => (isFocusable(node) || getFirstFocusableDescendant(node) !== null));
-			if (focusable === null) return;
-			if (!isFocusable(focusable)) {
-				focusable = getFirstFocusableDescendant(focusable);
-			}
-		}
-		if (isFocusable(focusable)) focusable.focus();
+	_tryApplyFocus(node) {
+		const focusable = getFirstFocusableRelative(node);
+		if (focusable) focusable.focus();
 	}
 
 	_updateFocusableContentElemPresent() {

package/helpers/README.md

@@ -107,7 +107,10 @@ getOffsetParent(node);
 isComposedAncestor(ancestorNode, node);
 
 // returns true/false whether the element is visible regardless of positioning
-isVisible(node);
+isVisible(node, { checkAncestors: true });
+
+// returns the first visible ancestor of the given node
+getFirstVisibleAncestor(node)
 
 // similar to document.querySelector or element.querySelector,
 // except it queries not just the light DOM but also shadow DOM
@@ -125,7 +128,10 @@ import { ... } from '@brightspace-ui/core/helpers/focus.js';
 getComposedActiveElement()
 
 // gets the first focusable descendant given a node, including those within the shadow DOM
-getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly)
+getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly, checkNodeVisibility = true)
+
+// gets the first focusable relative given a node, checking first itself, its children, and lastly, recursively its parent
+getFirstFocusableRelative(node, { includeHidden, predicate, includeTabbablesOnly, checkNodeVisibility: true })
 
 // gets the focusable elements within the specified element
 getFocusableDescendants(node, { deep: false, disabled: false, hidden: false, predicate: elem => false, tabbablesOnly: true })

package/helpers/dom.js

@@ -206,7 +206,7 @@ export function isComposedAncestor(ancestorNode, node) {
 	}) !== null;
 }
 
-export function isVisible(node) {
+export function isVisible(node, { checkAncestors = true } = {}) {
 
 	/* this helper is different from checking offsetParent because offsetParent
 	returns null for fixed position elements regardless of visibility */
@@ -223,13 +223,24 @@ export function isVisible(node) {
 		if (computedStyle.getPropertyValue('visibility') === 'hidden') return false;
 	}
 
-	const parentNode = getComposedParent(node);
-	if (parentNode) return isVisible(parentNode);
+	if (checkAncestors) {
+		const parentNode = getComposedParent(node);
+		if (parentNode) return isVisible(parentNode);
+	}
 
 	return true;
 
 }
 
+export function getFirstVisibleAncestor(node) {
+	let hiddenAncestor = findComposedAncestor(node, n => !isVisible(n, { checkAncestors: false }));
+	while (hiddenAncestor) {
+		node = getComposedParent(hiddenAncestor);
+		hiddenAncestor = findComposedAncestor(node, n => !isVisible(n, { checkAncestors: false }));
+	}
+	return node;
+}
+
 export function querySelectorComposed(node, selector) {
 
 	if (!node || (node.nodeType !== 1 && node.nodeType !== 9 && node.nodeType !== 11)) {

package/helpers/focus.js

@@ -1,5 +1,5 @@
 import { css, unsafeCSS } from 'lit';
-import { getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
+import { getComposedChildren, getComposedParent, getFirstVisibleAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
 
 const focusableElements = {
 	a: true,
@@ -26,21 +26,34 @@ export function getComposedActiveElement() {
 	return node;
 }
 
-export function getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly) {
-	if (predicate === undefined) predicate = () => true;
-
+export function getFirstFocusableDescendant(node, includeHidden, predicate = () => true, includeTabbablesOnly, nodeVisibilityUnknown = true) {
 	const composedChildren = getComposedChildren(node);
+	if (!composedChildren?.length || (!includeHidden && nodeVisibilityUnknown && !isVisible(node))) return null;
 
 	for (let i = 0; i < composedChildren.length; i++) {
-		if (isFocusable(composedChildren[i], includeHidden, includeTabbablesOnly) && predicate(composedChildren[i])) return composedChildren[i];
+		if (!includeHidden && !isVisible(composedChildren[i], { checkAncestors: false })) continue;
+		if (isFocusable(composedChildren[i], true, includeTabbablesOnly) && predicate(composedChildren[i])) return composedChildren[i];
 
-		const focusable = getFirstFocusableDescendant(composedChildren[i], includeHidden, predicate, includeTabbablesOnly);
+		const focusable = getFirstFocusableDescendant(composedChildren[i], includeHidden, predicate, includeTabbablesOnly, false);
 		if (focusable) return focusable;
 	}
 
 	return null;
 }
 
+export function getFirstFocusableRelative(node, { includeHidden, predicate = () => true, includeTabbablesOnly, nodeVisibilityUnknown = true } = {}) {
+	if (!node) return null;
+
+	if (!includeHidden && nodeVisibilityUnknown) node = getFirstVisibleAncestor(node);
+
+	if (isFocusable(node, true) && predicate(node)) return node;
+
+	const focusableDescendant = getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly, false);
+	if (focusableDescendant !== null) return focusableDescendant;
+
+	return getFirstFocusableRelative(getComposedParent(node), { includeHidden, predicate, includeTabbablesOnly, nodeVisibilityUnknown: false });
+}
+
 export function getFocusableDescendants(node, options) {
 	let focusables = [];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.153.4",
+  "version": "3.154.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",