terra-button - npm Package Compare versions

Comparing version 3.68.2 to 3.69.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 3.69.0 - (October 23, 2023)
+
+* Changed
+  * Added support of selection state for Fusion-Button
+
 ## 3.68.2 - (October 3, 2023)
@@ -7,0 +12,0 @@

lib/Button.js

@@ -16,4 +16,4 @@ "use strict";
 var _excluded = ["icon", "isBlock", "isCompact", "isDisabled", "isIconOnly", "isReversed", "text", "type", "variant", "href", "onClick", "onMouseDown", "onBlur", "onFocus", "onKeyDown", "onKeyUp", "refCallback", "title"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -148,3 +148,4 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       active: false,
-      focused: false
+      focused: false,
+      isSelected: false
     };
@@ -172,3 +173,3 @@ _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
     key: "handleClick",
-    value: function handleClick(event) {
+    value: function handleClick(event, isSelectable) {
       // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button#Clicking_and_focus
@@ -183,3 +184,7 @@ // Button on Firefox, Safari and IE running on OS X does not receive focus when clicked.
       if (this.props.onClick) {
-        this.props.onClick(event);
+        if (isSelectable) {
+          this.props.onClick(event, this.state.isSelected);
+        } else {
+          this.props.onClick(event);
+        }
       }
@@ -189,3 +194,3 @@ }
     key: "handleKeyDown",
-    value: function handleKeyDown(event) {
+    value: function handleKeyDown(event, isSelectable) {
       // Add active state to FF browsers
@@ -210,2 +215,9 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         });
+        if (isSelectable) {
+          this.setState(function (prevState) {
+            return {
+              isSelected: !prevState.isSelected
+            };
+          });
+        }
       }
@@ -250,6 +262,13 @@ if (this.props.onKeyDown) {
     key: "handleMouseDown",
-    value: function handleMouseDown(event) {
+    value: function handleMouseDown(event, isSelectable) {
       if (this.props.onMouseDown) {
         this.props.onMouseDown(event);
       }
+      if (isSelectable) {
+        this.setState(function (prevState) {
+          return {
+            isSelected: !prevState.isSelected
+          };
+        });
+      }
 
@@ -264,2 +283,3 @@ // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#Notes
     value: function render() {
+      var _this2 = this;
       var _this$props = this.props,
@@ -290,2 +310,5 @@ icon = _this$props.icon,
       var buttonLabelCx = isMac() ? 'button-label-mac' : 'button-label-win';
+
+      // TODO: `isSelectable` prop is used for fusion pass through passivity and should be removed after Fusion Phase2 release.
+      var isSelectable = customProps.isSelectable;
       var buttonClasses = (0, _classnames.default)(cx(['button', variant, {
@@ -301,2 +324,4 @@ 'is-disabled': isDisabled
         'is-focused': this.state.focused && !isDisabled
+      }, {
+        'is-selected': isSelectable && this.state.isSelected && !isDisabled
       }, theme.className]), customProps.className);
@@ -340,2 +365,5 @@ var buttonLabelClasses = cx([buttonLabelCx, {
       }
+      if (isSelectable) {
+        customProps['aria-pressed'] = this.state.isSelected;
+      }
       var ComponentType = 'button';
@@ -353,8 +381,14 @@ if (href) {
         "aria-label": ariaLabel,
-        onKeyDown: this.handleKeyDown,
+        onKeyDown: function onKeyDown(event) {
+          _this2.handleKeyDown(event, isSelectable);
+        },
         onKeyUp: this.handleKeyUp,
         onBlur: this.handleOnBlur,
         title: buttonTitle,
-        onClick: this.handleClick,
-        onMouseDown: this.handleMouseDown,
+        onClick: function onClick(event) {
+          _this2.handleClick(event, isSelectable);
+        },
+        onMouseDown: function onMouseDown(event) {
+          _this2.handleMouseDown(event, isSelectable);
+        },
         onFocus: this.handleFocus,
@@ -361,0 +395,0 @@ href: href,

package.json

 {
   "name": "terra-button",
   "main": "lib/Button.js",
-  "version": "3.68.2",
+  "version": "3.69.0",
   "description": "The terra-button component provides users a way to trigger actions in the UI.",
@@ -47,3 +47,3 @@ "repository": {
   },
-  "gitHead": "15402a168fe208a6a6ad899563df19e687c034af"
+  "gitHead": "7eadd8eda62721d33cfc1300091110ddb9051817"
 }

src/Button.jsx

@@ -121,3 +121,3 @@ import React from 'react';
     super(props);
-    this.state = { active: false, focused: false };
+    this.state = { active: false, focused: false, isSelected: false };
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -148,3 +148,3 @@ this.handleKeyUp = this.handleKeyUp.bind(this);
 
-  handleClick(event) {
+  handleClick(event, isSelectable) {
     // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button#Clicking_and_focus
@@ -160,7 +160,11 @@ // Button on Firefox, Safari and IE running on OS X does not receive focus when clicked.
     if (this.props.onClick) {
-      this.props.onClick(event);
+      if (isSelectable) {
+        this.props.onClick(event, this.state.isSelected);
+      } else {
+        this.props.onClick(event);
+      }
     }
   }
 
-  handleKeyDown(event) {
+  handleKeyDown(event, isSelectable) {
     // Add active state to FF browsers
@@ -181,2 +185,5 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
       this.setState({ focused: true });
+      if (isSelectable) {
+        this.setState(prevState => ({ isSelected: !prevState.isSelected }));
+      }
     }
@@ -215,6 +222,9 @@
 
-  handleMouseDown(event) {
+  handleMouseDown(event, isSelectable) {
     if (this.props.onMouseDown) {
       this.props.onMouseDown(event);
     }
+    if (isSelectable) {
+      this.setState(prevState => ({ isSelected: !prevState.isSelected }));
+    }
 
@@ -254,2 +264,5 @@ // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#Notes
 
+    // TODO: `isSelectable` prop is used for fusion pass through passivity and should be removed after Fusion Phase2 release.
+    const { isSelectable } = customProps;
+
     const buttonClasses = classNames(
@@ -264,2 +277,3 @@ cx([
         { 'is-focused': this.state.focused && !isDisabled },
+        { 'is-selected': isSelectable && this.state.isSelected && !isDisabled },
         theme.className,
@@ -312,2 +326,6 @@ ]),
 
+    if (isSelectable) {
+      customProps['aria-pressed'] = this.state.isSelected;
+    }
+
     let ComponentType = 'button';
@@ -328,8 +346,8 @@ if (href) {
         aria-label={ariaLabel}
-        onKeyDown={this.handleKeyDown}
+        onKeyDown={(event) => { this.handleKeyDown(event, isSelectable); }}
         onKeyUp={this.handleKeyUp}
         onBlur={this.handleOnBlur}
         title={buttonTitle}
-        onClick={this.handleClick}
-        onMouseDown={this.handleMouseDown}
+        onClick={(event) => { this.handleClick(event, isSelectable); }}
+        onMouseDown={(event) => { this.handleMouseDown(event, isSelectable); }}
         onFocus={this.handleFocus}
@@ -336,0 +354,0 @@ href={href}

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

139608

increased by6.68%

Lines of code

732

increased by6.86%

No dependency changes