@ausbom/modal 0.1.11 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/Modal.js CHANGED
@@ -1,2 +1,2 @@
1
- "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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));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"));var Modal=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Modal,_React$Component);function Modal(props){var _this;(0,_classCallCheck2["default"])(this,Modal);_this=(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(Modal).call(this,props));(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"startOfModalRef",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
2
- },{key:"renderTitle",value:function renderTitle(title,titleId){if(typeof title==="string"){return _react["default"].createElement("h2",{id:titleId,className:"bom-modal-title"},title)}return title}},{key:"render",value:function render(){var _this2=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");return _react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this2.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:{labelledby:titleId},onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this2.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="".concat(_this2.state.scrollbarWidth,"px");modalParent.style.marginLeft="calc(-100% + 100vw)";modalParent.style.overflow="hidden"}if(_this2.startOfModalRef&&_this2.startOfModalRef.focus){_this2.startOfModalRef.focus()}},0)},onAfterClose:function onAfterClose(){setTimeout(function(){var modalRef=_this2.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="auto";modalParent.style.marginLeft="auto";modalParent.style.overflow="auto"}},0)},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),_react["default"].createElement("div",{className:"bom-modal-header"},_react["default"].createElement("span",{className:"bom-modal-header__start-vh",tabIndex:-1,ref:function ref(n){_this2.startOfModalRef=n}},"Start of modal window"),this.renderTitle(title,titleId)),_react["default"].createElement("div",{className:"bom-modal-body"},children),!hideCloseButton&&_react["default"].createElement("button",{className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",onClick:function onClick(){onRequestClose()}},_react["default"].createElement(_icon.SystemIcon,{icon:_CutCross["default"],size:16,"aria-hidden":true}),_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});var _default=Modal;exports["default"]=_default;
1
+ "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),"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
2
+ },{key:"renderTitle",value:function renderTitle(title,titleId){if(typeof title==="string"){return/*#__PURE__*/_react["default"].createElement("h2",{id:titleId,className:"bom-modal-title"},title)}return title}},{key:"render",value:function render(){var _this2=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");return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this2.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:{labelledby:titleId},onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this2.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="".concat(_this2.state.scrollbarWidth,"px");modalParent.style.marginLeft="calc(-100% + 100vw)";modalParent.style.overflow="hidden"}if(_this2.startOfModalRef&&_this2.startOfModalRef.focus){_this2.startOfModalRef.focus()}},0)},onAfterClose:function onAfterClose(){setTimeout(function(){var modalRef=_this2.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="auto";modalParent.style.marginLeft="auto";modalParent.style.overflow="auto"}},0)},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-header"},/*#__PURE__*/_react["default"].createElement("span",{className:"bom-modal-header__start-vh",tabIndex:-1,ref:function ref(n){_this2.startOfModalRef=n}},"Start of modal window"),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});var _default=Modal;exports["default"]=_default;
@@ -136,6 +136,8 @@
136
136
 
137
137
  &:focus {
138
138
  @include bom-focus-outline();
139
+
140
+ position: absolute;
139
141
  }
140
142
  }
141
143
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ausbom/modal",
3
- "version": "0.1.11",
3
+ "version": "0.1.14",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "",
@@ -37,9 +37,9 @@
37
37
  "react": ">= 16.3.x"
38
38
  },
39
39
  "dependencies": {
40
- "@ausbom/icon": "^0.6.0",
41
- "@ausbom/styles": "^0.6.0",
42
- "react-modal": "3.11.2"
40
+ "@ausbom/icon": "^0.16.2",
41
+ "@ausbom/styles": "^0.9.2",
42
+ "react-modal": "^3.14.4"
43
43
  },
44
- "gitHead": "e50e16a5f754ae14a655b00857b7e87e36060618"
44
+ "gitHead": "0bf333c15b131c52eb8c63b1ee2f89ffe01c7ff4"
45
45
  }
package/CHANGELOG.md DELETED
@@ -1,145 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
-
6
- ## [0.1.11](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.10...@ausbom/modal@0.1.11) (2020-12-01)
7
-
8
-
9
- ### Bug Fixes
10
-
11
- * a11y tabbing order of close button in modal ([#347](https://github.com/AusBOM/bom-design-system/issues/347)) ([bae416c](https://github.com/AusBOM/bom-design-system/commit/bae416c3e52c734e42a7a232c9e3d215be51c943))
12
-
13
-
14
-
15
-
16
-
17
- ## [0.1.10](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.9...@ausbom/modal@0.1.10) (2020-10-20)
18
-
19
-
20
- ### Bug Fixes
21
-
22
- * added flexibility to title prop to either be a string or reactnode ([#340](https://github.com/AusBOM/bom-design-system/issues/340)) ([a85ebdb](https://github.com/AusBOM/bom-design-system/commit/a85ebdb3b216536cbac6c7751c44dd781526ecfd))
23
-
24
-
25
-
26
-
27
-
28
- <a name="0.1.9"></a>
29
- ## [0.1.9](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.8...@ausbom/modal@0.1.9) (2020-06-15)
30
-
31
- **Note:** Version bump only for package @ausbom/modal
32
-
33
-
34
-
35
-
36
-
37
- <a name="0.1.8"></a>
38
- ## [0.1.8](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.7...@ausbom/modal@0.1.8) (2020-06-15)
39
-
40
- **Note:** Version bump only for package @ausbom/modal
41
-
42
-
43
-
44
-
45
-
46
- <a name="0.1.7"></a>
47
- ## [0.1.7](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.6...@ausbom/modal@0.1.7) (2020-06-15)
48
-
49
-
50
- ### Bug Fixes
51
-
52
- * **modal:** content jumping when activating modal ([b90e102](https://github.com/AusBOM/bom-design-system/commit/b90e102))
53
- * added logic to calculate margin offset to prevent content jumping ([240c1e0](https://github.com/AusBOM/bom-design-system/commit/240c1e0))
54
-
55
-
56
-
57
-
58
-
59
- <a name="0.1.6"></a>
60
- ## [0.1.6](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.5...@ausbom/modal@0.1.6) (2020-05-01)
61
-
62
-
63
- ### Bug Fixes
64
-
65
- * added ie11 specific style for modal scroll ([#306](https://github.com/AusBOM/bom-design-system/issues/306)) ([49dbb59](https://github.com/AusBOM/bom-design-system/commit/49dbb59))
66
-
67
-
68
-
69
-
70
-
71
- <a name="0.1.5"></a>
72
- ## [0.1.5](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.4...@ausbom/modal@0.1.5) (2020-04-21)
73
-
74
-
75
- ### Bug Fixes
76
-
77
- * modal double scrollbar issue ([#302](https://github.com/AusBOM/bom-design-system/issues/302)) ([f0bf73a](https://github.com/AusBOM/bom-design-system/commit/f0bf73a))
78
-
79
-
80
-
81
-
82
-
83
- <a name="0.1.4"></a>
84
- ## [0.1.4](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.3...@ausbom/modal@0.1.4) (2020-04-16)
85
-
86
-
87
- ### Bug Fixes
88
-
89
- * lowered the default zIndex of a modal ([#301](https://github.com/AusBOM/bom-design-system/issues/301)) ([befadaa](https://github.com/AusBOM/bom-design-system/commit/befadaa))
90
-
91
-
92
-
93
-
94
-
95
- <a name="0.1.3"></a>
96
- ## [0.1.3](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.2...@ausbom/modal@0.1.3) (2020-04-15)
97
-
98
-
99
- ### Bug Fixes
100
-
101
- * renamed modifier classnames for before and after close for IE11 ([0d5f73d](https://github.com/AusBOM/bom-design-system/commit/0d5f73d))
102
-
103
-
104
-
105
-
106
-
107
- <a name="0.1.2"></a>
108
- ## [0.1.2](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.1...@ausbom/modal@0.1.2) (2020-03-20)
109
-
110
-
111
- ### Bug Fixes
112
-
113
- * centers modal correctly in ie11 ([810f59d](https://github.com/AusBOM/bom-design-system/commit/810f59d))
114
- * fixes firefox flexbox bug for modals ([e460bba](https://github.com/AusBOM/bom-design-system/commit/e460bba))
115
- * fixes tests after modal update ([2b83dde](https://github.com/AusBOM/bom-design-system/commit/2b83dde))
116
- * workaround for ios voiceover not focusing aria-modal ([1629abf](https://github.com/AusBOM/bom-design-system/commit/1629abf))
117
-
118
-
119
-
120
-
121
-
122
- <a name="0.1.1"></a>
123
- ## [0.1.1](https://github.com/AusBOM/bom-design-system/compare/@ausbom/modal@0.1.0...@ausbom/modal@0.1.1) (2020-02-06)
124
-
125
-
126
- ### Bug Fixes
127
-
128
- * a11y[#5](https://github.com/AusBOM/bom-design-system/issues/5) add focusable false toicons,add ariahidden to decorative svg ([4321224](https://github.com/AusBOM/bom-design-system/commit/4321224))
129
-
130
-
131
-
132
-
133
-
134
- <a name="0.1.0"></a>
135
- # 0.1.0 (2020-02-03)
136
-
137
-
138
- ### Bug Fixes
139
-
140
- * removes api doc link from modal and template ([60a78e3](https://github.com/AusBOM/bom-design-system/commit/60a78e3))
141
-
142
-
143
- ### Features
144
-
145
- * adds modal component ([62a3e95](https://github.com/AusBOM/bom-design-system/commit/62a3e95))