@ausbom/modal 0.1.22 → 0.1.24
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.d.ts +2 -0
- package/lib/Modal.js +5 -6
- package/lib/scss/module.scss +55 -50
- package/package.json +2 -2
package/lib/Modal.d.ts
CHANGED
package/lib/Modal.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var
|
|
2
|
-
},{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)}
|
|
3
|
-
var
|
|
1
|
+
"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
|
|
2
|
+
},{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 window.
|
|
3
|
+
},{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
|
|
4
4
|
var firstTabStop=focusableElements[0];// The last focusable element within the modal window
|
|
5
|
-
var lastTabStop=focusableElements[focusableElements.length-1]
|
|
6
|
-
firstTabStop.focus();modalRef.node.addEventListener("keydown",function(e){// Listen for the Tab key
|
|
5
|
+
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
|
|
7
6
|
if(e.keyCode!==9)return;// If Shift + Tab
|
|
8
7
|
if(e.shiftKey){// If the current element in focus is the first focusable element within the modal window...
|
|
9
8
|
if(document.activeElement===firstTabStop){e.preventDefault();// ...jump to the last focusable element
|
|
@@ -11,4 +10,4 @@ lastTabStop.focus()}// if Tab
|
|
|
11
10
|
}else{// If the current element in focus is the last focusable element within the modal window...
|
|
12
11
|
// eslint-disable-next-line no-lonely-if
|
|
13
12
|
if(document.activeElement===lastTabStop){e.preventDefault();// ...jump to the first focusable element
|
|
14
|
-
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",
|
|
13
|
+
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",{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,title:/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null),titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;
|
package/lib/scss/module.scss
CHANGED
|
@@ -65,32 +65,53 @@
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.bom-modal-header {
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
display: flex;
|
|
69
|
+
background: get-palette-color('neutral.white');
|
|
70
|
+
|
|
71
|
+
.bom-modal-header__title {
|
|
72
|
+
flex: 1;
|
|
73
|
+
margin-right: -16px;
|
|
74
|
+
margin-top: 32px;
|
|
75
|
+
margin-bottom: 20px;
|
|
76
|
+
|
|
77
|
+
@include bp(m) {
|
|
78
|
+
margin-right: -24px;
|
|
79
|
+
margin-top: 40px;
|
|
80
|
+
margin-bottom: 24px;
|
|
81
|
+
}
|
|
70
82
|
|
|
71
|
-
|
|
72
|
-
|
|
83
|
+
.bom-modal-title {
|
|
84
|
+
margin-block: 0;
|
|
85
|
+
|
|
86
|
+
&:focus {
|
|
87
|
+
outline: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@include bom-typography(
|
|
91
|
+
$style-name: 'heading-m',
|
|
92
|
+
$large: false,
|
|
93
|
+
$dark: false,
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
@include bp(m) {
|
|
97
|
+
@include bom-typography(
|
|
98
|
+
$style-name: 'heading-m',
|
|
99
|
+
$large: true,
|
|
100
|
+
$dark: false,
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
73
104
|
}
|
|
74
105
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
&.bom-modal-header--no-title {
|
|
79
|
-
padding: 0 48px 32px 48px;
|
|
106
|
+
&--no-title {
|
|
107
|
+
.bom-modal-header__title {
|
|
108
|
+
margin: 0;
|
|
80
109
|
}
|
|
81
110
|
}
|
|
82
111
|
}
|
|
83
112
|
|
|
84
|
-
.bom-modal-header__inner {
|
|
85
|
-
@include header-padding();
|
|
86
|
-
|
|
87
|
-
display: flex;
|
|
88
|
-
align-items: center;
|
|
89
|
-
justify-content: flex-end;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
113
|
.bom-modal-body {
|
|
93
|
-
background: white;
|
|
114
|
+
background: get-palette-color('neutral.white');
|
|
94
115
|
overflow: auto;
|
|
95
116
|
padding: 0 16px;
|
|
96
117
|
display: flex;
|
|
@@ -111,45 +132,29 @@
|
|
|
111
132
|
}
|
|
112
133
|
}
|
|
113
134
|
|
|
114
|
-
.bom-modal-title {
|
|
115
|
-
margin: 0;
|
|
116
|
-
|
|
117
|
-
&:focus {
|
|
118
|
-
outline: none;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
@include bom-typography(
|
|
122
|
-
$style-name: 'heading-m',
|
|
123
|
-
$large: false,
|
|
124
|
-
$dark: false,
|
|
125
|
-
);
|
|
126
|
-
|
|
127
|
-
@include bp(m) {
|
|
128
|
-
@include bom-typography(
|
|
129
|
-
$style-name: 'heading-m',
|
|
130
|
-
$large: true,
|
|
131
|
-
$dark: false,
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
135
|
.bom-modal-close {
|
|
136
|
+
display: block;
|
|
137
137
|
background: none;
|
|
138
138
|
border: none;
|
|
139
|
-
padding:
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
right: 16px;
|
|
139
|
+
padding: 16px;
|
|
140
|
+
height: 48px;
|
|
141
|
+
width: 48px;
|
|
142
|
+
margin-right: -16px;
|
|
143
|
+
flex: 0;
|
|
143
144
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
right: 22px;
|
|
145
|
+
&:focus {
|
|
146
|
+
@include bom-focus-state($offset: -8px);
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
@include bp(m) {
|
|
150
|
+
margin-right: -48px;
|
|
151
|
+
padding: 24px;
|
|
152
|
+
height: 64px;
|
|
153
|
+
width: 64px;
|
|
151
154
|
|
|
152
|
-
|
|
155
|
+
&:focus {
|
|
156
|
+
@include bom-focus-state($offset: -16px);
|
|
157
|
+
}
|
|
153
158
|
}
|
|
154
159
|
}
|
|
155
160
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/modal",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.24",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"@ausbom/styles": "^0.12.0",
|
|
42
42
|
"react-modal": "^3.14.4"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "9609df9dfb141839d7fbaddfc68ad4f14a9bba6d"
|
|
45
45
|
}
|