@brightspace-ui/core 1.210.0 → 1.213.0

package/custom-elements.json

@@ -6208,8 +6208,8 @@
       ]
     },
     {
-      "name": "d2l-list-demo-drag-and-drop-usage",
-      "path": "./components/list/demo/list-demo-drag-and-drop-usage.js",
+      "name": "d2l-demo-list-drag-and-drop-position",
+      "path": "./components/list/demo/list-drag-and-drop-position.js",
       "attributes": [
         {
           "name": "grid",
@@ -6253,6 +6253,25 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-list-drag-and-drop",
+      "path": "./components/list/demo/list-drag-and-drop.js",
+      "attributes": [
+        {
+          "name": "items",
+          "type": "array",
+          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]}]"
+        }
+      ],
+      "properties": [
+        {
+          "name": "items",
+          "attribute": "items",
+          "type": "array",
+          "default": "[{\"key\":\"1\",\"primaryText\":\"Introductory Earth Sciences\",\"supportingText\":\"This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"1-1\",\"primaryText\":\"Glaciation\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-2\",\"primaryText\":\"Weathering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"1-3\",\"primaryText\":\"Volcanism\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"2\",\"primaryText\":\"Flow and Transport Through Fractured Rocks\",\"supportingText\":\"Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"2-1\",\"primaryText\":\"Contaminant Transport\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"2-2\",\"primaryText\":\"Modelling Flow in Fractured Media\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]},{\"key\":\"3\",\"primaryText\":\"Applied Wetland Science\",\"supportingText\":\"Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.\",\"imgSrc\":\"https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg\",\"items\":[{\"key\":\"3-1\",\"primaryText\":\"Carbon & Nitrogen Cycling\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]},{\"key\":\"3-2\",\"primaryText\":\"Wetland Engineering\",\"supportingText\":\"Supporting Info\",\"imgSrc\":\"\",\"items\":[]}]}]"
+        }
+      ]
+    },
     {
       "name": "d2l-demo-list-item-custom",
       "path": "./components/list/demo/list-item-custom.js",
@@ -6269,11 +6288,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "draggable",
-          "description": "**Drag & drop:** Whether the item is draggable",
-          "type": "boolean"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -6284,6 +6298,18 @@
           "description": "**Drag & drop:** Text to drag and drop",
           "type": "string"
         },
+        {
+          "name": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drop-nested",
+          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled",
           "description": "**Selection:** Disables the input",
@@ -6338,12 +6364,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "draggable",
-          "attribute": "draggable",
-          "description": "**Drag & drop:** Whether the item is draggable",
-          "type": "boolean"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -6356,6 +6376,20 @@
           "description": "**Drag & drop:** Text to drag and drop",
           "type": "string"
         },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dropNested",
+          "attribute": "drop-nested",
+          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -6415,6 +6449,9 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
+        {
+          "name": "d2l-list-items-move"
+        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6460,11 +6497,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "draggable",
-          "description": "**Drag & drop:** Whether the item is draggable",
-          "type": "boolean"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -6475,6 +6507,18 @@
           "description": "**Drag & drop:** Text to drag and drop",
           "type": "string"
         },
+        {
+          "name": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drop-nested",
+          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled",
           "description": "**Selection:** Disables the input",
@@ -6528,12 +6572,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "draggable",
-          "attribute": "draggable",
-          "description": "**Drag & drop:** Whether the item is draggable",
-          "type": "boolean"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -6546,6 +6584,20 @@
           "description": "**Drag & drop:** Text to drag and drop",
           "type": "string"
         },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dropNested",
+          "attribute": "drop-nested",
+          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -6608,6 +6660,9 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
+        {
+          "name": "d2l-list-items-move"
+        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6777,11 +6832,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "draggable",
-          "description": "**Drag & drop:** Whether the item is draggable",
-          "type": "boolean"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -6792,6 +6842,18 @@
           "description": "**Drag & drop:** Text to drag and drop",
           "type": "string"
         },
+        {
+          "name": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drop-nested",
+          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled",
           "description": "**Selection:** Disables the input",
@@ -6857,12 +6919,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "draggable",
-          "attribute": "draggable",
-          "description": "**Drag & drop:** Whether the item is draggable",
-          "type": "boolean"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -6875,6 +6931,20 @@
           "description": "**Drag & drop:** Text to drag and drop",
           "type": "string"
         },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dropNested",
+          "attribute": "drop-nested",
+          "description": "**Drag & drop:** Whether the items can be dropped as nested children",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -6937,6 +7007,9 @@
           "name": "d2l-list-item-position-change",
           "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
         },
+        {
+          "name": "d2l-list-items-move"
+        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -6968,6 +7041,12 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "drag-multiple",
+          "description": "Whether to the user can drag multiple items",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "extend-separators",
           "description": "Whether to extend the separators beyond the content's edge",
@@ -6995,6 +7074,13 @@
           "type": "'all'|'between'|'none'",
           "default": "\"\\\"all\\\"\""
         },
+        {
+          "name": "dragMultiple",
+          "attribute": "drag-multiple",
+          "description": "Whether to the user can drag multiple items",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "extendSeparators",
           "attribute": "extend-separators",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.210.0",
+  "version": "1.213.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -14,7 +14,7 @@
     "build": "npm run build:clean && npm run build:icons && npm run build:sass",
     "lint": "npm run lint:eslint && npm run lint:style && npm run lint:lit",
     "lint:eslint": "eslint . --ext .js,.html",
-    "lint:lit": "lit-analyzer \"{components,directives,helpers,mixins,templates,test,tools}/**/*.js\" --strict",
+    "lint:lit": "lit-analyzer \"{components,controllers,directives,helpers,mixins,templates,test,tools}/**/*.js\" --strict",
     "lint:style": "stylelint \"**/*.{js,html}\"",
     "start": "web-dev-server --node-resolve --watch --open",
     "test": "npm run lint && npm run test:headless && npm run test:axe",
@@ -26,6 +26,7 @@
   "files": [
     "custom-elements.json",
     "/components",
+    "/controllers",
     "/directives",
     "/generated",
     "/helpers",
@@ -57,9 +58,10 @@
     "eslint-plugin-lit": "^1",
     "eslint-plugin-sort-class-members": "^1",
     "lit-analyzer": "^1",
-    "node-sass": "^6",
+    "node-sass": "^7",
     "sinon": "^12",
-    "stylelint": "^14"
+    "stylelint": "^14",
+    "web-test-runner-performance": "^0.1.4"
   },
   "dependencies": {
     "@brightspace-ui/intl": "^3",

package/tools/perf-test-helper.js

@@ -1,45 +0,0 @@
-import chai from '@open-wc/testing/import-wrappers/chai.js';
-import { fixture } from '@open-wc/testing';
-
-const numComponents = 1000;
-
-export async function runTest(element) {
-	return new Promise((resolve) => {
-
-		let total = 0;
-		let count = 0;
-		window.d2lPerfTestInProgress = true;
-		document.body.addEventListener('d2l-component-perf', (e) => {
-			count++;
-			total += e.detail.value;
-			if (count === numComponents) {
-				const avg = Math.round(total / count);
-				delete window.d2lPerfTestInProgress;
-				resolve(avg);
-			}
-		});
-
-		for (let i = 0; i < numComponents; i++) {
-			fixture(element);
-		}
-
-	});
-}
-
-export const chaiPerf = (_chai, utils) => {
-
-	utils.addMethod(_chai.Assertion.prototype, 'performant', function perfTest(baseline) {
-		// eslint-disable-next-line no-invalid-this
-		const fixture = this._obj;
-		const result = runTest(fixture).then(results => {
-			new _chai.Assertion(results).to.be.below(baseline);
-		});
-		// eslint-disable-next-line no-invalid-this
-		this.then = result.then.bind(result);
-		// eslint-disable-next-line no-invalid-this
-		return this;
-	});
-
-};
-
-chai.use(chaiPerf);