Socket
Socket
Sign inDemoInstall

react-aria-modal

Package Overview
Dependencies
13
Maintainers
3
Versions
44
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.0.1 to 4.0.2

6

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog

## 4.0.2
- Update peer dependencies for React 17 (#127)
- Changed cursor in dialogStyle to `auto` (#124)
- Improve Documentation (#104)
## 4.0.1

@@ -7,0 +13,0 @@

52

dist/react-aria-modal.js
"use strict";
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -9,44 +9,18 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper2(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
return function () {
var Super = _getPrototypeOf(Derived),
result;
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
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; } }
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
return _possibleConstructorReturn(this, result);
};
}
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -62,8 +36,6 @@

var Modal =
/*#__PURE__*/
function (_React$Component) {
var Modal = /*#__PURE__*/function (_React$Component) {
_inherits(Modal, _React$Component);
var _super = _createSuper2(Modal);
var _super = _createSuper(Modal);

@@ -250,3 +222,3 @@ function Modal(props) {

maxWidth: '100%',
cursor: 'default',
cursor: 'auto',
outline: props.focusDialog ? 0 : null

@@ -253,0 +225,0 @@ };

6

package.json
{
"name": "react-aria-modal",
"version": "4.0.1",
"version": "4.0.2",
"description": "A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices",

@@ -39,3 +39,3 @@ "main": "dist/react-aria-modal.js",

"peerDependencies": {
"react": "^15.0.0 || ^16.0.0"
"react": ">= 15.0.0 < 18.0.0"
},

@@ -51,3 +51,3 @@ "devDependencies": {

"browserify": "^16.2.3",
"budo": "^11.6.0",
"budo": "^11.8.4",
"eslint": "^5.14.0",

@@ -54,0 +54,0 @@ "prettier": "1.16.4",

194

README.md

@@ -158,20 +158,42 @@ # react-aria-modal

## Props
## API
|Name| Type (`Default`) |
|---|---|
| [alert](#alert) | `Boolean` |
| [applicationNode](#applicationNode) | `DOM Node` |
| [dialogClass](#dialogClass) | `String` |
| [dialogId](#dialogId) | `String` (`'react-aria-modal-dialog'`) |
| [dialogStyle](#dialogStyle) | `Object` |
| [escapeExits](#escapeExits) | `Boolean` (`true`) |
| [focusDialog](#focusDialog) | `Boolean` |
| [focusTrapOptions](#focusTrapOptions) | `Object` |
| [focusTrapPaused](#focusTrapPaused) | `Boolean` |
| [getApplicationNode](#getApplicationNode) | `() => void` |
| [includeDefaultStyles](#includeDefaultStyles) | `Boolean` (`true`) |
| [initialFocus](#initialFocus) | `String` |
| [mounted](#mounted) | `Boolean` |
| [onEnter](#onEnter) | `() => void` |
| [onExit](#onExit) | `(event) => void` |
| [scrollDisabled](#scrollDisabled) | `Boolean` (`true`) |
| [titleId](#titleId) | `String` |
| [titleText](#titleText) | `String` |
| [underlayClass](#underlayClass) | `String` |
| [underlayClickExits](#underlayClickExits) | `Boolean` (`true`) |
| [underlayColor](#underlayColor) | `String` (`'rgba(0,0,0,0.5)'`) |
| [underlayStyle](#underlayStyle) | `Object` |
| [verticallyCenter](#verticallyCenter) | `Boolean` |
## Reference API
Any `data-*` or `aria-*` props that you provide will be passed directly to the modal's container `<div>`.
### onExit
### alert
Type: `Function`
_Type_: `Boolean`
This function handles the state change of *exiting* (or deactivating) the modal.
It will be invoked when the user clicks outside the modal (if `underlayClickExits={true}`, as is the default) or hits Escape (if `escapeExits={true}`, as is the default), and it receives the event that triggered it as its only argument.
If `true`, the modal will receive a `role` of `alertdialog`, instead of its default `dialog`. The `alertdialog` role should only be used when an alert, error, or warning occurs ([more info](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role)).
Maybe it's just a wrapper around `setState()`; or maybe you use some more involved Flux-inspired state management — whatever the case, this module leaves the state management up to *you* instead of making assumptions. That also makes it easier to create your own "close modal" buttons; because you have the function that closes the modal right there, written by you, at your disposal.
You may omit this prop if you don't want clicks outside the modal or Escape to close it, so don't want to provide a function.
### applicationNode
Type: `DOM Node`
_Type_: `DOM Node`

@@ -182,25 +204,5 @@ Provide your main application node here (which the modal should render outside of), and when the modal is open this application node will receive the attribute `aria-hidden="true"`. This [can help screen readers understand what's going on](https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box#Description).

### getApplicationNode
Type: `Function`
Same as `applicationNode`, but a function that returns the node instead of the node itself. This can be useful or necessary in a variety of situations, one of which is server-side React rendering. The function will not be called until after the component mounts, so it is safe to use browser globals and refer to DOM nodes within it (e.g. `document.getElementById(..)`), without ruining your server-side rendering.
### alert
Type: `Boolean`
If `true`, the modal will receive a `role` of `alertdialog`, instead of its default `dialog`. The `alertdialog` role should only be used when an alert, error, or warning occurs ([more info](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role)).
### includeDefaultStyles
Type: `Boolean`, Default: `true`
By default, styles are applied inline to the dialog and underlay portions of the component. However, you can disable all inline styles by setting `includeDefaultStyles` to `false`. If set, *you must specify all styles externally*, including positioning. This is helpful if your project uses external CSS assets.
*Note:* `underlayStyle` and `dialogStyle` can still be set inline, but these will be the only styles applied.
### dialogClass
Type: `String`
_Type_: `String`

@@ -213,4 +215,6 @@ Apply a class to the dialog in order to custom-style it.

Type: `String`, Default: `react-aria-modal-dialog`
_Type_: `String`
_Default_: `react-aria-modal-dialog`
Choose your own id attribute for the dialog element.

@@ -220,9 +224,17 @@

Type: `Object`
_Type_: `Object`
Customize properties of the `style` prop that is passed to the dialog.
### escapeExits
_Type_: `Boolean`
_Default_: `true`
By default, the Escape key exits the modal. Pass `false`, and it won't.
### focusDialog
Type: `Boolean`
_Type_: `Boolean`

@@ -235,5 +247,37 @@ By default, when the modal activates its first focusable child will receive focus.

### focusTrapOptions
_Type_: `Object`
Customize properties of the `focusTrapOptions` prop that is passed to the modal dialog's [focus trap](https://github.com/davidtheclark/focus-trap).
For example, you can use this prop if you need better control of where focus is returned.
### focusTrapPaused
_Type_: `Boolean`
If `true`, the modal dialog's [focus trap](https://github.com/davidtheclark/focus-trap) will be paused.
You won't typically need to use this prop.
It used to be that the typical reason for pausing a focus trap was to enable *nested* focus traps; but as of [focus-trap v4](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#400), the pausing and unpausing of hierachical traps is handled automatically.
### getApplicationNode
_Type_: `() => void`
Same as `applicationNode`, but a function that returns the node instead of the node itself. This can be useful or necessary in a variety of situations, one of which is server-side React rendering. The function will not be called until after the component mounts, so it is safe to use browser globals and refer to DOM nodes within it (e.g. `document.getElementById(..)`), without ruining your server-side rendering.
### includeDefaultStyles
_Type_: `Boolean`
_Default_: `true`
By default, styles are applied inline to the dialog and underlay portions of the component. However, you can disable all inline styles by setting `includeDefaultStyles` to `false`. If set, *you must specify all styles externally*, including positioning. This is helpful if your project uses external CSS assets.
*Note:* `underlayStyle` and `dialogStyle` can still be set inline, but these will be the only styles applied.
### initialFocus
Type: `String`
_Type_: `String`

@@ -246,3 +290,3 @@ By default, when the modal activates its first focusable child will receive focus. If, instead, you want to *identify a specific element that should receive initial focus*, pass a *selector string* to this prop. (That selector is passed to `document.querySelector()` to find the DOM node.)

Type: `Boolean`
_Type_: `Boolean`

@@ -288,3 +332,3 @@ By default, the modal is active when mounted, deactivated when unmounted.

Type: `Function`
_Type_: `() => void`

@@ -296,5 +340,24 @@ This function is called in the modal's `componentDidMount()` lifecycle method.

### onExit
_Type_: `(event) => void`
This function handles the state change of *exiting* (or deactivating) the modal.
It will be invoked when the user clicks outside the modal (if `underlayClickExits={true}`, as is the default) or hits Escape (if `escapeExits={true}`, as is the default), and it receives the event that triggered it as its only argument.
Maybe it's just a wrapper around `setState()`; or maybe you use some more involved Flux-inspired state management — whatever the case, this module leaves the state management up to *you* instead of making assumptions. That also makes it easier to create your own "close modal" buttons; because you have the function that closes the modal right there, written by you, at your disposal.
You may omit this prop if you don't want clicks outside the modal or Escape to close it, so don't want to provide a function.
### scrollDisabled
_Type_: `Boolean`
_Default_: `true`
If `true`, the modal dialog will prevent any scrolling behind the modal window.
### titleId
Type: `string`
_Type_: `String`

@@ -307,3 +370,3 @@ The id of the element that should be used as the modal's accessible title. This value is passed to the modal's `aria-labelledby` attribute.

Type: `string`
_Type_: `String`

@@ -314,14 +377,5 @@ A string to use as the modal's accessible title. This value is passed to the modal's `aria-label` attribute.

### underlayStyle
Type: `object`
Customize properties of the `style` prop that is passed to the underlay.
**The best way to add some vertical displacement to the dialog is to add top & bottom padding to the underlay**. This is illustrated in the demo examples.
### underlayClass
Type: `string`
_Type_: `String`

@@ -334,16 +388,14 @@ Apply a class to the underlay in order to custom-style it.

Type: `boolean`, Default: `true`
_Type_: `Boolean`
_Default_: `true`
By default, a click on the underlay will exit the modal. Pass `false`, and clicking on the underlay will do nothing.
### escapeExits
### underlayColor
Type: `boolean`, Default: `true`
_Type_: `String` (color value) or `false`
By default, the Escape key exits the modal. Pass `false`, and it won't.
_Default_: `rgba(0,0,0,0.5)`
### underlayColor
Type: `string` (color value) or `false`, Default: `rgba(0,0,0,0.5)`
If you want to change the underlay's color, you can do that with this prop.

@@ -354,30 +406,16 @@

### verticallyCenter
### underlayStyle
Type: `boolean`
_Type_: `Object`
If `true`, the modal's contents will be vertically (as well as horizontally) centered.
Customize properties of the `style` prop that is passed to the underlay.
### focusTrapPaused
**The best way to add some vertical displacement to the dialog is to add top & bottom padding to the underlay**. This is illustrated in the demo examples.
Type: `boolean`
### verticallyCenter
If `true`, the modal dialog's [focus trap](https://github.com/davidtheclark/focus-trap) will be paused.
_Type_: `Boolean`
You won't typically need to use this prop.
It used to be that the typical reason for pausing a focus trap was to enable *nested* focus traps; but as of [focus-trap v4](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#400), the pausing and unpausing of hierachical traps is handled automatically.
If `true`, the modal's contents will be vertically (as well as horizontally) centered.
### focusTrapOptions
Type: `object`
Customize properties of the `focusTrapOptions` prop that is passed to the modal dialog's [focus trap](https://github.com/davidtheclark/focus-trap).
For example, you can use this prop if you need better control of where focus is returned.
### scrollDisabled
Type: `boolean`, Default: `true`
If `true`, the modal dialog will prevent any scrolling behind the modal window.
## AriaModal.renderTo(HTMLElement | string)

@@ -384,0 +422,0 @@

2

src/react-aria-modal.js

@@ -185,3 +185,3 @@ const React = require('react');

maxWidth: '100%',
cursor: 'default',
cursor: 'auto',
outline: props.focusDialog ? 0 : null

@@ -188,0 +188,0 @@ };

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc