terra-slide-panel - npm Package Compare versions

Comparing version 3.47.0 to 3.48.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 3.48.0 - (March 29, 2024)
+
+* Changed
+  * Updated capturing the disclosing node to accommodate for cases with no `mainContent`.
+
 ## 3.47.0 - (December 18, 2023)
@@ -7,0 +12,0 @@

lib/SlidePanel.js

@@ -12,6 +12,6 @@ "use strict";
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
@@ -27,4 +27,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _excluded = ["intl", "isFullscreen", "isOpen", "fill", "mainAriaLabel", "mainContent", "panelAriaLabel", "panelContent", "panelBehavior", "panelPosition", "panelSize", "setSlidePanelRef"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var cx = _bind.default.bind(_SlidePanelModule.default);
@@ -97,10 +97,8 @@ var SlidePanelPositions = exports.SlidePanelPositions = {
   (0, _inherits2.default)(SlidePanel, _React$Component);
-  var _super = _createSuper(SlidePanel);
   function SlidePanel(props) {
     var _this;
     (0, _classCallCheck2.default)(this, SlidePanel);
-    _this = _super.call(this, props);
+    _this = _callSuper(this, SlidePanel, [props]);
     _this.setPanelNode = _this.setPanelNode.bind((0, _assertThisInitialized2.default)(_this));
     _this.mainNode = /*#__PURE__*/_react.default.createRef();
-    _this.setLastClicked = _this.setLastClicked.bind((0, _assertThisInitialized2.default)(_this));
     _this.setDisclosingNode = _this.setDisclosingNode.bind((0, _assertThisInitialized2.default)(_this));
@@ -115,3 +113,3 @@ _this.mainAriaDescribedByID = "detail-panel-warning-".concat((0, _uuid.v4)());
         // Save the disclosing node for returning focus when panel is closed
-        this.setDisclosingNode(this.lastClicked);
+        this.setDisclosingNode(document.activeElement);
         this.panelNode.focus();
@@ -121,3 +119,3 @@ return;
       if (!this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
-        var _this$disclosingNode;
+        var _this$disclosingNode, _this$mainNode;
         if ((_this$disclosingNode = this.disclosingNode) !== null && _this$disclosingNode !== void 0 && _this$disclosingNode.focus) {
@@ -129,4 +127,8 @@ // Return focus to the disclosing element
         }
-        // The disclosing element doesn't exist or isn't focusable, return focus to the main div
-        this.mainNode.current.focus();
+        // The disclosing element doesn't exist or isn't focusable, return focus to the main div or body
+        if ((_this$mainNode = this.mainNode) !== null && _this$mainNode !== void 0 && _this$mainNode.current) {
+          this.mainNode.current.focus();
+        } else {
+          document.body.focus();
+        }
       }
@@ -143,7 +145,2 @@ }
   }, {
-    key: "setLastClicked",
-    value: function setLastClicked(event) {
-      this.lastClicked = event.target;
-    }
-  }, {
     key: "setDisclosingNode",
@@ -207,5 +204,3 @@ value: function setDisclosingNode(node) {
         ref: this.mainNode,
-        role: "main",
-        onClick: this.setLastClicked,
-        onKeyUp: this.setLastClicked
+        role: "main"
       }, /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
@@ -218,3 +213,3 @@ tabIndex: "-1",
       }), mainContent);
-      var content = panelPosition === SlidePanelPositions.START ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panelDiv, mainDiv) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mainDiv, panelDiv);
+      var content = panelPosition === SlidePanelPositions.START ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panelDiv, mainContent && mainDiv) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mainContent && mainDiv, panelDiv);
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, customProps, {
@@ -221,0 +216,0 @@ className: slidePanelClassNames,

package.json

 {
   "name": "terra-slide-panel",
-  "main": "lib/SlidePanel.js",
-  "version": "3.47.0",
+  "version": "3.48.0",
   "description": "The Terra SlidePanel component is a progressive disclosure mechanism that allows additional content to be shown and hidden in a variety of ways.",
+  "author": "Cerner Corporation",
   "repository": {
@@ -11,21 +11,25 @@ "type": "git",
   },
+  "bugs": {
+    "url": "https://github.com/cerner/terra-framework/issues"
+  },
+  "homepage": "https://github.com/cerner/terra-framework#readme",
+  "license": "Apache-2.0",
   "keywords": [
     "Cerner",
+    "Framework",
+    "SlidePanel",
     "Terra",
-    "Framework",
     "terra-slide-panel",
-    "SlidePanel",
     "UI"
   ],
-  "author": "Cerner Corporation",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/cerner/terra-framework/issues"
-  },
-  "homepage": "https://github.com/cerner/terra-framework#readme",
-  "peerDependencies": {
-    "react": "^16.8.5",
-    "react-dom": "^16.8.5",
-    "react-intl": ">=2.8.0, <6.0.0"
-  },
+  "main": "lib/SlidePanel.js",
+  "files": [
+    "lib",
+    "src",
+    "translations",
+    "CHANGELOG.md",
+    "LICENSE",
+    "NOTICE",
+    "README.md"
+  ],
   "dependencies": {
@@ -38,2 +42,7 @@ "classnames": "^2.2.5",
   },
+  "peerDependencies": {
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-intl": "^2.8.0 || 3 || 4 || 5"
+  },
   "scripts": {
@@ -52,3 +61,3 @@ "compile": "babel --root-mode upward src --out-dir lib --copy-files",
   },
-  "gitHead": "d5d24e2cc0be117649524667c189cdc06a642624"
+  "gitHead": "6721741495eabed7a260b91b9cab3082498e7cf7"
 }

src/SlidePanel.jsx

@@ -93,3 +93,2 @@ import React from 'react';
     this.mainNode = React.createRef();
-    this.setLastClicked = this.setLastClicked.bind(this);
     this.setDisclosingNode = this.setDisclosingNode.bind(this);
@@ -102,3 +101,3 @@ this.mainAriaDescribedByID = `detail-panel-warning-${uuidv4()}`;
       // Save the disclosing node for returning focus when panel is closed
-      this.setDisclosingNode(this.lastClicked);
+      this.setDisclosingNode(document.activeElement);
       this.panelNode.focus();
@@ -115,4 +114,8 @@ return;
       }
-      // The disclosing element doesn't exist or isn't focusable, return focus to the main div
-      this.mainNode.current.focus();
+      // The disclosing element doesn't exist or isn't focusable, return focus to the main div or body
+      if (this.mainNode?.current) {
+        this.mainNode.current.focus();
+      } else {
+        document.body.focus();
+      }
     }
@@ -128,6 +131,2 @@ }
 
-  setLastClicked(event) {
-    this.lastClicked = event.target;
-  }
-
   setDisclosingNode(node) {
@@ -196,4 +195,2 @@ if (node) {
         role="main"
-        onClick={this.setLastClicked}
-        onKeyUp={this.setLastClicked}
       >
@@ -212,7 +209,7 @@ <VisuallyHiddenText
         {panelDiv}
-        {mainDiv}
+        {mainContent && mainDiv}
       </React.Fragment>
     ) : (
       <React.Fragment>
-        {mainDiv}
+        {mainContent && mainDiv}
         {panelDiv}
@@ -219,0 +216,0 @@ </React.Fragment>

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

Worsened metrics

Total package byte prevSize

57240

decreased by-23.89%

Number of package files

22

decreased by-8.33%

Lines of code

457

decreased by-44.2%

Published versions last year

6

decreased by-14.29%

No dependency changes