@ausbom/modal 0.1.21 → 0.1.23

package/lib/Modal.d.ts

@@ -1,6 +1,8 @@
 import React from 'react'
+import ReactModal from 'react-modal'
 
 export interface IProps {
+  aria?: ReactModal.Aria
   a11yId: string
   title?: React.ReactNode
   titleLabel?: string

package/lib/Modal.js

@@ -1,9 +1,7 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));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 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);_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)}},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,isOpen=_this$props.isOpen,a11yId=_this$props.a11yId,className=_this$props.className,children=_this$props.children,onRequestClose=_this$props.onRequestClose,title=_this$props.title,closeButtonLabel=_this$props.closeButtonLabel,hideCloseButton=_this$props.hideCloseButton,zIndex=_this$props.zIndex,restProps=(0,_objectWithoutProperties2["default"])(_this$props,["isOpen","a11yId","className","children","onRequestClose","title","closeButtonLabel","hideCloseButton","zIndex"]);var titleId="".concat(a11yId,"_modal");var hasNoTitle=!title||typeof title!=="string"||typeof title==="string"&&title.trim()==="";return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this3.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:{labelledby:titleId},onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this3.modalRef;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";// Taken from - https://codepen.io/vavroom/pen/NpRLzE?editors=0010
-var focusableElementsString="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex=\"0\"], [tabindex=\"-1\"], [contenteditable]";var focusableElements=modalRef.node.querySelectorAll(focusableElementsString);// The first focusable element within the modal window
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));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);_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)}},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,aria=_this$props.aria,isOpen=_this$props.isOpen,a11yId=_this$props.a11yId,className=_this$props.className,children=_this$props.children,onRequestClose=_this$props.onRequestClose,title=_this$props.title,titleLabel=_this$props.titleLabel,titleLabelPreamble=_this$props.titleLabelPreamble,closeButtonLabel=_this$props.closeButtonLabel,hideCloseButton=_this$props.hideCloseButton,zIndex=_this$props.zIndex,restProps=(0,_objectWithoutProperties2["default"])(_this$props,["aria","isOpen","a11yId","className","children","onRequestClose","title","titleLabel","titleLabelPreamble","closeButtonLabel","hideCloseButton","zIndex"]);var titleId="".concat(a11yId,"_modal");var hasNoTitle=!title||typeof title!=="string"||typeof title==="string"&&title.trim()==="";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];// Focus the window
-firstTabStop.focus();modalRef.node.addEventListener("keydown",function(e){// Listen for the Tab key
+var lastTabStop=focusableElements[focusableElements.length-1];if(startOfModalRef){startOfModalRef.focus()}else{modalRef.focus()}modalRef.node.addEventListener("keydown",function(e){// Listen for the Tab key
 if(e.keyCode!==9)return;// If Shift + Tab
 if(e.shiftKey){// If the current element in focus is the first focusable element within the modal window...
 if(document.activeElement===firstTabStop){e.preventDefault();// ...jump to the last focusable element
@@ -11,4 +9,4 @@ lastTabStop.focus()}// if Tab
 }else{// If the current element in focus is the last focusable element within the modal window...
 // eslint-disable-next-line no-lonely-if
 if(document.activeElement===lastTabStop){e.preventDefault();// ...jump to the first focusable element
-firstTabStop.focus()}}})}},0)},onAfterClose:function onAfterClose(){setTimeout(function(){var modalRef=_this3.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="auto";modalParent.style.marginLeft="auto";modalParent.style.overflow="auto"}},0)},role:"none",closeTimeoutMS:200,portalClassName:"bom-modal-portal",overlayClassName:{base:"bom-modal-overlay",afterOpen:"bom-modal-overlay--after-open",beforeClose:"bom-modal-overlay--before-close"},className:{base:(0,_classnames["default"])(className,"bom-modal"),afterOpen:"bom-modal--after-open",beforeClose:"bom-modal--before-close"},bodyOpenClassName:"bom-modal-body--open",htmlOpenClassName:"bom-modal-html--open",onRequestClose:onRequestClose,style:{overlay:{zIndex:zIndex}}},restProps),/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({ref:function ref(n){_this3.titleModalRef=n},tabIndex:-1,className:(0,_classnames["default"])("bom-modal-header",{"bom-modal-header--no-title":hasNoTitle})},hasNoTitle&&{"aria-label":"".concat(this.props.titleLabelPreamble," ").concat(this.props.titleLabel).trim()}),this.renderTitle(title,titleId)),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-modal-body"},children),!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)))}}]);return Modal}(_react["default"].Component);(0,_defineProperty2["default"])(Modal,"defaultProps",{isOpen:false,onRequestClose:function onRequestClose(){return undefined},closeButtonLabel:"Close modal window",hideCloseButton:false,titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;
+firstTabStop.focus()}}})}},0)},onAfterClose:function onAfterClose(){setTimeout(function(){var modalRef=_this3.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="auto";modalParent.style.marginLeft="auto";modalParent.style.overflow="auto"}},0)},role:"none",closeTimeoutMS:200,portalClassName:"bom-modal-portal",overlayClassName:{base:"bom-modal-overlay",afterOpen:"bom-modal-overlay--after-open",beforeClose:"bom-modal-overlay--before-close"},className:{base:(0,_classnames["default"])(className,"bom-modal"),afterOpen:"bom-modal--after-open",beforeClose:"bom-modal--before-close"},bodyOpenClassName:"bom-modal-body--open",htmlOpenClassName:"bom-modal-html--open",onRequestClose:onRequestClose,style:{overlay:{zIndex:zIndex}}},restProps),/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({ref:function ref(n){_this3.titleModalRef=n},tabIndex:-1,className:(0,_classnames["default"])("bom-modal-header",{"bom-modal-header--no-title":hasNoTitle})},hasNoTitle&&{"aria-label":"".concat(titleLabelPreamble," ").concat(titleLabel).trim()}),this.renderTitle(title,titleId)),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-modal-body"},children),!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)))}}]);return Modal}(_react["default"].Component);(0,_defineProperty2["default"])(Modal,"defaultProps",{isOpen:false,onRequestClose:function onRequestClose(){return undefined},closeButtonLabel:"Close modal window",hideCloseButton:false,titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/modal",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "",
   "keywords": [],
   "author": "",
@@ -37,9 +37,9 @@
     "react": ">= 16.3.x"
   },
   "dependencies": {
-    "@ausbom/icon": "^0.19.0",
-    "@ausbom/styles": "^0.11.0",
+    "@ausbom/icon": "^0.19.1",
+    "@ausbom/styles": "^0.12.0",
     "react-modal": "^3.14.4"
   },
-  "gitHead": "be03014b0a1d45ff5acb59a14f8870818f570964"
+  "gitHead": "e21625433b7395c45eeb1be9e036548bcda18cd5"
 }