@reach/alert - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0

dist/alert.cjs.development.js

@@ -6,4 +6,4 @@ 'use strict';
 var React = require('react');
-var reactDom = require('react-dom');
-var VisuallyHidden = require('@reach/visually-hidden');
+var ReactDOM = require('react-dom');
+var visuallyHidden = require('@reach/visually-hidden');
 var utils = require('@reach/utils');
@@ -14,4 +14,2 @@ var PropTypes = require('prop-types');
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var VisuallyHidden__default = /*#__PURE__*/_interopDefaultLegacy(VisuallyHidden);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
@@ -63,7 +61,9 @@
 
-var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, forwardedRef) {
-  var children = _ref.children,
+var Alert = /*#__PURE__*/utils.forwardRefWithAs(function Alert(_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? "div" : _ref$as,
+      children = _ref.children,
       _ref$type = _ref.type,
       regionType = _ref$type === void 0 ? "polite" : _ref$type,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "type"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "children", "type"]);
 
@@ -73,3 +73,3 @@ var ownRef = React.useRef(null);
   var child = React.useMemo(function () {
-    return React__default['default'].createElement("div", Object.assign({}, props, {
+    return React.createElement(Comp, Object.assign({}, props, {
       ref: ref,
@@ -90,4 +90,5 @@ "data-reach-alert": true
   };
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
+
 function createMirror(type, doc) {
@@ -137,3 +138,5 @@ var key = ++keys[type];
       if (container) {
-        reactDom.render(React__default['default'].createElement(VisuallyHidden__default['default'], null, React__default['default'].createElement("div", {
+        ReactDOM.render(React.createElement(visuallyHidden.VisuallyHidden, {
+          as: "div"
+        }, React.createElement("div", {
           // The status role is a type of live region and a container whose
@@ -149,3 +152,3 @@ // content is advisory information for the user that is not
         }, Object.keys(elements[regionType]).map(function (key) {
-          return React__default['default'].cloneElement(elements[regionType][key], {
+          return React.cloneElement(elements[regionType][key], {
             key: key,
@@ -165,3 +168,3 @@ ref: null
   React.useEffect(function () {
-    var ownerDocument = utils.getOwnerDocument(ref.current) || document;
+    var ownerDocument = utils.getOwnerDocument(ref.current);
 
@@ -168,0 +171,0 @@ if (!mounted.current) {

dist/alert.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),r=require("@reach/visually-hidden"),n=require("@reach/utils");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("prop-types");var c,i=u(e),l=u(r),o={polite:-1,assertive:-1},a={polite:{},assertive:{}},f={polite:null,assertive:null},s=e.forwardRef((function(t,r){var u=t.children,c=t.type,l=void 0===c?"polite":c,o=function(e,t){if(null==e)return{};var r,n,u={},c=Object.keys(e);for(n=0;n<c.length;n++)t.indexOf(r=c[n])>=0||(u[r]=e[r]);return u}(t,["children","type"]),a=e.useRef(null),f=n.useForkedRef(r,a),s=e.useMemo((function(){return i.default.createElement("div",Object.assign({},o,{ref:f,"data-reach-alert":!0}),u)}),[u,o]);return function(t,r,u){var c=n.usePrevious(t),i=e.useRef(null),l=e.useRef(!1);e.useEffect((function(){var e=n.getOwnerDocument(u.current)||document;l.current?c!==t?(i.current&&i.current.unmount(),i.current=d(t,e),i.current.mount(r)):i.current&&i.current.update(r):(l.current=!0,i.current=d(t,e),i.current.mount(r))}),[r,t,c,u]),e.useEffect((function(){return function(){i.current&&i.current.unmount()}}),[])}(l,s,a),s}));function d(e,t){var r=++o[e];return{mount:function n(u){if(f[e])a[e][r]=u,v();else{var c=t.createElement("div");c.setAttribute("data-reach-live-"+e,"true"),f[e]=c,t.body.appendChild(f[e]),n(u)}},update:function(t){a[e][r]=t,v()},unmount:function(){delete a[e][r],v()}}}function v(){null!=c&&window.clearTimeout(c),c=window.setTimeout((function(){Object.keys(a).forEach((function(e){var r=e;f[r]&&t.render(i.default.createElement(l.default,null,i.default.createElement("div",{role:"assertive"===r?"alert":"status","aria-live":r},Object.keys(a[r]).map((function(e){return i.default.cloneElement(a[r][e],{key:e,ref:null})})))),f[r])}))}),500)}exports.Alert=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-dom"),t=require("@reach/visually-hidden"),n=require("@reach/utils");require("prop-types");var u,i={polite:-1,assertive:-1},c={polite:{},assertive:{}},o={polite:null,assertive:null},a=n.forwardRefWithAs((function(r,t){var u=r.as,i=void 0===u?"div":u,c=r.children,o=r.type,a=void 0===o?"polite":o,s=function(e,r){if(null==e)return{};var t,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(u[t]=e[t]);return u}(r,["as","children","type"]),f=e.useRef(null),d=n.useForkedRef(t,f),v=e.useMemo((function(){return e.createElement(i,Object.assign({},s,{ref:d,"data-reach-alert":!0}),c)}),[c,s]);return function(r,t,u){var i=n.usePrevious(r),c=e.useRef(null),o=e.useRef(!1);e.useEffect((function(){var e=n.getOwnerDocument(u.current);o.current?i!==r?(c.current&&c.current.unmount(),c.current=l(r,e),c.current.mount(t)):c.current&&c.current.update(t):(o.current=!0,c.current=l(r,e),c.current.mount(t))}),[t,r,i,u]),e.useEffect((function(){return function(){c.current&&c.current.unmount()}}),[])}(a,v,f),v}));function l(e,r){var t=++i[e];return{mount:function n(u){if(o[e])c[e][t]=u,s();else{var i=r.createElement("div");i.setAttribute("data-reach-live-"+e,"true"),o[e]=i,r.body.appendChild(o[e]),n(u)}},update:function(r){c[e][t]=r,s()},unmount:function(){delete c[e][t],s()}}}function s(){null!=u&&window.clearTimeout(u),u=window.setTimeout((function(){Object.keys(c).forEach((function(n){var u=n;o[u]&&r.render(e.createElement(t.VisuallyHidden,{as:"div"},e.createElement("div",{role:"assertive"===u?"alert":"status","aria-live":u},Object.keys(c[u]).map((function(r){return e.cloneElement(c[u][r],{key:r,ref:null})})))),o[u])}))}),500)}exports.Alert=a,exports.default=a;
 //# sourceMappingURL=alert.cjs.production.min.js.map

dist/alert.esm.js

@@ -1,5 +0,5 @@
-import React, { forwardRef, useRef, useMemo, useEffect } from 'react';
+import { useRef, useMemo, createElement, useEffect, cloneElement } from 'react';
 import { render } from 'react-dom';
-import VisuallyHidden from '@reach/visually-hidden';
-import { useForkedRef, usePrevious, getOwnerDocument } from '@reach/utils';
+import { VisuallyHidden } from '@reach/visually-hidden';
+import { forwardRefWithAs, useForkedRef, usePrevious, getOwnerDocument } from '@reach/utils';
 import PropTypes from 'prop-types';
@@ -51,7 +51,9 @@
 
-var Alert = /*#__PURE__*/forwardRef(function Alert(_ref, forwardedRef) {
-  var children = _ref.children,
+var Alert = /*#__PURE__*/forwardRefWithAs(function Alert(_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? "div" : _ref$as,
+      children = _ref.children,
       _ref$type = _ref.type,
       regionType = _ref$type === void 0 ? "polite" : _ref$type,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "type"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "children", "type"]);
 
@@ -61,3 +63,3 @@ var ownRef = useRef(null);
   var child = useMemo(function () {
-    return React.createElement("div", Object.assign({}, props, {
+    return createElement(Comp, Object.assign({}, props, {
       ref: ref,
@@ -78,4 +80,5 @@ "data-reach-alert": true
   };
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
+
 function createMirror(type, doc) {
@@ -125,3 +128,5 @@ var key = ++keys[type];
       if (container) {
-        render(React.createElement(VisuallyHidden, null, React.createElement("div", {
+        render(createElement(VisuallyHidden, {
+          as: "div"
+        }, createElement("div", {
           // The status role is a type of live region and a container whose
@@ -137,3 +142,3 @@ // content is advisory information for the user that is not
         }, Object.keys(elements[regionType]).map(function (key) {
-          return React.cloneElement(elements[regionType][key], {
+          return cloneElement(elements[regionType][key], {
             key: key,
@@ -153,3 +158,3 @@ ref: null
   useEffect(function () {
-    var ownerDocument = getOwnerDocument(ref.current) || document;
+    var ownerDocument = getOwnerDocument(ref.current);
 
@@ -156,0 +161,0 @@ if (!mounted.current) {

dist/index.d.ts

@@ -25,3 +25,3 @@ /**
  */
-import React from "react";
+import * as React from "react";
 /**
@@ -36,16 +36,7 @@ * Alert
  */
-export declare const Alert: React.ForwardRefExoticComponent<{
-    /**
-     * Controls whether the assistive technology should read immediately
-     * ("assertive") or wait until the user is idle ("polite").
-     *
-     * @see Docs https://reach.tech/alert#alert-type
-     */
-    type?: "polite" | "assertive" | undefined;
-    children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Alert: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", AlertProps>;
 /**
  * @see Docs https://reach.tech/alert#alert-props
  */
-export declare type AlertProps = {
+declare type AlertProps = {
     /**
@@ -59,3 +50,5 @@ * Controls whether the assistive technology should read immediately
     children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+};
+export type { AlertProps };
+export { Alert };
 export default Alert;

package.json

 {
   "name": "@reach/alert",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Screen-reader-friendly alert messages.",
@@ -16,4 +16,4 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/utils": "0.11.2",
-    "@reach/visually-hidden": "0.11.1",
+    "@reach/utils": "0.12.0",
+    "@reach/visually-hidden": "0.12.0",
     "prop-types": "^15.7.2",
@@ -33,3 +33,3 @@ "tslib": "^2.0.0"
   ],
-  "gitHead": "2aa6f03c5eed8c2b7525a29db1c69fe6bc540e5d"
+  "gitHead": "09eeccda6e4597d21545982c53db5c42beddce6b"
 }

No alert changes

Improved metrics

Total package byte prevSize

51737

0.36%

Worsened metrics

Lines of code

378

-0.53%

Dependency changes

• + Added

  @reach/utils@0.12.0
  (transitive)

• + Added

  @reach/visually-hidden@0.12.0
  (transitive)

• - Removed

  @reach/utils@0.11.2
  (transitive)

• - Removed

  @reach/visually-hidden@0.11.1
  (transitive)

• Updated

  @reach/utils@0.12.0

• Updated

  @reach/visually-hidden@0.12.0