terra-slide-panel-manager - npm Package Compare versions

Comparing version 5.67.0 to 5.68.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 5.68.0 - (April 27, 2023)
+
+* Added
+  * Added programmatic context when slides are opened and closed.
+
 ## 5.67.0 - (April 12, 2023)
@@ -7,0 +12,0 @@

lib/SlidePanelManager.js

@@ -25,3 +25,3 @@ "use strict";
 var _terraSlidePanel = _interopRequireDefault(require("terra-slide-panel"));
-var _excluded = ["children", "level", "disclosureAccessory", "withDisclosureContainer"];
+var _excluded = ["children", "level", "disclosureAccessory", "withDisclosureContainer", "mainAriaLabel", "panelAriaLabel"];
 var _disclosureSizeToPane;
@@ -57,3 +57,12 @@ 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); }
    */
-  withDisclosureContainer: _propTypes.default.func
+  withDisclosureContainer: _propTypes.default.func,
+  /**
+    * The aria label for the panel region. This should be provided if the header does not contain a title
+    * to make the panel more accessible to assistive technologies.
+    */
+  panelAriaLabel: _propTypes.default.string,
+  /**
+    * The aria label for the main region.
+    */
+  mainAriaLabel: _propTypes.default.string
 };
@@ -84,5 +93,11 @@ var defaultProps = {
     _this.renderSlidePanel = _this.renderSlidePanel.bind((0, _assertThisInitialized2.default)(_this));
+    _this.setSlidePanel = _this.setSlidePanel.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
   (0, _createClass2.default)(SlidePanelManager, [{
+    key: "setSlidePanel",
+    value: function setSlidePanel(node) {
+      this.slidePanel = node;
+    }
+  }, {
     key: "renderSlidePanel",
@@ -96,2 +111,4 @@ value: function renderSlidePanel(manager) {
         withDisclosureContainer = _this$props.withDisclosureContainer,
+        mainAriaLabel = _this$props.mainAriaLabel,
+        panelAriaLabel = _this$props.panelAriaLabel,
         customProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
@@ -118,6 +135,7 @@ var isFullscreen;
         isOpen: manager.disclosure.isOpen,
+        setSlidePanelRef: this.setSlidePanel,
         panelContent: /*#__PURE__*/_react.default.createElement(_terraContentContainer.default, {
           fill: true,
           header: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerDataForPresentedComponent ? /*#__PURE__*/_react.default.createElement(_terraActionHeader.default, {
-            title: headerDataForPresentedComponent.title,
+            text: headerDataForPresentedComponent.title,
             onClose: manager.closeDisclosure,
@@ -129,4 +147,8 @@ level: level,
           items: manager.disclosure.components,
-          isAnimated: true
+          isAnimated: true,
+          focusRef: this.slidePanel,
+          slideAriaLabel: (headerDataForPresentedComponent === null || headerDataForPresentedComponent === void 0 ? void 0 : headerDataForPresentedComponent.title) || panelAriaLabel
         })),
+        panelAriaLabel: (headerDataForPresentedComponent === null || headerDataForPresentedComponent === void 0 ? void 0 : headerDataForPresentedComponent.title) || panelAriaLabel,
+        mainAriaLabel: mainAriaLabel,
         mainContent: manager.children.components
@@ -133,0 +155,0 @@ }));

package.json

 {
   "name": "terra-slide-panel-manager",
   "main": "lib/SlidePanelManager.js",
-  "version": "5.67.0",
+  "version": "5.68.0",
   "description": "A DisclosureManager implementation that presents disclosed content using a SlidePanel.",
@@ -36,7 +36,7 @@ "repository": {
     "terra-content-container": "^3.0.0",
-    "terra-slide-group": "^4.30.0",
-    "terra-slide-panel": "^3.38.1"
+    "terra-slide-group": "^4.31.0",
+    "terra-slide-panel": "^3.39.0"
   },
   "devDependencies": {
-    "terra-collapsible-menu-view": "^6.67.0"
+    "terra-collapsible-menu-view": "^6.68.0"
   },
@@ -50,3 +50,3 @@ "scripts": {
     "test": "npm run lint && npm run jest && npm run wdio",
-    "jest": "jest --config ../../jest.config.js",
+    "jest": "jest --config ../../jest.config.js ./tests/jest/SlidePanelManager.test.jsx",
     "wdio-default": "cd ../.. && terra wdio",
@@ -57,3 +57,3 @@ "wdio-lowlight": "cd ../.. && terra wdio --themes clinical-lowlight-theme",
   },
-  "gitHead": "78fd244b38c1eef125107438fa38d50dd668a16c"
+  "gitHead": "750799dcbe4aff7577e78b004d1d0356abb032b4"
 }

src/SlidePanelManager.jsx

@@ -36,2 +36,11 @@ import React from 'react';
   withDisclosureContainer: PropTypes.func,
+  /**
+    * The aria label for the panel region. This should be provided if the header does not contain a title
+    * to make the panel more accessible to assistive technologies.
+    */
+  panelAriaLabel: PropTypes.string,
+  /**
+    * The aria label for the main region.
+    */
+  mainAriaLabel: PropTypes.string,
 };
@@ -68,7 +77,18 @@
     this.renderSlidePanel = this.renderSlidePanel.bind(this);
+    this.setSlidePanel = this.setSlidePanel.bind(this);
   }
 
+  setSlidePanel(node) {
+    this.slidePanel = node;
+  }
+
   renderSlidePanel(manager) {
     const {
-      children, level, disclosureAccessory, withDisclosureContainer, ...customProps
+      children,
+      level,
+      disclosureAccessory,
+      withDisclosureContainer,
+      mainAriaLabel,
+      panelAriaLabel,
+      ...customProps
     } = this.props;
@@ -102,2 +122,3 @@
         isOpen={manager.disclosure.isOpen}
+        setSlidePanelRef={this.setSlidePanel}
         panelContent={(
@@ -110,3 +131,3 @@ <ContentContainer
                   <ActionHeader
-                    title={headerDataForPresentedComponent.title}
+                    text={headerDataForPresentedComponent.title}
                     onClose={manager.closeDisclosure}
@@ -123,5 +144,7 @@ level={level}
           >
-            <SlideGroup items={manager.disclosure.components} isAnimated />
+            <SlideGroup items={manager.disclosure.components} isAnimated focusRef={this.slidePanel} slideAriaLabel={headerDataForPresentedComponent?.title || panelAriaLabel} />
           </ContentContainer>
         )}
+        panelAriaLabel={headerDataForPresentedComponent?.title || panelAriaLabel}
+        mainAriaLabel={mainAriaLabel}
         mainContent={manager.children.components}
@@ -128,0 +151,0 @@ />

tests/jest/SlidePanelManager.test.jsx

 import React from 'react';
 import { withDisclosureManager } from 'terra-disclosure-manager';
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import { mountWithIntl, shallowWithIntl } from 'terra-enzyme-intl';
 import SlidePanelManager from '../../src/SlidePanelManager';
@@ -17,6 +19,17 @@
 
-    const result = mount(slidePanelManager);
-    expect(result).toMatchSnapshot();
+    const wrapper = mountWithIntl(slidePanelManager);
+    expect(wrapper).toMatchSnapshot();
   });
 
+  it('should set panelBehavior in SlidePanel with squish override', () => {
+    const slidePanelManager = (
+      <SlidePanelManager panelBehavior="squish">
+        <TestContainer />
+      </SlidePanelManager>
+    );
+
+    const slidePanelWrapper = shallowWithIntl(slidePanelManager).dive().dive().dive();
+    expect(slidePanelWrapper.prop('panelBehavior')).toEqual('squish');
+  });
+
   it('should render the SlidePanelManager with squish override', () => {
@@ -29,4 +42,4 @@ const slidePanelManager = (
 
-    const result = mount(slidePanelManager);
-    expect(result).toMatchSnapshot();
+    const wrapper = mountWithIntl(slidePanelManager);
+    expect(wrapper).toMatchSnapshot();
   });
@@ -41,4 +54,6 @@
 
-    const result = mount(slidePanelManager);
-    expect(result).toMatchSnapshot();
+    const wrapper = mountWithIntl(slidePanelManager);
+    expect(wrapper.prop('id')).toEqual('my-slide-panel-manager');
+    expect(wrapper.prop('className')).toEqual('test');
+    expect(wrapper).toMatchSnapshot();
   });
@@ -52,3 +67,3 @@
     );
-    const wrapper = mount(slidePanelManager);
+    const wrapper = mountWithIntl(slidePanelManager);
     expect(wrapper).toMatchSnapshot();
@@ -64,3 +79,3 @@ });
 
-    const wrapper = mount(slidePanelManager);
+    const wrapper = mountWithIntl(slidePanelManager);
 
@@ -92,3 +107,3 @@ return new Promise((resolve, reject) => {
 
-    const wrapper = mount(slidePanelManager);
+    const wrapper = mountWithIntl(slidePanelManager);
 
@@ -108,3 +123,3 @@ return new Promise((resolve, reject) => {
         wrapper.update();
-        expect(wrapper.exists('#disclosure-container')).toBe(true);
+        expect(wrapper.exists('#disclosure-container')).toBeTruthy();
         expect(wrapper.find('#disclosure-container')).toMatchSnapshot();
@@ -111,0 +126,0 @@ });

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

58612

increased by4.94%

Lines of code

675

increased by9.22%

Dependency changes

• Updatedterra-slide-group@^4.31.0

• Updatedterra-slide-panel@^3.39.0