@material/list - npm Package Compare versions

Comparing version 15.0.0-canary.cfd69490f.0 to 15.0.0-canary.cfec83c74.0

adapter.d.ts

@@ -45,4 +45,4 @@ /**
     /**
-     * Sets the tabindex to the value specified for all button/a element children of
-     * the list item at the index specified.
+     * Sets the tabindex to the value specified for all button/a element children
+     * of the list item at the index specified.
      */
@@ -49,0 +49,0 @@ setTabIndexForListItemChildren(listItemIndex: number, tabIndexValue: string): void;

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-# [15.0.0-canary.cfd69490f.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.cfd69490f.0) (2022-12-16)
+# [15.0.0-canary.cfec83c74.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.cfec83c74.0) (2024-05-20)
 
@@ -12,7 +12,13 @@
 
+* **list:** Allow alt + enter to select index for lists. ([113b1a3](https://github.com/material-components/material-components-web/commit/113b1a38e87337fdd00c7495fda3299df2dbc317))
 * **list:** behavior in case of changing focus from -1 to -1 with forceUpdate: true ([ae278a2](https://github.com/material-components/material-components-web/commit/ae278a2fe94fdb8c5d0716fb34cbe84a691d6146))
+* **list:** Fix list leading/trailing icon theming ([36a4cba](https://github.com/material-components/material-components-web/commit/36a4cba9944392b391b86d41405ee21fb97f4c22))
 * **list:** Fixes how list handles `CTRL-A` keyboard interactions for multi-selection lists when there are disabled list items. ([a911b38](https://github.com/material-components/material-components-web/commit/a911b386b2fded69e3468ef42e7ef25eb33fcd70))
 * **list:** Fixing css for calculating `$mdc-list-subheader-margin` param. ([357f2e5](https://github.com/material-components/material-components-web/commit/357f2e5f15f6374c9d93da135a8b070239ba7464))
 * **list:** Initialize selectedIndex as an array for checkbox list ([0347671](https://github.com/material-components/material-components-web/commit/034767110778aab3e5f0a3240937d8a07c21197e))
+* **list:** only set overflow hidden on mdc-list-item--with-leading-image ([033ae08](https://github.com/material-components/material-components-web/commit/033ae083aad9ad4376e64aa328df936c7adb5a32))
+* **list:** Remove ripple styles for disabled items in deprecated list. ([f52358d](https://github.com/material-components/material-components-web/commit/f52358dd0796308919bb78deffc573d0d933c7de))
 * **list:** rolling back update of list styles since this is causing failures. ([eb103d4](https://github.com/material-components/material-components-web/commit/eb103d4b5d33e0d1535ea28ca0089d2c7002fab6))
+* **select:** <fix inherited ellipsis color for list items in selects> ([c43b343](https://github.com/material-components/material-components-web/commit/c43b3438b4b7eeb777072525f9ae07c97d27c0bb))
+* correct behavior of checkboxes/radios in a list. ([f771b09](https://github.com/material-components/material-components-web/commit/f771b091ce1e5b1b97b3a508f1459e4665008a80))
 
@@ -22,2 +28,3 @@
 
+* **list:** Add support for list-item-selected-container-color and list-item-selected-trailing-icon-color tokens. ([ece3e8d](https://github.com/material-components/material-components-web/commit/ece3e8d2155abd93bc1f9bdcf2dddea9e6eaab56))
 * **list:** Add support for several new tokens ([cec7fb9](https://github.com/material-components/material-components-web/commit/cec7fb9878e548f7f070c5b0f9572cf34e3cce36))
@@ -29,6 +36,6 @@ * **list:** Added boilerplate code for list theming API implementation ([df47894](https://github.com/material-components/material-components-web/commit/df47894dbe5132b66af0df9c53a54d7d1030f397))
 * **list:** Creates a static-styles mixin that holds all the non-themeable list styles. ([58733ef](https://github.com/material-components/material-components-web/commit/58733ef418bf8641a5b3b7fd33e8e2bb1d0e7b97))
-* **list:** Defines a `theme` mixin for list component. Also adjusts the `theme-styles` mixin so that it emits custom properties. ([3cc30f6](https://github.com/material-components/material-components-web/commit/3cc30f6adb6a5496601dd458a8a9ef40ffef7ff6))
 * **list:** Fixes focus behavior on disabled list items when `areDisabledItemsFocusable` is set to `false`. ([2aa8050](https://github.com/material-components/material-components-web/commit/2aa8050b46b7b170ab9ecc2a1fe9686ac40d79cc))
 * **list:** Removes ripple styling on disabled list items. ([eaa0c3a](https://github.com/material-components/material-components-web/commit/eaa0c3a8603d70489b22b68a2b0e6ec4284de3a5))
 * add icon support to menu theming ([40b18d0](https://github.com/material-components/material-components-web/commit/40b18d04314549060c2b4a28ed425cba9976687b))
+* **list:** Defines a `theme` mixin for list component. Also adjusts the `theme-styles` mixin so that it emits custom properties. ([3cc30f6](https://github.com/material-components/material-components-web/commit/3cc30f6adb6a5496601dd458a8a9ef40ffef7ff6))
 * **menu:** working on theming API ([f1e0371](https://github.com/material-components/material-components-web/commit/f1e0371502ee9bfe48f3501a63f70a42bfd79cb8))

component.d.ts

@@ -26,6 +26,8 @@ /**
 import { MDCListIndex } from './types';
-export declare type MDCListFactory = (el: Element, foundation?: MDCListFoundation) => MDCList;
+/** MDC List Factory */
+export declare type MDCListFactory = (el: HTMLElement, foundation?: MDCListFoundation) => MDCList;
+/** MDC List */
 export declare class MDCList extends MDCComponent<MDCListFoundation> {
     set vertical(value: boolean);
-    get listElements(): Element[];
+    get listElements(): HTMLElement[];
     set wrapFocus(value: boolean);
@@ -45,3 +47,3 @@ /**
     set selectedIndex(index: MDCListIndex);
-    static attachTo(root: Element): MDCList;
+    static attachTo(root: HTMLElement): MDCList;
     private handleKeydown;
@@ -92,3 +94,3 @@ private handleClick;
     /**
-     * Used to figure out which list item this event is targetting. Or returns -1
+     * Used to figure out which list item this event is targeting. Or returns -1
      * if there is no list item
@@ -95,0 +97,0 @@ */

component.js

@@ -28,2 +28,3 @@ /**
 import { MDCListFoundation } from './foundation';
+/** MDC List */
 var MDCList = /** @class */ (function (_super) {
@@ -104,4 +105,3 @@ __extends(MDCList, _super);
     MDCList.prototype.initialSyncWithDOM = function () {
-        this.isEvolutionEnabled =
-            evolutionAttribute in this.root.dataset;
+        this.isEvolutionEnabled = evolutionAttribute in this.root.dataset;
         if (this.isEvolutionEnabled) {
@@ -238,6 +238,4 @@ this.classNameMap = evolutionClassNameMap;
             focusItemAtIndex: function (index) {
-                var element = _this.listElements[index];
-                if (element) {
-                    element.focus();
-                }
+                var _a;
+                (_a = _this.listElements[index]) === null || _a === void 0 ? void 0 : _a.focus();
             },
@@ -279,3 +277,4 @@ getAttributeForElementIndex: function (index, attr) {
             notifySelectionChange: function (changedIndices) {
-                _this.emit(strings.SELECTION_CHANGE_EVENT, { changedIndices: changedIndices }, /** shouldBubble */ true);
+                _this.emit(strings.SELECTION_CHANGE_EVENT, { changedIndices: changedIndices }, 
+                /** shouldBubble */ true);
             },
@@ -291,3 +290,3 @@ removeClassForElementIndex: function (index, className) {
                 if (element) {
-                    element.setAttribute(attr, value);
+                    _this.safeSetAttribute(element, attr, value);
                 }
@@ -307,3 +306,3 @@ },
                 Array.prototype.forEach.call(element.querySelectorAll(selector), function (el) {
-                    el.setAttribute('tabindex', tabIndexValue);
+                    el.tabIndex = Number(tabIndexValue);
                 });
@@ -343,3 +342,3 @@ },
     /**
-     * Used to figure out which list item this event is targetting. Or returns -1
+     * Used to figure out which list item this event is targeting. Or returns -1
      * if there is no list item
@@ -360,4 +359,4 @@ */
      */
-    MDCList.prototype.handleFocusInEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
+    MDCList.prototype.handleFocusInEvent = function (event) {
+        var index = this.getListItemIndex(event.target);
         this.foundation.handleFocusIn(index);
@@ -369,4 +368,4 @@ };
      */
-    MDCList.prototype.handleFocusOutEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
+    MDCList.prototype.handleFocusOutEvent = function (event) {
+        var index = this.getListItemIndex(event.target);
         this.foundation.handleFocusOut(index);
@@ -378,6 +377,6 @@ };
      */
-    MDCList.prototype.handleKeydownEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
-        var target = evt.target;
-        this.foundation.handleKeydown(evt, target.classList.contains(this.classNameMap[cssClasses.LIST_ITEM_CLASS]), index);
+    MDCList.prototype.handleKeydownEvent = function (event) {
+        var index = this.getListItemIndex(event.target);
+        var target = event.target;
+        this.foundation.handleKeydown(event, target.classList.contains(this.classNameMap[cssClasses.LIST_ITEM_CLASS]), index);
     };
@@ -388,9 +387,6 @@ /**
      */
-    MDCList.prototype.handleClickEvent = function (evt) {
-        var index = this.getListItemIndex(evt.target);
-        var target = evt.target;
-        // Toggle the checkbox only if it's not the target of the event, or the
-        // checkbox will have 2 change events.
-        var toggleCheckbox = !matches(target, strings.CHECKBOX_RADIO_SELECTOR);
-        this.foundation.handleClick(index, toggleCheckbox, evt);
+    MDCList.prototype.handleClickEvent = function (event) {
+        var index = this.getListItemIndex(event.target);
+        var target = event.target;
+        this.foundation.handleClick(index, matches(target, strings.CHECKBOX_RADIO_SELECTOR), event);
     };
@@ -397,0 +393,0 @@ return MDCList;

events.d.ts

@@ -27,4 +27,4 @@ /**
  *
- * @param evt keyboard event to be prevented.
+ * @param event keyboard event to be prevented.
  */
-export declare const preventDefaultEvent: (evt: KeyboardEvent) => void;
+export declare const preventDefaultEvent: (event: KeyboardEvent) => void;

events.js

@@ -28,6 +28,6 @@ /**
  *
- * @param evt keyboard event to be prevented.
+ * @param event keyboard event to be prevented.
  */
-export var preventDefaultEvent = function (evt) {
-    var target = evt.target;
+export var preventDefaultEvent = function (event) {
+    var target = event.target;
     if (!target) {
@@ -38,5 +38,5 @@ return;
     if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {
-        evt.preventDefault();
+        event.preventDefault();
     }
 };
 //# sourceMappingURL=events.js.map

foundation.d.ts

@@ -44,2 +44,3 @@ /**
 }
+/** MDC List Foundation */
 export declare class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
@@ -56,2 +57,3 @@ static get strings(): {
         ARIA_ORIENTATION_HORIZONTAL: string;
+        /** MDC List Foundation */
         ARIA_ROLE_CHECKBOX_SELECTOR: string;
@@ -193,3 +195,3 @@ ARIA_SELECTED: string;
     /**
-     * Helper method for ensuring that the list of selected indicies remains
+     * Helper method for ensuring that the list of selected indices remains
      * accurate when calling setCheckboxAtIndex with omitDisabledItems set to
@@ -196,0 +198,0 @@ * true.

foundation.js

@@ -42,2 +42,3 @@ /**
 }
+/** MDC List Foundation */
 var MDCListFoundation = /** @class */ (function (_super) {
@@ -387,3 +388,4 @@ __extends(MDCListFoundation, _super);
         }
-        else if ((isEnter || isSpace) && eventHasModifiers([])) {
+        else if ((isEnter || isSpace) &&
+            (eventHasModifiers([]) || eventHasModifiers(['Alt']))) {
             if (isRootListItem) {
@@ -664,3 +666,3 @@ // Return early if enter key is pressed on anchor element which triggers
     /**
-     * Helper method for ensuring that the list of selected indicies remains
+     * Helper method for ensuring that the list of selected indices remains
      * accurate when calling setCheckboxAtIndex with omitDisabledItems set to
@@ -667,0 +669,0 @@ * true.

package.json

 {
   "name": "@material/list",
   "description": "The Material Components for the web list component",
-  "version": "15.0.0-canary.cfd69490f.0",
+  "version": "15.0.0-canary.cfec83c74.0",
   "license": "MIT",
@@ -20,15 +20,15 @@ "main": "dist/mdc.list.js",
   "dependencies": {
-    "@material/base": "15.0.0-canary.cfd69490f.0",
-    "@material/density": "15.0.0-canary.cfd69490f.0",
-    "@material/dom": "15.0.0-canary.cfd69490f.0",
-    "@material/feature-targeting": "15.0.0-canary.cfd69490f.0",
-    "@material/ripple": "15.0.0-canary.cfd69490f.0",
-    "@material/rtl": "15.0.0-canary.cfd69490f.0",
-    "@material/shape": "15.0.0-canary.cfd69490f.0",
-    "@material/theme": "15.0.0-canary.cfd69490f.0",
-    "@material/tokens": "15.0.0-canary.cfd69490f.0",
-    "@material/typography": "15.0.0-canary.cfd69490f.0",
+    "@material/base": "15.0.0-canary.cfec83c74.0",
+    "@material/density": "15.0.0-canary.cfec83c74.0",
+    "@material/dom": "15.0.0-canary.cfec83c74.0",
+    "@material/feature-targeting": "15.0.0-canary.cfec83c74.0",
+    "@material/ripple": "15.0.0-canary.cfec83c74.0",
+    "@material/rtl": "15.0.0-canary.cfec83c74.0",
+    "@material/shape": "15.0.0-canary.cfec83c74.0",
+    "@material/theme": "15.0.0-canary.cfec83c74.0",
+    "@material/tokens": "15.0.0-canary.cfec83c74.0",
+    "@material/typography": "15.0.0-canary.cfec83c74.0",
     "tslib": "^2.1.0"
   },
-  "gitHead": "a7b9218e1ea7572b08b54629159e6f3a98970096"
+  "gitHead": "0ec8b129344ebbe45f00b6ad892b682b054ea892"
 }

README.md

@@ -676,6 +676,6 @@ <!--docs:
 `setUseActivatedClass(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-deprecated-list-item--activated` class.
-`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all button and anchor elements when a list item receives focus.
-`handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all button and anchor elements when a list item loses focus.
-`handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.
-`handleClick(evt: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.
+`handleFocusIn(event: Event) => void` | Handles the changing of `tabindex` to `0` for all button and anchor elements when a list item receives focus.
+`handleFocusOut(event: Event) => void` | Handles the changing of `tabindex` to `-1` for all button and anchor elements when a list item loses focus.
+`handleKeydown(event: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.
+`handleClick(event: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.
 `focusNextElement(index: number) => number` | Handles focusing the next element using the current `index`. Returns focused element index.
@@ -682,0 +682,0 @@ `focusPrevElement(index: number) => number` | Handles focusing the previous element using the current `index`. Returns focused element index.

typeahead.d.ts

@@ -51,3 +51,3 @@ /**
  * @return Map that maps the first character of the primary text to the full
- *     list text and it's index
+ *     list text and its index
  */
@@ -109,4 +109,4 @@ export declare function initSortedIndex(listItemCount: number, getPrimaryTextByItemIndex: (index: number) => string): Map<string, MDCListTextAndIndex[]>;
  * Given a keydown event, it calculates whether or not to automatically focus a
- * list item depending on what was typed mimicing the typeahead functionality of
- * a standard <select> element that is open.
+ * list item depending on what was typed mimicking the typeahead functionality
+ * of a standard <select> element that is open.
  *
@@ -123,4 +123,4 @@ * @param opts Options and accessors
  *
- * @returns index of the item matched by the keydown. -1 if not matched.
+ * @return index of the item matched by the keydown. -1 if not matched.
  */
 export declare function handleKeydown(opts: HandleKeydownOpts, state: TypeaheadState): number;

typeahead.js

@@ -52,3 +52,3 @@ /**
  * @return Map that maps the first character of the primary text to the full
- *     list text and it's index
+ *     list text and its index
  */
@@ -222,4 +222,4 @@ export function initSortedIndex(listItemCount, getPrimaryTextByItemIndex) {
  * Given a keydown event, it calculates whether or not to automatically focus a
- * list item depending on what was typed mimicing the typeahead functionality of
- * a standard <select> element that is open.
+ * list item depending on what was typed mimicking the typeahead functionality
+ * of a standard <select> element that is open.
  *
@@ -236,3 +236,3 @@ * @param opts Options and accessors
  *
- * @returns index of the item matched by the keydown. -1 if not matched.
+ * @return index of the item matched by the keydown. -1 if not matched.
  */
@@ -239,0 +239,0 @@ export function handleKeydown(opts, state) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1743100

increased by22.55%

Lines of code

12474

increased by34.22%

Dependency changes

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• + Added@material/[e-mail]83c74.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• - Removed@material/[e-mail]69490f.0(transitive)

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0

• Updated@material/[e-mail]83c74.0