@ausbom/modal 0.1.25 → 0.1.26

package/lib/Modal.js

@@ -1,5 +1,5 @@
 "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));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 _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _CutCross=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/CutCross16"));var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _reactModal=_interopRequireDefault(require("react-modal"));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}}var focusableSelectors=["a[href]:not([tabindex^=\"-\"])","area[href]:not([tabindex^=\"-\"])","input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])","input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])","select:not([disabled]):not([tabindex^=\"-\"])","textarea:not([disabled]):not([tabindex^=\"-\"])","button:not([disabled]):not([tabindex^=\"-\"])","iframe:not([tabindex^=\"-\"])","audio[controls]:not([tabindex^=\"-\"])","video[controls]:not([tabindex^=\"-\"])","[contenteditable]:not([tabindex^=\"-\"])","[tabindex]:not([tabindex^=\"-\"])"];var Modal=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Modal,_React$Component);var _super=_createSuper(Modal);function Modal(props){var _this;(0,_classCallCheck2["default"])(this,Modal);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"startOfModalRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"titleModalRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"modalRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"renderHeader",function(){var _this$props=_this.props,a11yId=_this$props.a11yId,closeButtonLabel=_this$props.closeButtonLabel,hideCloseButton=_this$props.hideCloseButton,onRequestClose=_this$props.onRequestClose,title=_this$props.title,titleLabel=_this$props.titleLabel,titleLabelPreamble=_this$props.titleLabelPreamble;var titleId="".concat(a11yId,"_modal");var hasNoTitle=!title||typeof title!=="string"||typeof title==="string"&&title.trim()==="";return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({ref:function ref(n){_this.titleModalRef=n},className:(0,_classnames["default"])("bom-modal-header",{"bom-modal-header--no-title":hasNoTitle})},hasNoTitle&&{"aria-label":"".concat(titleLabelPreamble," ").concat(titleLabel).trim()}),/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-header__title")},_this.renderTitle(title,titleId)),!hideCloseButton&&/*#__PURE__*/_react["default"].createElement("button",{className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",onClick:function onClick(){onRequestClose()}},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{icon:_CutCross["default"],size:16,"aria-hidden":true}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-modal-close__label"},closeButtonLabel)))});_this.state={scrollbarWidth:0};_this.updateScrollBarWidth=_this.updateScrollBarWidth.bind((0,_assertThisInitialized2["default"])(_this));return _this}(0,_createClass2["default"])(Modal,[{key:"updateScrollBarWidth",value:function updateScrollBarWidth(){this.setState({scrollbarWidth:window.innerWidth-document.body.clientWidth})}},{key:"componentDidMount",value:function componentDidMount(){this.updateScrollBarWidth();window.addEventListener("resize",this.updateScrollBarWidth)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.updateScrollBarWidth)}// eslint-disable-next-line class-methods-use-this
-},{key:"renderTitle",value:function renderTitle(title,titleId){var _this2=this;if(typeof title!=="string"){return title}return/*#__PURE__*/_react["default"].createElement("h1",{"aria-label":"".concat(this.props.titleLabelPreamble," ").concat(this.props.titleLabel||title),className:"bom-modal-title",id:titleId,ref:function ref(n){_this2.startOfModalRef=n},tabIndex:-1},title)}// Returns the HTML Markup that renders the header of a modal window.
+},{key:"renderTitle",value:function renderTitle(title,titleId){var _this2=this;if(typeof title!=="string"){return title}return/*#__PURE__*/_react["default"].createElement("h1",{"aria-label":"".concat(this.props.titleLabelPreamble," ").concat(this.props.titleLabel||title),className:"bom-modal-title",id:titleId,ref:function ref(n){_this2.startOfModalRef=n},tabIndex:-1},title)}// Returns the JSX code that renders the header of a modal component.
 },{key:"render",value:function render(){var _this3=this;var _this$props2=this.props,aria=_this$props2.aria,isOpen=_this$props2.isOpen,className=_this$props2.className,children=_this$props2.children,onRequestClose=_this$props2.onRequestClose,zIndex=_this$props2.zIndex,restProps=(0,_objectWithoutProperties2["default"])(_this$props2,["aria","isOpen","className","children","onRequestClose","zIndex"]);return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this3.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:aria,onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this3.modalRef,startOfModalRef=_this3.startOfModalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="".concat(_this3.state.scrollbarWidth,"px");modalParent.style.marginLeft="calc(-100% + 100vw)";modalParent.style.overflow="hidden";var focusableElements=modalRef.node.querySelectorAll(focusableSelectors.join(", "));// The first focusable element within the modal window
 var firstTabStop=focusableElements[0];// The last focusable element within the modal window
 var lastTabStop=focusableElements[focusableElements.length-1];if(startOfModalRef){startOfModalRef.focus()}else if(modalRef&&modalRef.focus){modalRef.focus()}modalRef.node.addEventListener("keydown",function(e){// Listen for the Tab key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/modal",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.12.0",
     "react-modal": "^3.14.4"
   },
-  "gitHead": "fb62c37ab181fb717eee558a7c257bf18f346c57"
+  "gitHead": "886b53acb28e0f7b29f4bd43f4cb739ac86d5d49"
 }