@react-md/list - npm Package Compare versions

Comparing version 2.0.0-alpha.0 to 2.0.0-alpha.1

dist/scssVariables.d.ts

@@ -21,2 +21,5 @@ declare const _default: {
     "rmd-list-item-dense-three-line-height": string;
+    "rmd-list-item-secondary-text-line-height": number;
+    "rmd-list-item-secondary-text-three-line-max-height": string;
+    "rmd-list-item-dense-secondary-text-three-line-max-height": string;
     "rmd-list-item-text-keyline": string;
@@ -23,0 +26,0 @@ "rmd-list-item-media-size": string;

dist/scssVariables.js

@@ -24,2 +24,5 @@ "use strict";
     "rmd-list-item-dense-three-line-height": "5rem",
+    "rmd-list-item-secondary-text-line-height": 1.42857,
+    "rmd-list-item-secondary-text-three-line-max-height": "3rem",
+    "rmd-list-item-dense-secondary-text-three-line-max-height": "2.25rem",
     "rmd-list-item-text-keyline": "4.5rem",
@@ -41,3 +44,3 @@ "rmd-list-item-media-size": "3.5rem",
         "item-horizontal-padding": "1rem",
-        "item-secondary-three-line-height": "3.5rem",
+        "item-secondary-three-line-height": "3rem",
         "dense-font-size": "0.8125rem",
@@ -51,3 +54,3 @@ "dense-vertical-padding": "0.25rem",
         "dense-item-three-line-height": "5rem",
-        "dense-item-secondary-three-line-height": "3rem",
+        "dense-item-secondary-three-line-height": "2.25rem",
         "media-size": "3.5rem",
@@ -54,0 +57,0 @@ "media-spacing": "1rem",

es/List.js

@@ -23,2 +23,4 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
+var block = bem("rmd-list");
 /**
@@ -29,6 +31,3 @@ * Creates an unordered or ordered list.
     var _a = providedProps, dense = _a.dense, horizontal = _a.horizontal, ordered = _a.ordered, forwardedRef = _a.forwardedRef, className = _a.className, children = _a.children, props = __rest(_a, ["dense", "horizontal", "ordered", "forwardedRef", "className", "children"]);
-    return createElement(ordered ? "ol" : "ul", __assign({}, props, { ref: forwardedRef, className: cn("rmd-list", {
-            "rmd-list--dense": dense,
-            "rmd-list--horizontal": horizontal,
-        }, className) }), children);
+    return createElement(ordered ? "ol" : "ul", __assign({}, props, { ref: forwardedRef, className: cn(block({ dense: dense, horizontal: horizontal }), className) }), children);
 };
@@ -35,0 +34,0 @@ var defaultProps = {

es/ListItem.js

@@ -27,4 +27,7 @@ var __assign = (this && this.__assign) || function () {
 var ListItem = function (providedProps) {
-    var _a = providedProps, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, forwardedRef = _a.forwardedRef, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, height = _a.height, enableKeyboardClick = _a.enableKeyboardClick, disableSpacebarClick = _a.disableSpacebarClick, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, disablePressedFallback = _a.disablePressedFallback, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, tabIndex = _a.tabIndex, role = _a.role, props = __rest(_a, ["textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "forwardedRef", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "height", "enableKeyboardClick", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "tabIndex", "role"]);
-    var _b = useInteractionStates(__assign({}, props, { disableRipple: disableRipple,
+    var _a = providedProps, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, forwardedRef = _a.forwardedRef, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, height = _a.height, disableSpacebarClick = _a.disableSpacebarClick, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, disablePressedFallback = _a.disablePressedFallback, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, tabIndex = _a.tabIndex, role = _a.role, props = __rest(_a, ["textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "forwardedRef", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "height", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "tabIndex", "role"]);
+    var _b = useInteractionStates({
+        handlers: props,
+        disabled: props.disabled,
+        disableRipple: disableRipple,
         disableProgrammaticRipple: disableProgrammaticRipple,
@@ -35,5 +38,5 @@ rippleTimeout: rippleTimeout,
         rippleContainerClassName: rippleContainerClassName,
-        enableKeyboardClick: enableKeyboardClick,
         disableSpacebarClick: disableSpacebarClick,
-        disablePressedFallback: disablePressedFallback })), ripples = _b.ripples, className = _b.className, handlers = _b.handlers;
+        disablePressedFallback: disablePressedFallback,
+    }), ripples = _b.ripples, className = _b.className, handlers = _b.handlers;
     return (React.createElement(SimpleListItem, __assign({}, props, handlers, { tabIndex: tabIndex, role: role, className: className, clickable: true, height: getListItemHeight(providedProps), ref: forwardedRef }),
@@ -47,3 +50,2 @@ React.createElement(ListItemChildren, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftIcon: leftIcon, leftAvatar: leftAvatar, leftMedia: leftMedia, leftMediaLarge: leftMediaLarge, leftPosition: leftPosition, rightIcon: rightIcon, rightAvatar: rightAvatar, rightMedia: rightMedia, rightMediaLarge: rightMediaLarge, rightPosition: rightPosition, forceIconWrap: forceIconWrap }, children),
     tabIndex: 0,
-    enableKeyboardClick: true,
     disableSpacebarClick: false,
@@ -65,3 +67,2 @@ disablePressedFallback: false,
         ListItem.propTypes = {
-            id: PropTypes.string.isRequired,
             role: PropTypes.string,
@@ -68,0 +69,0 @@ tabIndex: PropTypes.number,

es/ListItemChildren.js

@@ -1,7 +0,6 @@
-import React from "react";
-import { FixColorPollution } from "@react-md/states";
+import React, { Fragment } from "react";
 import ListItemIcon from "./ListItemIcon";
 import ListItemText from "./ListItemText";
 var ListItemChildren = function (props) {
-    var _a = props, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, propChildren = _a.children, preventColorPollution = _a.preventColorPollution;
+    var _a = props, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, propChildren = _a.children;
     var children = propChildren;
@@ -13,3 +12,3 @@ if (primaryText || secondaryText || textChildren) {
     children = (React.createElement(ListItemIcon, { avatar: !!rightAvatar, media: !!rightMedia, mediaLarge: !!rightMediaLarge, icon: rightIcon || rightAvatar || rightMedia || rightMediaLarge, forceIconWrap: forceIconWrap, before: false, position: rightPosition }, children));
-    return (React.createElement(FixColorPollution, { enabled: preventColorPollution },
+    return (React.createElement(Fragment, null,
         children,
@@ -16,0 +15,0 @@ (primaryText && propChildren) || null));

es/ListItemIcon.js

@@ -23,14 +23,16 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
 import { TextIconSpacing } from "@react-md/icon";
+var base = bem("rmd-list-item");
 var ListItemIcon = function (_a) {
+    var _b;
     var className = _a.className, avatar = _a.avatar, before = _a.before, children = _a.children, media = _a.media, mediaLarge = _a.mediaLarge, position = _a.position, props = __rest(_a, ["className", "avatar", "before", "children", "media", "mediaLarge", "position"]);
-    var _b;
-    return (React.createElement(TextIconSpacing, __assign({}, props, { forceIconWrap: props.forceIconWrap || media, className: cn("rmd-list-item__icon", (_b = {},
-            _b["rmd-list-item__icon--" + position] = position !== "middle",
-            _b["rmd-list-item__avatar"] = avatar,
-            _b["rmd-list-item__media"] = media || mediaLarge,
-            _b["rmd-list-item__media--large"] = mediaLarge,
-            _b), className), iconAfter: !before }), children));
+    return (React.createElement(TextIconSpacing, __assign({}, props, { forceIconWrap: props.forceIconWrap || media, className: cn(base("icon", (_b = {},
+            _b[position] = position !== "middle",
+            _b.avatar = avatar,
+            _b.media = media || mediaLarge,
+            _b["media-large"] = mediaLarge,
+            _b)), className), iconAfter: !before }), children));
 };
 export default ListItemIcon;
 //# sourceMappingURL=ListItemIcon.js.map

es/ListItemLink.js

@@ -30,3 +30,5 @@ var __assign = (this && this.__assign) || function () {
     var height = getListItemHeight(providedProps);
-    var _c = useInteractionStates(__assign({}, props, { disableRipple: disableRipple,
+    var _c = useInteractionStates({
+        handlers: props,
+        disableRipple: disableRipple,
         disableProgrammaticRipple: disableProgrammaticRipple,
@@ -37,5 +39,5 @@ rippleTimeout: rippleTimeout,
         rippleContainerClassName: rippleContainerClassName,
-        enableKeyboardClick: enableKeyboardClick,
         disableSpacebarClick: disableSpacebarClick,
-        disablePressedFallback: disablePressedFallback })), ripples = _c.ripples, className = _c.className, handlers = _c.handlers;
+        disablePressedFallback: disablePressedFallback,
+    }), ripples = _c.ripples, className = _c.className, handlers = _c.handlers;
     return (React.createElement(Component, __assign({}, props, handlers, { ref: forwardedRef, className: cn("rmd-list-item rmd-list-item--clickable rmd-list-item--link", (_a = {},
@@ -42,0 +44,0 @@ _a["rmd-list-item--" + height] = height !== "auto" && height !== "normal",

es/ListItemText.js

 import React from "react";
 import cn from "classnames";
+import { bem } from "@react-md/theme";
+var block = bem("rmd-list-item");
 var ListItemText = function (_a) {
@@ -7,5 +9,5 @@ var className = _a.className, secondaryTextClassName = _a.secondaryTextClassName, secondaryText = _a.secondaryText, children = _a.children;
     if (secondaryText) {
-        secondaryContent = (React.createElement("span", { className: cn("rmd-list-item__text rmd-list-item__text--secondary", secondaryTextClassName) }, secondaryText));
+        secondaryContent = (React.createElement("span", { className: cn(block("text", { secondary: true }), secondaryTextClassName) }, secondaryText));
     }
-    return (React.createElement("span", { className: cn("rmd-list-item__text", className) },
+    return (React.createElement("span", { className: cn(block("text"), className) },
         children,
@@ -12,0 +14,0 @@ secondaryContent));

es/ListSubheader.js

@@ -23,7 +23,7 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
+var block = bem("rmd-list-subheader");
 var ListSubheader = function (providedProps) {
     var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, inset = _a.inset, props = __rest(_a, ["className", "forwardedRef", "inset"]);
-    return (React.createElement("li", __assign({}, props, { className: cn("rmd-list-subheader", {
-            "rmd-list-subheader--inset": inset,
-        }, className), ref: forwardedRef })));
+    return (React.createElement("li", __assign({}, props, { className: cn(block({ inset: inset }), className), ref: forwardedRef })));
 };
@@ -30,0 +30,0 @@ var defaultProps = {

es/SimpleListItem.js

@@ -23,16 +23,18 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
 import ListItemChildren from "./ListItemChildren";
 import getListItemHeight from "./getListItemHeight";
+var block = bem("rmd-list-item");
 var SimpleListItem = function (providedProps) {
     var _a;
-    var _b = providedProps, className = _b.className, textClassName = _b.textClassName, secondaryTextClassName = _b.secondaryTextClassName, textChildren = _b.textChildren, primaryText = _b.primaryText, secondaryText = _b.secondaryText, leftIcon = _b.leftIcon, leftAvatar = _b.leftAvatar, leftMedia = _b.leftMedia, leftMediaLarge = _b.leftMediaLarge, leftPosition = _b.leftPosition, rightIcon = _b.rightIcon, rightAvatar = _b.rightAvatar, rightMedia = _b.rightMedia, rightMediaLarge = _b.rightMediaLarge, rightPosition = _b.rightPosition, forceIconWrap = _b.forceIconWrap, children = _b.children, forwardedRef = _b.forwardedRef, propHeight = _b.height, threeLines = _b.threeLines, ariaDisabled = _b["aria-disabled"], disabled = _b.disabled, clickable = _b.clickable, preventColorPollution = _b.preventColorPollution, props = __rest(_b, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "children", "forwardedRef", "height", "threeLines", "aria-disabled", "disabled", "clickable", "preventColorPollution"]);
+    var _b = providedProps, className = _b.className, textClassName = _b.textClassName, secondaryTextClassName = _b.secondaryTextClassName, textChildren = _b.textChildren, primaryText = _b.primaryText, secondaryText = _b.secondaryText, leftIcon = _b.leftIcon, leftAvatar = _b.leftAvatar, leftMedia = _b.leftMedia, leftMediaLarge = _b.leftMediaLarge, leftPosition = _b.leftPosition, rightIcon = _b.rightIcon, rightAvatar = _b.rightAvatar, rightMedia = _b.rightMedia, rightMediaLarge = _b.rightMediaLarge, rightPosition = _b.rightPosition, forceIconWrap = _b.forceIconWrap, children = _b.children, forwardedRef = _b.forwardedRef, propHeight = _b.height, threeLines = _b.threeLines, ariaDisabled = _b["aria-disabled"], disabled = _b.disabled, clickable = _b.clickable, props = __rest(_b, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "children", "forwardedRef", "height", "threeLines", "aria-disabled", "disabled", "clickable"]);
     var height = getListItemHeight(providedProps);
     return (React.createElement("li", __assign({}, props, { "aria-disabled": typeof ariaDisabled === "string"
             ? ariaDisabled
-            : (disabled && "true") || undefined, ref: forwardedRef, className: cn("rmd-list-item", (_a = {},
-            _a["rmd-list-item--" + height] = height !== "auto" && height !== "normal",
-            _a["rmd-list-item--three-lines"] = threeLines,
-            _a["rmd-list-item--clickable"] = clickable,
-            _a), className) }),
-        React.createElement(ListItemChildren, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftIcon: leftIcon, leftAvatar: leftAvatar, leftMedia: leftMedia, leftMediaLarge: leftMediaLarge, leftPosition: leftPosition, rightIcon: rightIcon, rightAvatar: rightAvatar, rightMedia: rightMedia, rightMediaLarge: rightMediaLarge, rightPosition: rightPosition, forceIconWrap: forceIconWrap, preventColorPollution: preventColorPollution }, children)));
+            : (disabled && "true") || undefined, ref: forwardedRef, className: cn(block((_a = {},
+            _a[height] = height !== "auto" && height !== "normal",
+            _a["three-lines"] = threeLines,
+            _a.clickable = clickable,
+            _a)), className) }),
+        React.createElement(ListItemChildren, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftIcon: leftIcon, leftAvatar: leftAvatar, leftMedia: leftMedia, leftMediaLarge: leftMediaLarge, leftPosition: leftPosition, rightIcon: rightIcon, rightAvatar: rightAvatar, rightMedia: rightMedia, rightMediaLarge: rightMediaLarge, rightPosition: rightPosition, forceIconWrap: forceIconWrap }, children)));
 };
@@ -43,3 +45,2 @@ var defaultProps = {
     threeLines: false,
-    preventColorPollution: false,
     leftPosition: "middle",
@@ -46,0 +47,0 @@ rightPosition: "middle",

lib/List.js

@@ -35,2 +35,4 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
+var block = theme_1.bem("rmd-list");
 /**
@@ -41,6 +43,3 @@ * Creates an unordered or ordered list.
     var _a = providedProps, dense = _a.dense, horizontal = _a.horizontal, ordered = _a.ordered, forwardedRef = _a.forwardedRef, className = _a.className, children = _a.children, props = __rest(_a, ["dense", "horizontal", "ordered", "forwardedRef", "className", "children"]);
-    return react_1.createElement(ordered ? "ol" : "ul", __assign({}, props, { ref: forwardedRef, className: classnames_1.default("rmd-list", {
-            "rmd-list--dense": dense,
-            "rmd-list--horizontal": horizontal,
-        }, className) }), children);
+    return react_1.createElement(ordered ? "ol" : "ul", __assign({}, props, { ref: forwardedRef, className: classnames_1.default(block({ dense: dense, horizontal: horizontal }), className) }), children);
 };
@@ -47,0 +46,0 @@ var defaultProps = {

lib/ListItem.js

@@ -39,4 +39,7 @@ "use strict";
 var ListItem = function (providedProps) {
-    var _a = providedProps, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, forwardedRef = _a.forwardedRef, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, height = _a.height, enableKeyboardClick = _a.enableKeyboardClick, disableSpacebarClick = _a.disableSpacebarClick, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, disablePressedFallback = _a.disablePressedFallback, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, tabIndex = _a.tabIndex, role = _a.role, props = __rest(_a, ["textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "forwardedRef", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "height", "enableKeyboardClick", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "tabIndex", "role"]);
-    var _b = states_1.useInteractionStates(__assign({}, props, { disableRipple: disableRipple,
+    var _a = providedProps, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, forwardedRef = _a.forwardedRef, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, height = _a.height, disableSpacebarClick = _a.disableSpacebarClick, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, disablePressedFallback = _a.disablePressedFallback, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, tabIndex = _a.tabIndex, role = _a.role, props = __rest(_a, ["textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "forwardedRef", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "height", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "tabIndex", "role"]);
+    var _b = states_1.useInteractionStates({
+        handlers: props,
+        disabled: props.disabled,
+        disableRipple: disableRipple,
         disableProgrammaticRipple: disableProgrammaticRipple,
@@ -47,5 +50,5 @@ rippleTimeout: rippleTimeout,
         rippleContainerClassName: rippleContainerClassName,
-        enableKeyboardClick: enableKeyboardClick,
         disableSpacebarClick: disableSpacebarClick,
-        disablePressedFallback: disablePressedFallback })), ripples = _b.ripples, className = _b.className, handlers = _b.handlers;
+        disablePressedFallback: disablePressedFallback,
+    }), ripples = _b.ripples, className = _b.className, handlers = _b.handlers;
     return (react_1.default.createElement(SimpleListItem_1.default, __assign({}, props, handlers, { tabIndex: tabIndex, role: role, className: className, clickable: true, height: getListItemHeight_1.default(providedProps), ref: forwardedRef }),
@@ -59,3 +62,2 @@ react_1.default.createElement(ListItemChildren_1.default, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftIcon: leftIcon, leftAvatar: leftAvatar, leftMedia: leftMedia, leftMediaLarge: leftMediaLarge, leftPosition: leftPosition, rightIcon: rightIcon, rightAvatar: rightAvatar, rightMedia: rightMedia, rightMediaLarge: rightMediaLarge, rightPosition: rightPosition, forceIconWrap: forceIconWrap }, children),
     tabIndex: 0,
-    enableKeyboardClick: true,
     disableSpacebarClick: false,
@@ -77,3 +79,2 @@ disablePressedFallback: false,
         ListItem.propTypes = {
-            id: PropTypes.string.isRequired,
             role: PropTypes.string,
@@ -80,0 +81,0 @@ tabIndex: PropTypes.number,

lib/ListItemChildren.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,8 +13,7 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var states_1 = require("@react-md/states");
+var react_1 = __importStar(require("react"));
 var ListItemIcon_1 = __importDefault(require("./ListItemIcon"));
 var ListItemText_1 = __importDefault(require("./ListItemText"));
 var ListItemChildren = function (props) {
-    var _a = props, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, propChildren = _a.children, preventColorPollution = _a.preventColorPollution;
+    var _a = props, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftIcon = _a.leftIcon, leftAvatar = _a.leftAvatar, leftMedia = _a.leftMedia, leftMediaLarge = _a.leftMediaLarge, leftPosition = _a.leftPosition, rightIcon = _a.rightIcon, rightAvatar = _a.rightAvatar, rightMedia = _a.rightMedia, rightMediaLarge = _a.rightMediaLarge, rightPosition = _a.rightPosition, forceIconWrap = _a.forceIconWrap, propChildren = _a.children;
     var children = propChildren;
@@ -19,3 +25,3 @@ if (primaryText || secondaryText || textChildren) {
     children = (react_1.default.createElement(ListItemIcon_1.default, { avatar: !!rightAvatar, media: !!rightMedia, mediaLarge: !!rightMediaLarge, icon: rightIcon || rightAvatar || rightMedia || rightMediaLarge, forceIconWrap: forceIconWrap, before: false, position: rightPosition }, children));
-    return (react_1.default.createElement(states_1.FixColorPollution, { enabled: preventColorPollution },
+    return (react_1.default.createElement(react_1.Fragment, null,
         children,
@@ -22,0 +28,0 @@ (primaryText && propChildren) || null));

lib/ListItemIcon.js

@@ -28,14 +28,16 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
 var icon_1 = require("@react-md/icon");
+var base = theme_1.bem("rmd-list-item");
 var ListItemIcon = function (_a) {
+    var _b;
     var className = _a.className, avatar = _a.avatar, before = _a.before, children = _a.children, media = _a.media, mediaLarge = _a.mediaLarge, position = _a.position, props = __rest(_a, ["className", "avatar", "before", "children", "media", "mediaLarge", "position"]);
-    var _b;
-    return (react_1.default.createElement(icon_1.TextIconSpacing, __assign({}, props, { forceIconWrap: props.forceIconWrap || media, className: classnames_1.default("rmd-list-item__icon", (_b = {},
-            _b["rmd-list-item__icon--" + position] = position !== "middle",
-            _b["rmd-list-item__avatar"] = avatar,
-            _b["rmd-list-item__media"] = media || mediaLarge,
-            _b["rmd-list-item__media--large"] = mediaLarge,
-            _b), className), iconAfter: !before }), children));
+    return (react_1.default.createElement(icon_1.TextIconSpacing, __assign({}, props, { forceIconWrap: props.forceIconWrap || media, className: classnames_1.default(base("icon", (_b = {},
+            _b[position] = position !== "middle",
+            _b.avatar = avatar,
+            _b.media = media || mediaLarge,
+            _b["media-large"] = mediaLarge,
+            _b)), className), iconAfter: !before }), children));
 };
 exports.default = ListItemIcon;
 //# sourceMappingURL=ListItemIcon.js.map

lib/ListItemLink.js

@@ -42,3 +42,5 @@ "use strict";
     var height = getListItemHeight_1.default(providedProps);
-    var _c = states_1.useInteractionStates(__assign({}, props, { disableRipple: disableRipple,
+    var _c = states_1.useInteractionStates({
+        handlers: props,
+        disableRipple: disableRipple,
         disableProgrammaticRipple: disableProgrammaticRipple,
@@ -49,5 +51,5 @@ rippleTimeout: rippleTimeout,
         rippleContainerClassName: rippleContainerClassName,
-        enableKeyboardClick: enableKeyboardClick,
         disableSpacebarClick: disableSpacebarClick,
-        disablePressedFallback: disablePressedFallback })), ripples = _c.ripples, className = _c.className, handlers = _c.handlers;
+        disablePressedFallback: disablePressedFallback,
+    }), ripples = _c.ripples, className = _c.className, handlers = _c.handlers;
     return (react_1.default.createElement(Component, __assign({}, props, handlers, { ref: forwardedRef, className: classnames_1.default("rmd-list-item rmd-list-item--clickable rmd-list-item--link", (_a = {},
@@ -54,0 +56,0 @@ _a["rmd-list-item--" + height] = height !== "auto" && height !== "normal",

lib/ListItemText.js

@@ -8,2 +8,4 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
+var block = theme_1.bem("rmd-list-item");
 var ListItemText = function (_a) {
@@ -13,5 +15,5 @@ var className = _a.className, secondaryTextClassName = _a.secondaryTextClassName, secondaryText = _a.secondaryText, children = _a.children;
     if (secondaryText) {
-        secondaryContent = (react_1.default.createElement("span", { className: classnames_1.default("rmd-list-item__text rmd-list-item__text--secondary", secondaryTextClassName) }, secondaryText));
+        secondaryContent = (react_1.default.createElement("span", { className: classnames_1.default(block("text", { secondary: true }), secondaryTextClassName) }, secondaryText));
     }
-    return (react_1.default.createElement("span", { className: classnames_1.default("rmd-list-item__text", className) },
+    return (react_1.default.createElement("span", { className: classnames_1.default(block("text"), className) },
         children,
@@ -18,0 +20,0 @@ secondaryContent));

lib/ListSubheader.js

@@ -35,7 +35,7 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
+var block = theme_1.bem("rmd-list-subheader");
 var ListSubheader = function (providedProps) {
     var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, inset = _a.inset, props = __rest(_a, ["className", "forwardedRef", "inset"]);
-    return (react_1.default.createElement("li", __assign({}, props, { className: classnames_1.default("rmd-list-subheader", {
-            "rmd-list-subheader--inset": inset,
-        }, className), ref: forwardedRef })));
+    return (react_1.default.createElement("li", __assign({}, props, { className: classnames_1.default(block({ inset: inset }), className), ref: forwardedRef })));
 };
@@ -42,0 +42,0 @@ var defaultProps = {

lib/SimpleListItem.js

@@ -35,16 +35,18 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
 var ListItemChildren_1 = __importDefault(require("./ListItemChildren"));
 var getListItemHeight_1 = __importDefault(require("./getListItemHeight"));
+var block = theme_1.bem("rmd-list-item");
 var SimpleListItem = function (providedProps) {
     var _a;
-    var _b = providedProps, className = _b.className, textClassName = _b.textClassName, secondaryTextClassName = _b.secondaryTextClassName, textChildren = _b.textChildren, primaryText = _b.primaryText, secondaryText = _b.secondaryText, leftIcon = _b.leftIcon, leftAvatar = _b.leftAvatar, leftMedia = _b.leftMedia, leftMediaLarge = _b.leftMediaLarge, leftPosition = _b.leftPosition, rightIcon = _b.rightIcon, rightAvatar = _b.rightAvatar, rightMedia = _b.rightMedia, rightMediaLarge = _b.rightMediaLarge, rightPosition = _b.rightPosition, forceIconWrap = _b.forceIconWrap, children = _b.children, forwardedRef = _b.forwardedRef, propHeight = _b.height, threeLines = _b.threeLines, ariaDisabled = _b["aria-disabled"], disabled = _b.disabled, clickable = _b.clickable, preventColorPollution = _b.preventColorPollution, props = __rest(_b, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "children", "forwardedRef", "height", "threeLines", "aria-disabled", "disabled", "clickable", "preventColorPollution"]);
+    var _b = providedProps, className = _b.className, textClassName = _b.textClassName, secondaryTextClassName = _b.secondaryTextClassName, textChildren = _b.textChildren, primaryText = _b.primaryText, secondaryText = _b.secondaryText, leftIcon = _b.leftIcon, leftAvatar = _b.leftAvatar, leftMedia = _b.leftMedia, leftMediaLarge = _b.leftMediaLarge, leftPosition = _b.leftPosition, rightIcon = _b.rightIcon, rightAvatar = _b.rightAvatar, rightMedia = _b.rightMedia, rightMediaLarge = _b.rightMediaLarge, rightPosition = _b.rightPosition, forceIconWrap = _b.forceIconWrap, children = _b.children, forwardedRef = _b.forwardedRef, propHeight = _b.height, threeLines = _b.threeLines, ariaDisabled = _b["aria-disabled"], disabled = _b.disabled, clickable = _b.clickable, props = __rest(_b, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftIcon", "leftAvatar", "leftMedia", "leftMediaLarge", "leftPosition", "rightIcon", "rightAvatar", "rightMedia", "rightMediaLarge", "rightPosition", "forceIconWrap", "children", "forwardedRef", "height", "threeLines", "aria-disabled", "disabled", "clickable"]);
     var height = getListItemHeight_1.default(providedProps);
     return (react_1.default.createElement("li", __assign({}, props, { "aria-disabled": typeof ariaDisabled === "string"
             ? ariaDisabled
-            : (disabled && "true") || undefined, ref: forwardedRef, className: classnames_1.default("rmd-list-item", (_a = {},
-            _a["rmd-list-item--" + height] = height !== "auto" && height !== "normal",
-            _a["rmd-list-item--three-lines"] = threeLines,
-            _a["rmd-list-item--clickable"] = clickable,
-            _a), className) }),
-        react_1.default.createElement(ListItemChildren_1.default, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftIcon: leftIcon, leftAvatar: leftAvatar, leftMedia: leftMedia, leftMediaLarge: leftMediaLarge, leftPosition: leftPosition, rightIcon: rightIcon, rightAvatar: rightAvatar, rightMedia: rightMedia, rightMediaLarge: rightMediaLarge, rightPosition: rightPosition, forceIconWrap: forceIconWrap, preventColorPollution: preventColorPollution }, children)));
+            : (disabled && "true") || undefined, ref: forwardedRef, className: classnames_1.default(block((_a = {},
+            _a[height] = height !== "auto" && height !== "normal",
+            _a["three-lines"] = threeLines,
+            _a.clickable = clickable,
+            _a)), className) }),
+        react_1.default.createElement(ListItemChildren_1.default, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftIcon: leftIcon, leftAvatar: leftAvatar, leftMedia: leftMedia, leftMediaLarge: leftMediaLarge, leftPosition: leftPosition, rightIcon: rightIcon, rightAvatar: rightAvatar, rightMedia: rightMedia, rightMediaLarge: rightMediaLarge, rightPosition: rightPosition, forceIconWrap: forceIconWrap }, children)));
 };
@@ -55,3 +57,2 @@ var defaultProps = {
     threeLines: false,
-    preventColorPollution: false,
     leftPosition: "middle",
@@ -58,0 +59,0 @@ rightPosition: "middle",

package.json

 {
   "name": "@react-md/list",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "This package is used to create lists with the material design specs.",
@@ -35,9 +35,9 @@ "scripts": {
   "dependencies": {
-    "@react-md/avatar": "^2.0.0-alpha.0",
-    "@react-md/divider": "^2.0.0-alpha.0",
-    "@react-md/icon": "^2.0.0-alpha.0",
-    "@react-md/states": "^2.0.0-alpha.0",
-    "@react-md/theme": "^2.0.0-alpha.0",
-    "@react-md/typography": "^2.0.0-alpha.0",
-    "@react-md/utils": "^2.0.0-alpha.0",
+    "@react-md/avatar": "^2.0.0-alpha.1",
+    "@react-md/divider": "^2.0.0-alpha.1",
+    "@react-md/icon": "^2.0.0-alpha.1",
+    "@react-md/states": "^2.0.0-alpha.1",
+    "@react-md/theme": "^2.0.0-alpha.1",
+    "@react-md/typography": "^2.0.0-alpha.1",
+    "@react-md/utils": "^2.0.0-alpha.1",
     "classnames": "^2.2.6"
@@ -54,3 +54,3 @@ },
   },
-  "gitHead": "cc5de21740e62c1fd5da8f832f562c48eb028717"
+  "gitHead": "9197bcdf38df3cff304499431696dc8e950b4b17"
 }

src/scssVariables.ts

@@ -22,2 +22,5 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-list-item-dense-three-line-height": "5rem",
+  "rmd-list-item-secondary-text-line-height": 1.42857,
+  "rmd-list-item-secondary-text-three-line-max-height": "3rem",
+  "rmd-list-item-dense-secondary-text-three-line-max-height": "2.25rem",
   "rmd-list-item-text-keyline": "4.5rem",
@@ -39,3 +42,3 @@ "rmd-list-item-media-size": "3.5rem",
     "item-horizontal-padding": "1rem",
-    "item-secondary-three-line-height": "3.5rem",
+    "item-secondary-three-line-height": "3rem",
     "dense-font-size": "0.8125rem",
@@ -49,3 +52,3 @@ "dense-vertical-padding": "0.25rem",
     "dense-item-three-line-height": "5rem",
-    "dense-item-secondary-three-line-height": "3rem",
+    "dense-item-secondary-three-line-height": "2.25rem",
     "media-size": "3.5rem",
@@ -52,0 +55,0 @@ "media-spacing": "1rem",

types/ListItem.d.ts

@@ -5,3 +5,2 @@ import React from "react";
 export interface ListItemProps extends SimpleListItemProps, InteractionStatesOptions<HTMLLIElement> {
-    id: string;
     tabIndex?: number;
@@ -8,0 +7,0 @@ }

types/ListItemChildren.d.ts

@@ -84,9 +84,4 @@ import { FunctionComponent, ReactNode } from "react";
     rightPosition?: ListItemIconPosition;
-    /**
-     * Boolean if the color pollution should be fixed at this level. This is really used when
-     * composing the children with clickable list items and tree items.
-     */
-    preventColorPollution?: boolean;
 }
 declare const ListItemChildren: FunctionComponent<ListItemChildrenProps>;
 export default ListItemChildren;

types/ListItemLink.d.ts

@@ -24,3 +24,3 @@ import React, { HTMLAttributes, ReactType } from "react";
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<ListItemLinkProps, string | number> & React.RefAttributes<"symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | HTMLAnchorElement | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "svg" | "stop" | "switch" | "tspan" | "text" | "textPath" | "use" | "view" | "menuitem" | "bdi" | "keygen" | "main" | "noindex" | "rp" | "summary" | "webview" | "animate" | "animateMotion" | "animateTransform" | "mpath" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<ListItemLinkProps, React.ReactText> & React.RefAttributes<"symbol" | "object" | "style" | "title" | "time" | "link" | "menu" | "dialog" | "text" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | HTMLAnchorElement>>;
 export default _default;

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

183800

decreased by-72.91%

Number of package files

79

decreased by-3.66%

Lines of code

2457

decreased by-62.53%

Dependency changes

• Updated@react-md/avatar@^2.0.0-alpha.1

• Updated@react-md/divider@^2.0.0-alpha.1

• Updated@react-md/icon@^2.0.0-alpha.1

• Updated@react-md/states@^2.0.0-alpha.1

• Updated@react-md/theme@^2.0.0-alpha.1

• Updated@react-md/typography@^2.0.0-alpha.1

• Updated@react-md/utils@^2.0.0-alpha.1