@react-md/list - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [2.1.0](https://github.com/mlaursen/react-md/compare/v2.0.4...v2.1.0) (2020-07-12)
+
+### Bug Fixes
+
+- ListItem disabled states
+  ([7b37292](https://github.com/mlaursen/react-md/commit/7b372926289d0c1cdab76dbea9cb298e7594dfa9))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [2.0.2](https://github.com/mlaursen/react-md/compare/v2.0.1...v2.0.2) (2020-06-30)
@@ -18,7 +30,7 @@
 
-# v2.0.1
+## v2.0.1
 
 No changes.
 
-# v2.0.0
+## v2.0.0
 
@@ -29,3 +41,3 @@ This package has a lot of changes from the v1 API that should hopefully make it
 
-## New Behavior and Features
+### New Behavior and Features
 
@@ -66,3 +78,3 @@ - all components now correctly forward the `ref` to the DOM element
 
-## Breaking Changes
+### Breaking Changes
 
@@ -79,3 +91,3 @@ - removed the `ListItemControl` component and built-in functionality for
 
-### New SCSS Variables, Functions, and Mixins
+#### New SCSS Variables, Functions, and Mixins
 
@@ -125,3 +137,3 @@ - `$rmd-list-dense-horizontal-padding: 0 !default` - a new variable if you want
 
-### Renamed SCSS Variables, Functions, and Mixins
+#### Renamed SCSS Variables, Functions, and Mixins
 
@@ -159,3 +171,3 @@ - renamed `$md-list-mobile-padding` to `$rmd-list-vertical-padding` and changed
 
-### Removed SCSS Variables Placeholders, and Mixins
+#### Removed SCSS Variables Placeholders, and Mixins
 
@@ -162,0 +174,0 @@ - removed `$md-list-inline-padding`

es/SimpleListItem.js

@@ -23,2 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
+/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/role-supports-aria-props */
 import React, { forwardRef } from "react";
@@ -41,3 +42,3 @@ import cn from "classnames";
     var _b;
-    var className = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftAddon = _a.leftAddon, _c = _a.leftAddonType, leftAddonType = _c === void 0 ? "icon" : _c, _d = _a.leftAddonPosition, leftAddonPosition = _d === void 0 ? "middle" : _d, rightAddon = _a.rightAddon, _e = _a.rightAddonType, rightAddonType = _e === void 0 ? "icon" : _e, _f = _a.rightAddonPosition, rightAddonPosition = _f === void 0 ? "middle" : _f, forceAddonWrap = _a.forceAddonWrap, children = _a.children, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.threeLines, threeLines = _h === void 0 ? false : _h, _j = _a.clickable, clickable = _j === void 0 ? false : _j, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "children", "height", "threeLines", "clickable"]);
+    var className = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftAddon = _a.leftAddon, _c = _a.leftAddonType, leftAddonType = _c === void 0 ? "icon" : _c, _d = _a.leftAddonPosition, leftAddonPosition = _d === void 0 ? "middle" : _d, rightAddon = _a.rightAddon, _e = _a.rightAddonType, rightAddonType = _e === void 0 ? "icon" : _e, _f = _a.rightAddonPosition, rightAddonPosition = _f === void 0 ? "middle" : _f, forceAddonWrap = _a.forceAddonWrap, children = _a.children, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.threeLines, threeLines = _h === void 0 ? false : _h, _j = _a.clickable, clickable = _j === void 0 ? false : _j, onClick = _a.onClick, _k = _a.disabled, disabled = _k === void 0 ? false : _k, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "children", "height", "threeLines", "clickable", "onClick", "disabled"]);
     var height = getListItemHeight({
@@ -51,7 +52,10 @@ height: propHeight,
     });
-    return (React.createElement("li", __assign({}, props, { ref: ref, className: cn(block((_b = {},
+    var ariaDisabled = props["aria-disabled"];
+    var isDisabled = disabled || ariaDisabled === "true" || ariaDisabled === true;
+    return (React.createElement("li", __assign({}, props, { "aria-disabled": isDisabled || undefined, ref: ref, className: cn(block((_b = {},
             _b[height] = height !== "auto" && height !== "normal",
             _b["three-lines"] = threeLines,
             _b.clickable = clickable,
-            _b)), className) }),
+            _b.disabled = isDisabled,
+            _b)), className), onClick: isDisabled ? undefined : onClick }),
         React.createElement(ListItemChildren, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftAddon: leftAddon, leftAddonType: leftAddonType, leftAddonPosition: leftAddonPosition, rightAddon: rightAddon, rightAddonType: rightAddonType, rightAddonPosition: rightAddonPosition, forceAddonWrap: forceAddonWrap }, children)));
@@ -101,2 +105,3 @@ });
             children: PropTypes.node,
+            onClick: PropTypes.func,
         };
@@ -103,0 +108,0 @@ }

lib/SimpleListItem.js

@@ -47,2 +47,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/role-supports-aria-props */
 var react_1 = __importStar(require("react"));
@@ -65,3 +66,3 @@ var classnames_1 = __importDefault(require("classnames"));
     var _b;
-    var className = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftAddon = _a.leftAddon, _c = _a.leftAddonType, leftAddonType = _c === void 0 ? "icon" : _c, _d = _a.leftAddonPosition, leftAddonPosition = _d === void 0 ? "middle" : _d, rightAddon = _a.rightAddon, _e = _a.rightAddonType, rightAddonType = _e === void 0 ? "icon" : _e, _f = _a.rightAddonPosition, rightAddonPosition = _f === void 0 ? "middle" : _f, forceAddonWrap = _a.forceAddonWrap, children = _a.children, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.threeLines, threeLines = _h === void 0 ? false : _h, _j = _a.clickable, clickable = _j === void 0 ? false : _j, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "children", "height", "threeLines", "clickable"]);
+    var className = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, textChildren = _a.textChildren, primaryText = _a.primaryText, secondaryText = _a.secondaryText, leftAddon = _a.leftAddon, _c = _a.leftAddonType, leftAddonType = _c === void 0 ? "icon" : _c, _d = _a.leftAddonPosition, leftAddonPosition = _d === void 0 ? "middle" : _d, rightAddon = _a.rightAddon, _e = _a.rightAddonType, rightAddonType = _e === void 0 ? "icon" : _e, _f = _a.rightAddonPosition, rightAddonPosition = _f === void 0 ? "middle" : _f, forceAddonWrap = _a.forceAddonWrap, children = _a.children, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.threeLines, threeLines = _h === void 0 ? false : _h, _j = _a.clickable, clickable = _j === void 0 ? false : _j, onClick = _a.onClick, _k = _a.disabled, disabled = _k === void 0 ? false : _k, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "children", "height", "threeLines", "clickable", "onClick", "disabled"]);
     var height = getListItemHeight_1.default({
@@ -75,7 +76,10 @@ height: propHeight,
     });
-    return (react_1.default.createElement("li", __assign({}, props, { ref: ref, className: classnames_1.default(block((_b = {},
+    var ariaDisabled = props["aria-disabled"];
+    var isDisabled = disabled || ariaDisabled === "true" || ariaDisabled === true;
+    return (react_1.default.createElement("li", __assign({}, props, { "aria-disabled": isDisabled || undefined, ref: ref, className: classnames_1.default(block((_b = {},
             _b[height] = height !== "auto" && height !== "normal",
             _b["three-lines"] = threeLines,
             _b.clickable = clickable,
-            _b)), className) }),
+            _b.disabled = isDisabled,
+            _b)), className), onClick: isDisabled ? undefined : onClick }),
         react_1.default.createElement(ListItemChildren_1.default, { textClassName: textClassName, secondaryTextClassName: secondaryTextClassName, textChildren: textChildren, primaryText: primaryText, secondaryText: secondaryText, leftAddon: leftAddon, leftAddonType: leftAddonType, leftAddonPosition: leftAddonPosition, rightAddon: rightAddon, rightAddonType: rightAddonType, rightAddonPosition: rightAddonPosition, forceAddonWrap: forceAddonWrap }, children)));
@@ -125,2 +129,3 @@ });
             children: PropTypes.node,
+            onClick: PropTypes.func,
         };
@@ -127,0 +132,0 @@ }

package.json

 {
   "name": "@react-md/list",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "This package is used to create lists with the material design specs.",
@@ -45,9 +45,9 @@ "scripts": {
   "dependencies": {
-    "@react-md/avatar": "^2.0.2",
-    "@react-md/divider": "^2.0.2",
-    "@react-md/icon": "^2.0.2",
-    "@react-md/states": "^2.0.2",
-    "@react-md/theme": "^2.0.2",
-    "@react-md/typography": "^2.0.2",
-    "@react-md/utils": "^2.0.2",
+    "@react-md/avatar": "^2.1.0",
+    "@react-md/divider": "^2.1.0",
+    "@react-md/icon": "^2.1.0",
+    "@react-md/states": "^2.1.0",
+    "@react-md/theme": "^2.1.0",
+    "@react-md/typography": "^2.1.0",
+    "@react-md/utils": "^2.1.0",
     "classnames": "^2.2.6"
@@ -68,3 +68,3 @@ },
   },
-  "gitHead": "ccb220af2d620bd6eccccf36dc689356fa1db568"
+  "gitHead": "f7581c64cba37ebcd570f25952f1e3a11e817257"
 }

No alert changes

Improved metrics

Total package byte prevSize

288213

increased by1.52%

Lines of code

3970

increased by1.51%

Dependency changes

• Updated@react-md/avatar@^2.1.0

• Updated@react-md/divider@^2.1.0

• Updated@react-md/icon@^2.1.0

• Updated@react-md/states@^2.1.0

• Updated@react-md/theme@^2.1.0

• Updated@react-md/typography@^2.1.0

• Updated@react-md/utils@^2.1.0