@ausbom/modal 0.1.35 → 0.2.0

package/README.md

@@ -2,6 +2,7 @@
 
 > Use modals for pop-up windows and dialogs.
 
+
 ### Installation
 
 ```bash
@@ -14,3 +15,4 @@ npm install @ausbom/modal
 import Modal from '@ausbom/modal'
 import React from 'react'
 ```
+

package/lib/Modal.d.ts

@@ -2,16 +2,17 @@ import React from 'react'
 import ReactModal from 'react-modal'
 
 export interface IProps {
-  aria?: ReactModal.Aria
+  aria?: ReactModal.Props['aria']
+  ariaHideApp?: ReactModal.Props['ariaHideApp']
   a11yId: string
   title?: React.ReactNode
   titleLabel?: string
   titleLabelPreamble?: string
   className?: string
   children?: React.ReactNode
-  isOpen: boolean
+  isOpen: ReactModal.Props['isOpen']
   role?: ReactModal.Props['role']
-  onRequestClose?: () => void
+  onRequestClose?: ReactModal.Props['onRequestClose']
   closeButtonLabel?: string
   hideCloseButton?: boolean
   zIndex?: number

package/lib/Modal.js

@@ -1,2 +1,2 @@
 "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 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),"closeBtnRef",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,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()}),title!=null&&/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-header__title")},_this.renderTitle(title,titleId)))});_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)}},{key:"renderTitle",value:function renderTitle(title,titleId){var _this2=this;if(typeof title!=="string"){return title}var _this$props2=this.props,titleLabel=_this$props2.titleLabel,titleLabelPreamble=_this$props2.titleLabelPreamble;return/*#__PURE__*/_react["default"].createElement("h1",{"aria-label":"".concat(titleLabelPreamble," ").concat(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$props3=this.props,aria=_this$props3.aria,isOpen=_this$props3.isOpen,className=_this$props3.className,children=_this$props3.children,hideCloseButton=_this$props3.hideCloseButton,closeButtonLabel=_this$props3.closeButtonLabel,onRequestClose=_this$props3.onRequestClose,zIndex=_this$props3.zIndex,role=_this$props3.role,restProps=(0,_objectWithoutProperties2["default"])(_this$props3,["aria","isOpen","className","children","hideCloseButton","closeButtonLabel","onRequestClose","zIndex","role"]);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";if(startOfModalRef){startOfModalRef.focus()}else if(modalRef&&modalRef.focus){modalRef.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:role,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(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-body",{"bom-modal-body--hidden-close-button":hideCloseButton})},this.renderHeader(),children,!hideCloseButton&&/*#__PURE__*/_react["default"].createElement("button",{ref:function ref(n){_this3.closeBtnRef=n},className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",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,role:"none",titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;
+},{key:"render",value:function render(){var _this3=this;var _this$props3=this.props,aria=_this$props3.aria,ariaHideApp=_this$props3.ariaHideApp,isOpen=_this$props3.isOpen,className=_this$props3.className,children=_this$props3.children,hideCloseButton=_this$props3.hideCloseButton,closeButtonLabel=_this$props3.closeButtonLabel,onRequestClose=_this$props3.onRequestClose,zIndex=_this$props3.zIndex,role=_this$props3.role,restProps=(0,_objectWithoutProperties2["default"])(_this$props3,["aria","ariaHideApp","isOpen","className","children","hideCloseButton","closeButtonLabel","onRequestClose","zIndex","role"]);return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this3.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:aria,ariaHideApp:ariaHideApp,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";if(startOfModalRef){startOfModalRef.focus()}else if(modalRef&&modalRef.focus){modalRef.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:role,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(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-body",{"bom-modal-body--hidden-close-button":hideCloseButton})},this.renderHeader(),children,!hideCloseButton&&/*#__PURE__*/_react["default"].createElement("button",{ref:function ref(n){_this3.closeBtnRef=n},className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",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,role:"none",titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/modal",
-  "version": "0.1.35",
+  "version": "0.2.0",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.13.0",
     "react-modal": "^3.14.4"
   },
-  "gitHead": "fb700e0e3fdab1b33a91603366afa9bb05cfc2f2"
+  "gitHead": "c4707bf7c12a76ed309c87c070215babb7676779"
 }