@react-md/list - npm Package Compare versions

Comparing version 2.4.2 to 2.4.3

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+## [2.4.3](https://github.com/mlaursen/react-md/compare/v2.4.2...v2.4.3) (2020-11-14)
+
+### Bug Fixes
+
+- [@react-md/list](../list): fixed `ListItem` disabled colors to optionally
+  include addons
+  ([a40b6b3](https://github.com/mlaursen/react-md/commit/a40b6b3f4b25c5c8e714081ebeb147ccf019ac01)),
+  closes [#997](https://github.com/mlaursen/react-md/issues/997)
+- [@react-md/list](../list): `ListItem` no longer focusable by default when
+  disabled
+  ([06e91ca](https://github.com/mlaursen/react-md/commit/06e91cafd91a2b666d728acf134c0652696715c9)),
+  closes [#997](https://github.com/mlaursen/react-md/issues/997)
+
 ## [2.4.2](https://github.com/mlaursen/react-md/compare/v2.4.1...v2.4.2) (2020-10-23)
@@ -8,0 +21,0 @@

dist/scssVariables.d.ts

@@ -32,2 +32,3 @@ /**
     "rmd-list-item-media-spacing": string;
+    "rmd-list-item-disabled-opacity": number;
     "rmd-list-theme-values": {
@@ -34,0 +35,0 @@ "vertical-padding": string;

dist/scssVariables.js

@@ -34,2 +34,3 @@ "use strict";
     "rmd-list-item-media-spacing": "1rem",
+    "rmd-list-item-disabled-opacity": 0.5,
     "rmd-list-theme-values": {
@@ -36,0 +37,0 @@ "vertical-padding": "0.5rem",

es/ListItem.js

@@ -33,5 +33,4 @@ var __assign = (this && this.__assign) || function () {
 export var ListItem = forwardRef(function ListItem(_a, ref) {
-    var propClassName = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, _b = _a.textChildren, textChildren = _b === void 0 ? true : _b, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, 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, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.disableSpacebarClick, disableSpacebarClick = _h === void 0 ? false : _h, _j = _a.disableRipple, disableRipple = _j === void 0 ? false : _j, _k = _a.disableProgrammaticRipple, disableProgrammaticRipple = _k === void 0 ? false : _k, _l = _a.disablePressedFallback, disablePressedFallback = _l === void 0 ? false : _l, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, _m = _a.role, role = _m === void 0 ? "button" : _m, _o = _a.tabIndex, tabIndex = _o === void 0 ? 0 : _o, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "height", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "role", "tabIndex"]);
-    var disabled = props.disabled;
-    var _p = useInteractionStates({
+    var propClassName = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, _b = _a.textChildren, textChildren = _b === void 0 ? true : _b, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, 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, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.disableSpacebarClick, disableSpacebarClick = _h === void 0 ? false : _h, _j = _a.disableRipple, disableRipple = _j === void 0 ? false : _j, _k = _a.disableProgrammaticRipple, disableProgrammaticRipple = _k === void 0 ? false : _k, _l = _a.disablePressedFallback, disablePressedFallback = _l === void 0 ? false : _l, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, _m = _a.role, role = _m === void 0 ? "button" : _m, _o = _a.disabled, disabled = _o === void 0 ? false : _o, _p = _a.tabIndex, tabIndex = _p === void 0 ? disabled ? -1 : 0 : _p, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "height", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "role", "disabled", "tabIndex"]);
+    var _q = useInteractionStates({
         className: propClassName,
@@ -48,3 +47,3 @@ handlers: props,
         disablePressedFallback: disablePressedFallback,
-    }), ripples = _p.ripples, className = _p.className, handlers = _p.handlers;
+    }), ripples = _q.ripples, className = _q.className, handlers = _q.handlers;
     var height = getListItemHeight({
@@ -58,3 +57,3 @@ height: propHeight,
     });
-    return (React.createElement(SimpleListItem, __assign({}, props, handlers, { ref: ref, tabIndex: tabIndex, role: role, className: className, clickable: true, height: height }),
+    return (React.createElement(SimpleListItem, __assign({}, props, handlers, { ref: ref, tabIndex: tabIndex, disabled: disabled, role: role, className: className, clickable: true, height: height }),
         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),
@@ -61,0 +60,0 @@ ripples));

es/SimpleListItem.js

@@ -41,3 +41,3 @@ var __assign = (this && this.__assign) || function () {
     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, 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 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, _l = _a.disabledOpacity, disabledOpacity = _l === void 0 ? false : _l, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "children", "height", "threeLines", "clickable", "onClick", "disabled", "disabledOpacity"]);
     var height = getListItemHeight({
@@ -58,2 +58,4 @@ height: propHeight,
             _b.disabled = isDisabled,
+            _b["disabled-color"] = isDisabled && !disabledOpacity,
+            _b["disabled-opacity"] = isDisabled && disabledOpacity,
             _b)), className), onClick: isDisabled ? undefined : onClick }),
@@ -60,0 +62,0 @@ 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)));

lib/getListItemHeight.d.ts

@@ -11,2 +11,12 @@ import { HTMLAttributes } from "react";
     /**
+     * Boolean if the list item should apply an opacity value while disabled
+     * instead of overriding the primary and secondary text colors. Enabling this
+     * will allow for the list item addons to also be dimmed.
+     *
+     * This is configured by the `$rmd-list-item-disabled-opacity` variable.
+     *
+     * Note: This does nothing if the `disabled` prop is not enabled.
+     */
+    disabledOpacity?: boolean;
+    /**
      * Boolean if the list item should be updated to use the clickable styles to
@@ -13,0 +23,0 @@ * the item. This is really just a pass-down value for the main `ListItem`

lib/ListItem.js

@@ -55,5 +55,4 @@ "use strict";
 exports.ListItem = react_1.forwardRef(function ListItem(_a, ref) {
-    var propClassName = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, _b = _a.textChildren, textChildren = _b === void 0 ? true : _b, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, 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, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.disableSpacebarClick, disableSpacebarClick = _h === void 0 ? false : _h, _j = _a.disableRipple, disableRipple = _j === void 0 ? false : _j, _k = _a.disableProgrammaticRipple, disableProgrammaticRipple = _k === void 0 ? false : _k, _l = _a.disablePressedFallback, disablePressedFallback = _l === void 0 ? false : _l, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, _m = _a.role, role = _m === void 0 ? "button" : _m, _o = _a.tabIndex, tabIndex = _o === void 0 ? 0 : _o, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "height", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "role", "tabIndex"]);
-    var disabled = props.disabled;
-    var _p = states_1.useInteractionStates({
+    var propClassName = _a.className, textClassName = _a.textClassName, secondaryTextClassName = _a.secondaryTextClassName, _b = _a.textChildren, textChildren = _b === void 0 ? true : _b, primaryText = _a.primaryText, secondaryText = _a.secondaryText, children = _a.children, 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, _g = _a.height, propHeight = _g === void 0 ? "auto" : _g, _h = _a.disableSpacebarClick, disableSpacebarClick = _h === void 0 ? false : _h, _j = _a.disableRipple, disableRipple = _j === void 0 ? false : _j, _k = _a.disableProgrammaticRipple, disableProgrammaticRipple = _k === void 0 ? false : _k, _l = _a.disablePressedFallback, disablePressedFallback = _l === void 0 ? false : _l, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, _m = _a.role, role = _m === void 0 ? "button" : _m, _o = _a.disabled, disabled = _o === void 0 ? false : _o, _p = _a.tabIndex, tabIndex = _p === void 0 ? disabled ? -1 : 0 : _p, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "children", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "height", "disableSpacebarClick", "disableRipple", "disableProgrammaticRipple", "disablePressedFallback", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "role", "disabled", "tabIndex"]);
+    var _q = states_1.useInteractionStates({
         className: propClassName,
@@ -70,3 +69,3 @@ handlers: props,
         disablePressedFallback: disablePressedFallback,
-    }), ripples = _p.ripples, className = _p.className, handlers = _p.handlers;
+    }), ripples = _q.ripples, className = _q.className, handlers = _q.handlers;
     var height = getListItemHeight_1.getListItemHeight({
@@ -80,3 +79,3 @@ height: propHeight,
     });
-    return (react_1.default.createElement(SimpleListItem_1.SimpleListItem, __assign({}, props, handlers, { ref: ref, tabIndex: tabIndex, role: role, className: className, clickable: true, height: height }),
+    return (react_1.default.createElement(SimpleListItem_1.SimpleListItem, __assign({}, props, handlers, { ref: ref, tabIndex: tabIndex, disabled: disabled, role: role, className: className, clickable: true, height: height }),
         react_1.default.createElement(ListItemChildren_1.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),
@@ -83,0 +82,0 @@ ripples));

lib/SimpleListItem.js

@@ -66,3 +66,3 @@ "use strict";
     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, 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 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, _l = _a.disabledOpacity, disabledOpacity = _l === void 0 ? false : _l, props = __rest(_a, ["className", "textClassName", "secondaryTextClassName", "textChildren", "primaryText", "secondaryText", "leftAddon", "leftAddonType", "leftAddonPosition", "rightAddon", "rightAddonType", "rightAddonPosition", "forceAddonWrap", "children", "height", "threeLines", "clickable", "onClick", "disabled", "disabledOpacity"]);
     var height = getListItemHeight_1.getListItemHeight({
@@ -83,2 +83,4 @@ height: propHeight,
             _b.disabled = isDisabled,
+            _b["disabled-color"] = isDisabled && !disabledOpacity,
+            _b["disabled-opacity"] = isDisabled && disabledOpacity,
             _b)), className), onClick: isDisabled ? undefined : onClick }),
@@ -85,0 +87,0 @@ react_1.default.createElement(ListItemChildren_1.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)));

package.json

 {
   "name": "@react-md/list",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "This package is used to create lists with the material design specs.",
@@ -63,3 +63,3 @@ "main": "./lib/index.js",
   },
-  "gitHead": "49577fdd48d1b52db51c3d05df6cadb3c9cf0bdc"
+  "gitHead": "5df39c8d460eedf9b6fbf85a0b87105a50086620"
 }

src/getListItemHeight.ts

@@ -22,2 +22,13 @@ import { HTMLAttributes } from "react";
   /**
+   * Boolean if the list item should apply an opacity value while disabled
+   * instead of overriding the primary and secondary text colors. Enabling this
+   * will allow for the list item addons to also be dimmed.
+   *
+   * This is configured by the `$rmd-list-item-disabled-opacity` variable.
+   *
+   * Note: This does nothing if the `disabled` prop is not enabled.
+   */
+  disabledOpacity?: boolean;
+
+  /**
    * Boolean if the list item should be updated to use the clickable styles to
@@ -24,0 +35,0 @@ * the item. This is really just a pass-down value for the main `ListItem`

src/scssVariables.ts

@@ -33,2 +33,3 @@ /**
   "rmd-list-item-media-spacing": "1rem",
+  "rmd-list-item-disabled-opacity": 0.5,
   "rmd-list-theme-values": {
@@ -35,0 +36,0 @@ "vertical-padding": "0.5rem",

types/getListItemHeight.d.ts

@@ -11,2 +11,12 @@ import { HTMLAttributes } from "react";
     /**
+     * Boolean if the list item should apply an opacity value while disabled
+     * instead of overriding the primary and secondary text colors. Enabling this
+     * will allow for the list item addons to also be dimmed.
+     *
+     * This is configured by the `$rmd-list-item-disabled-opacity` variable.
+     *
+     * Note: This does nothing if the `disabled` prop is not enabled.
+     */
+    disabledOpacity?: boolean;
+    /**
      * Boolean if the list item should be updated to use the clickable styles to
@@ -13,0 +23,0 @@ * the item. This is really just a pass-down value for the main `ListItem`

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

292419

increased by2.3%

Lines of code

3979

increased by1.9%

No dependency changes