@brightspace-ui/core 3.176.4 → 3.176.6

package/components/dropdown/demo/dropdown-menu-demo-view.js

@@ -0,0 +1,37 @@
+import '../../colors/colors.js';
+import '../../button/button-subtle.js';
+import { css, html, LitElement } from 'lit';
+import { HierarchicalViewMixin } from '../../hierarchical-view/hierarchical-view-mixin.js';
+import { LocalizeCoreElement } from '../../../helpers/localize-core-element.js';
+
+class DemoView extends LocalizeCoreElement(HierarchicalViewMixin(LitElement)) {
+
+	static get styles() {
+		return [ super.styles,
+			css`
+				:host {
+					box-sizing: border-box;
+					color: var(--d2l-color-ferrite);
+					cursor: default;
+				}
+				.d2l-hierarchical-view-content {
+					padding: 12px;
+				}
+			`
+		];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-hierarchical-view-content">
+				<div>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters.</div>
+				<div>
+					<d2l-button-subtle text="${this.localize('components.pager-load-more.action')}"></d2l-button-subtle>
+				</div>
+			</div>
+		`;
+	}
+
+}
+
+customElements.define('d2l-dropdown-menu-demo-view', DemoView);

package/components/dropdown/demo/dropdown-menu.html

@@ -13,6 +13,7 @@
 		import '../../menu/menu-item-radio.js';
 		import '../dropdown.js';
 		import '../dropdown-menu.js';
+		import './dropdown-menu-demo-view.js';
 	</script>
 </head>
 
@@ -201,6 +202,24 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Custom View</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-dropdown>
+					<button class="d2l-dropdown-opener">Open it!</button>
+					<d2l-dropdown-menu>
+						<d2l-menu label="Astronomy">
+							<d2l-menu-item text="Introduction"></d2l-menu-item>
+							<d2l-menu-item text="Searching for the Heavens">
+								<d2l-dropdown-menu-demo-view></d2l-dropdown-menu-demo-view>
+							</d2l-menu-item>
+							<d2l-menu-item text="The Solar System"></d2l-menu-item>
+						</d2l-menu>
+					</d2l-dropdown-menu>
+				</d2l-dropdown>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 </body>

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -1,12 +1,15 @@
 import { findComposedAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { css } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const __nativeFocus = document.createElement('div').focus;
 const escapeKeyCode = 27;
 
+const useResizeFix = getFlag('GAUD-8969-hierarchical-view-resize', true);
+
 export const HierarchicalViewMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -523,7 +526,13 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 		}
 
 		if (e.detail.isSource && this.__getParentViewFromEvent(e) === this) {
-			e.detail.sourceView.__dispatchViewResize();
+			if (useResizeFix) {
+				requestAnimationFrame(() => {
+					e.detail.sourceView.__dispatchViewResize();
+				});
+			} else {
+				e.detail.sourceView.__dispatchViewResize();
+			}
 		}
 
 	}

package/custom-elements.json

@@ -2679,6 +2679,10 @@
         }
       ]
     },
+    {
+      "name": "d2l-dropdown-menu-demo-view",
+      "path": "./components/dropdown/demo/dropdown-menu-demo-view.js"
+    },
     {
       "name": "d2l-dropdown-button-subtle",
       "path": "./components/dropdown/dropdown-button-subtle.js",
@@ -14924,7 +14928,7 @@
         {
           "name": "has-form",
           "description": "Whether to render an encompassing form over all panels",
-          "type": " Boolean ",
+          "type": "boolean",
           "default": "false"
         }
       ],
@@ -14976,7 +14980,7 @@
           "name": "hasForm",
           "attribute": "has-form",
           "description": "Whether to render an encompassing form over all panels",
-          "type": " Boolean ",
+          "type": "boolean",
           "default": "false"
         }
       ],

package/package.json

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

package/templates/primary-secondary/README.md

@@ -53,6 +53,7 @@ If either of the panels contain an `iframe`, resizing may not work properly. Thi
 | Property | Type | Description |
 |---|---|---|
 | `background-shading` | String, default: `'none'` | Controls whether the primary and secondary panels have shaded backgrounds. Can be one of `'primary'`, `'secondary'`, `'none'`. |
+| `has-form` | Boolean, default: `false` | Whether to render an encompassing form over all panels |
 | `primary-overflow` | String, default: `'default'` | Controls how the primary panel's contents overflow. Can be one of `'default'`, `'hidden'`. |
 | `resizable` | Boolean, default: `false` | Whether the panels are user resizable. This only applies to desktop users, mobile users will always be able to resize. |
 | `secondary-first` | Boolean, default: `false` | When set to true, the secondary panel will be displayed on the left (or the right in RTL) in the desktop view. This attribute has no effect on the mobile view. |

package/templates/primary-secondary/primary-secondary.js

@@ -594,7 +594,7 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 			widthType: { type: String, attribute: 'width-type', reflect: true },
 			/**
 			 * Whether to render an encompassing form over all panels
-			 * @type { Boolean }
+			 * @type {boolean}
 			 */
 			hasForm: { type: Boolean, attribute: 'has-form' },
 			_formErrorSummary: { type: Array },