@brightspace-ui/core 3.285.0 → 3.286.1

package/components/page/page.js

@@ -7,11 +7,12 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { ProviderMixin } from '../../mixins/provider/provider-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const VALID_STATE_STORAGE_KEY = /^[a-z0-9_-]+$/i;
 export const panelStateStorageKey = key => `d2l-page-panel-state-${key}`;
 
 const DRAWER_MIN_HEIGHT = 200; // TO DO: Confirm
-const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
-const PANEL_MIN_WIDTH = 320;
+export const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
+export const PANEL_MIN_WIDTH = 320;
 
 export const SIDE_NAV_DEFAULT_WIDTH = 334;
 export const supportingDefaultWidth = contentWidth => Math.floor(contentWidth / 3);
@@ -348,6 +349,16 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		});
 	}
 
+	get stateStorageKey() { return this.#stateStorageKey; }
+	set stateStorageKey(value) {
+		if (value && !VALID_STATE_STORAGE_KEY.test(value)) {
+			this.#stateStorageKey = undefined;
+			throw new Error(`d2l-page: invalid state-storage-key "${value}". Keys may only contain alphanumeric characters, dashes, and underscores.`);
+		}
+
+		this.#stateStorageKey = value;
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		window.addEventListener('resize', this.#handleWindowResize);
@@ -399,6 +410,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	}
 
 	#resizeObserver;
+	#stateStorageKey;
 
 	#handleWindowResize = () => {
 		this._panelState.updateMaxSize('supporting-mobile', this.#getMaxDrawerHeight());

package/custom-elements.json

@@ -13587,16 +13587,16 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav .divider[collapsed] {\\n\\t\\t\\tmargin-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.supporting .divider[collapsed] {\\n\\t\\t\\tmargin-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed,\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.divider.animate {\\n\\t\\t\\t\\ttransition: margin 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed,\\n\\t\\t\\t.supporting-panel.animate.collapsed {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+        },
         {
           "name": "stateStorageKey",
           "attribute": "state-storage-key",
           "description": "Key used to optionally store page state across reloads (using localStorage). Different pages should use different keys.\nCurrently, this includes panel state info.",
           "type": "string"
         },
-        {
-          "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav .divider[collapsed] {\\n\\t\\t\\tmargin-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.supporting .divider[collapsed] {\\n\\t\\t\\tmargin-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed,\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.divider.animate {\\n\\t\\t\\t\\ttransition: margin 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed,\\n\\t\\t\\t.supporting-panel.animate.collapsed {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
-        },
         {
           "name": "widthType",
           "attribute": "width-type",

package/helpers/README.md

@@ -89,6 +89,10 @@ findComposedAncestor(node, predicate);
 // includes optional predicate for filtering child elements
 getComposedChildren(element, predicate = () => true);
 
+//gets the composed next ancestor sibling by walking the composed ancestors
+// includes optional predicate for filtering elements
+getComposedNextAncestorElementSibling(node, { predicate });
+
 // gets the composed next element sibling considing how children are distributed into slots
 // includes optional predicate for filtering elements
 getComposedNextElementSibling(node, { predicate });
@@ -96,6 +100,10 @@ getComposedNextElementSibling(node, { predicate });
 // gets the composed parent (including shadow host & insertion points)
 getComposedParent(node);
 
+//gets the composed previous ancestor sibling by walking the composed ancestors
+// includes optional predicate for filtering elements
+getComposedPreviousAncestorElementSibling(node, { predicate });
+
 // gets the composed previous element sibling considing how children are distributed into slots
 // includes optional predicate for filtering elements
 getComposedPreviousElementSibling(node, { predicate });
@@ -103,14 +111,6 @@ getComposedPreviousElementSibling(node, { predicate });
 // returns the first visible ancestor of the given node
 getFirstVisibleAncestor(node)
 
-// returns the next composed sibling at least one dom level up
-// includes optional predicate for filtering elements
-getNextAncestorSibling(node, predicate = () => true);
-
-// returns the previous composed sibling at least one dom level up
-// includes optional predicate for filtering elements
-getPreviousAncestorSibling(node, predicate = () => true);
-
 // browser consistent implementation of HTMLElement.offsetParent
 getOffsetParent(node);
 

package/helpers/dom.js

@@ -1,3 +1,5 @@
+import { getFlag } from './flags.js';
+
 // needed for legacy-Edge, after it's removed use CSS.escape directly
 export function cssEscape(val) {
 	if (window.CSS && window.CSS.escape) {
@@ -148,6 +150,22 @@ function getComposedElementSibling(node, { direction = 'next', predicate } = {})
 	return null;
 }
 
+export function getComposedNextAncestorElementSibling(node, { predicate } = {}) {
+
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
+
+	let parentNode = getComposedParent(node);
+
+	while (parentNode) {
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const nextParentSibling = focusableFixFlag ? getComposedNextElementSibling(parentNode, { predicate }) : parentNode.nextElementSibling;
+		if (nextParentSibling) return nextParentSibling;
+		parentNode = getComposedParent(parentNode);
+	}
+
+	return null;
+}
+
 export function getComposedNextElementSibling(node, { predicate } = {}) {
 	return getComposedElementSibling(node, { direction: 'next', predicate });
 }
@@ -175,32 +193,24 @@ export function getComposedParent(node) {
 
 }
 
-export function getComposedPreviousElementSibling(node, { predicate } = {}) {
-	return getComposedElementSibling(node, { direction: 'previous', predicate });
-}
+export function getComposedPreviousAncestorElementSibling(node, { predicate } = {}) {
+
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
 
-export function getNextAncestorSibling(node, predicate = () => true) {
 	let parentNode = getComposedParent(node);
 
 	while (parentNode) {
-		const nextParentSibling = parentNode.nextElementSibling;
-		if (nextParentSibling && predicate(nextParentSibling)) return nextParentSibling;
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const previousParentSibling = focusableFixFlag ? getComposedPreviousElementSibling(parentNode, { predicate }) : parentNode.previousElementSibling;
+		if (previousParentSibling) return previousParentSibling;
 		parentNode = getComposedParent(parentNode);
 	}
 
 	return null;
 }
 
-export function getPreviousAncestorSibling(node, predicate = () => true) {
-	let parentNode = getComposedParent(node);
-
-	while (parentNode) {
-		const previousParentSibling = parentNode.previousElementSibling;
-		if (previousParentSibling && predicate(previousParentSibling)) return previousParentSibling;
-		parentNode = getComposedParent(parentNode);
-	}
-
-	return null;
+export function getComposedPreviousElementSibling(node, { predicate } = {}) {
+	return getComposedElementSibling(node, { direction: 'previous', predicate });
 }
 
 export function getOffsetParent(node) {

package/helpers/focus.js

@@ -1,5 +1,15 @@
 import { css, unsafeCSS } from 'lit';
-import { getComposedChildren, getComposedParent, getFirstVisibleAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
+import {
+	getComposedChildren,
+	getComposedNextAncestorElementSibling,
+	getComposedNextElementSibling,
+	getComposedParent,
+	getComposedPreviousAncestorElementSibling,
+	getComposedPreviousElementSibling,
+	getFirstVisibleAncestor,
+	isVisible
+} from './dom.js';
+import { getFlag } from './flags.js';
 
 const focusableElements = {
 	a: true,
@@ -123,6 +133,9 @@ export function getLastFocusableDescendant(node, includeHidden) {
 }
 
 export function getPreviousFocusable(node, includeHidden) {
+
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
+
 	if (!node) return null;
 
 	if (includeHidden === undefined) includeHidden = false;
@@ -135,14 +148,15 @@ export function getPreviousFocusable(node, includeHidden) {
 			if (focusable) return focusable;
 		}
 
-		const previousSibling = node.previousElementSibling;
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const previousSibling = focusableFixFlag ? getComposedPreviousElementSibling(node) : node.previousElementSibling;
 		if (previousSibling) {
 			const siblingFocusable = _getPreviousFocusable(previousSibling, false, false);
 			if (siblingFocusable) return siblingFocusable;
 			return null;
 		}
 
-		const previousAncestorSibling = getPreviousAncestorSibling(node);
+		const previousAncestorSibling = getComposedPreviousAncestorElementSibling(node);
 		if (previousAncestorSibling) {
 			const parentSibingFocusable = _getPreviousFocusable(previousAncestorSibling, false, false);
 			if (parentSibingFocusable) return parentSibingFocusable;
@@ -157,6 +171,8 @@ export function getPreviousFocusable(node, includeHidden) {
 
 export function getNextFocusable(node, includeHidden, ignore, ignoreChildren) {
 
+	const focusableFixFlag = getFlag('GAUD-10260-get-focusable-fix', true);
+
 	if (!node) return null;
 
 	if (includeHidden === undefined) includeHidden = false;
@@ -171,14 +187,15 @@ export function getNextFocusable(node, includeHidden, ignore, ignoreChildren) {
 			if (focusable) return focusable;
 		}
 
-		const nextSibling = node.nextElementSibling;
+		// Clean-up this next line when cleaning up GAUD-10260-get-focusable-fix
+		const nextSibling = focusableFixFlag ? getComposedNextElementSibling(node) : node.nextElementSibling;
 		if (nextSibling) {
 			const siblingFocusable = _getNextFocusable(nextSibling, false, false);
 			if (siblingFocusable) return siblingFocusable;
 			return null;
 		}
 
-		const nextParentSibling = getNextAncestorSibling(node);
+		const nextParentSibling = getComposedNextAncestorElementSibling(node);
 		if (nextParentSibling) {
 			const parentSibingFocusable = _getNextFocusable(nextParentSibling, false, false);
 			if (parentSibingFocusable) return parentSibingFocusable;

package/package.json

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