@ausbom/modal 0.1.28 → 0.1.29

package/lib/Modal.js

@@ -1,13 +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 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 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,role=_this$props2.role,restProps=(0,_objectWithoutProperties2["default"])(_this$props2,["aria","isOpen","className","children","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";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
-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
-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: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("div",{className:"bom-modal-body"},this.renderHeader(),children))}}]);return Modal}(_react["default"].Component);(0,_defineProperty2["default"])(Modal,"defaultProps",{isOpen:false,onRequestClose:function onRequestClose(){return undefined},closeButtonLabel:"Close modal window",hideCloseButton:false,role:false,title:/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null),titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;
+"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;

package/lib/scss/module.scss

@@ -70,12 +70,10 @@
 
   .bom-modal-header__title {
     flex: 1;
-    margin-right: -16px;
     margin-top: 32px;
     margin-bottom: 20px;
 
     @include bp(m) {
-      margin-right: -24px;
       margin-top: 40px;
       margin-bottom: 24px;
     }
@@ -111,12 +109,17 @@
 }
 
 .bom-modal-body {
+  position: relative;
   background: get-palette-color('neutral.white');
   overflow: auto;
   padding: 0 16px;
   display: flex;
   flex-direction: column;
 
+  &--hidden-close-button {
+    padding-right: 16px;
+  }
+
   &::after {
     flex: 0 0 16px;
     content: '';
@@ -125,6 +128,10 @@
   @include bp(m) {
     padding: 0 48px;
 
+    &--hidden-close-button {
+      padding-right: 48px;
+    }
+
     &::after {
       flex: 0 0 48px;
       content: '';
@@ -132,28 +139,38 @@
   }
 }
 
+.bom-modal-close-parent {
+  position: absolute;
+  margin: 0;
+  right: 0;
+}
+
+@include bp(m) {
+  .bom-modal-close-parent {
+    padding: 24px;
+  }
+}
+
 .bom-modal-close {
-  display: block;
+  @extend .bom-modal-close-parent;
+
   background: none;
   border: none;
   padding: 16px;
-  height: 48px;
-  width: 48px;
-  margin-right: -16px;
-  flex: 0;
 
   &:focus {
-    @include bom-focus-state($offset: -8px);
+    @include bom-focus-state($offset: -12px);
+
+    position: absolute;
   }
 
   @include bp(m) {
-    margin-right: -48px;
     padding: 24px;
-    height: 64px;
-    width: 64px;
 
     &:focus {
-      @include bom-focus-state($offset: -16px);
+      @include bom-focus-state($offset: -20px);
+
+      position: absolute;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/modal",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.12.0",
     "react-modal": "^3.14.4"
   },
-  "gitHead": "b2de93a1f14d48f7b813da887777f518e1b2bf01"
+  "gitHead": "6c4bf49f892c37ef55c28142d5bce14e23ce2305"
 }