Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-aria-modal
Advanced tools
react-aria-modal - npm Package Compare versions
Comparing version 4.0.1 to 4.0.2
@@ -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 @@ |
| "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 @@ }; |
| { | ||
| "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 @@ |
@@ -185,3 +185,3 @@ const React = require('react'); | ||
| maxWidth: '100%', | ||
| cursor: 'default', | ||
| cursor: 'auto', | ||
| outline: props.focusDialog ? 0 : null | ||
@@ -188,0 +188,0 @@ }; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.84%
44753
- Number of lines in readme file
- increased by9%
460
Worsened metrics
- Lines of code
- decreased by-4.24%
474
No dependency changes