@reach/visually-hidden - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

dist/index.d.ts

@@ -12,3 +12,3 @@ /**
  */
-import React from "react";
+import * as React from "react";
 /**
@@ -20,3 +20,45 @@ * VisuallyHidden
  */
-declare const VisuallyHidden: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const VisuallyHidden: ForwardRefExoticComponentWithAs<"span", VisuallyHiddenProps>;
+/**
+ * @see Docs https://reach.tech/visually-hidden#visuallyhidden-props
+ */
+declare type VisuallyHiddenProps = {
+    /**
+     * @see Docs https://reach.tech/visually-hidden#visuallyhidden-children
+     */
+    children: React.ReactNode;
+};
+declare type As<BaseProps = any> = React.ElementType<BaseProps>;
+declare type PropsWithAs<ComponentType extends As, ComponentProps> = ComponentProps & Omit<React.ComponentPropsWithRef<ComponentType>, "as" | keyof ComponentProps> & {
+    as?: ComponentType;
+};
+interface ExoticComponentWithAs<ComponentType extends As, ComponentProps> {
+    /**
+     * **NOTE**: Exotic components are not callable.
+     * Inherited from React.ExoticComponent with modifications to support `as`
+     */
+    <TT extends As>(props: PropsWithAs<TT, ComponentProps>): React.ReactElement | null;
+    (props: PropsWithAs<ComponentType, ComponentProps>): React.ReactElement | null;
+    /**
+     * Inherited from React.ExoticComponent
+     */
+    readonly $$typeof: symbol;
+}
+interface NamedExoticComponentWithAs<ComponentType extends As, ComponentProps> extends ExoticComponentWithAs<ComponentType, ComponentProps> {
+    /**
+     * Inherited from React.NamedExoticComponent
+     */
+    displayName?: string;
+}
+interface ForwardRefExoticComponentWithAs<ComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<ComponentType, ComponentProps> {
+    /**
+     * Inherited from React.ForwardRefExoticComponent
+     * Will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,
+     * but can be given its own specific name
+     */
+    defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
+    propTypes?: React.WeakValidationMap<PropsWithAs<ComponentType, ComponentProps>>;
+}
+export type { VisuallyHiddenProps };
+export { VisuallyHidden };
 export default VisuallyHidden;

dist/visually-hidden.cjs.development.js

@@ -6,19 +6,42 @@ 'use strict';
 var React = require('react');
+var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 /**
- * Welcome to @reach/visually-hidden!
- *
- * Provides text for screen readers that is visually hidden.
- * It is the logical opposite of the `aria-hidden` attribute.
- *
- * @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- * @see https://a11yproject.com/posts/how-to-hide-content/
- * @see Docs     https://reach.tech/visually-hidden
- * @see Source   https://github.com/reach/reach-ui/tree/main/packages/visually-hidden
- */
-/**
  * VisuallyHidden
@@ -30,6 +53,12 @@ *
 
-var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
-  return React__default['default'].createElement("span", Object.assign({
+var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(_ref, ref) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? "span" : _ref$as,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "style"]);
+
+  return React.createElement(Comp, Object.assign({
     ref: ref,
-    style: {
+    style: _extends({
       border: 0,
@@ -46,3 +75,3 @@ clip: "rect(0 0 0 0)",
       wordWrap: "normal"
-    }
+    }, style)
   }, props));
@@ -53,5 +82,10 @@ });
   VisuallyHidden.displayName = "VisuallyHidden";
+  VisuallyHidden.propTypes = {
+    as: PropTypes__default['default'].any,
+    children: PropTypes__default['default'].node
+  };
 }
 
+exports.VisuallyHidden = VisuallyHidden;
 exports.default = VisuallyHidden;
 //# sourceMappingURL=visually-hidden.cjs.development.js.map

dist/visually-hidden.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(e);exports.default=e.forwardRef((function(e,r){return t.default.createElement("span",Object.assign({ref:r,style:{border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap",wordWrap:"normal"}},e))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}require("prop-types");var t=e.forwardRef((function(t,n){var a=t.as,o=void 0===a?"span":a,i=t.style,s=void 0===i?{}:i,p=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r.indexOf(t=o[n])>=0||(a[t]=e[t]);return a}(t,["as","style"]);return e.createElement(o,Object.assign({ref:n,style:r({border:0,clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap",wordWrap:"normal"},s)},p))}));exports.VisuallyHidden=t,exports.default=t;
 //# sourceMappingURL=visually-hidden.cjs.production.min.js.map

dist/visually-hidden.esm.js

@@ -1,15 +0,38 @@
-import React, { forwardRef } from 'react';
+import { forwardRef, createElement } from 'react';
+import PropTypes from 'prop-types';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 /**
- * Welcome to @reach/visually-hidden!
- *
- * Provides text for screen readers that is visually hidden.
- * It is the logical opposite of the `aria-hidden` attribute.
- *
- * @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
- * @see https://a11yproject.com/posts/how-to-hide-content/
- * @see Docs     https://reach.tech/visually-hidden
- * @see Source   https://github.com/reach/reach-ui/tree/main/packages/visually-hidden
- */
-/**
  * VisuallyHidden
@@ -21,6 +44,12 @@ *
 
-var VisuallyHidden = /*#__PURE__*/forwardRef(function VisuallyHidden(props, ref) {
-  return React.createElement("span", Object.assign({
+var VisuallyHidden = /*#__PURE__*/forwardRef(function VisuallyHidden(_ref, ref) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? "span" : _ref$as,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "style"]);
+
+  return createElement(Comp, Object.assign({
     ref: ref,
-    style: {
+    style: _extends({
       border: 0,
@@ -37,3 +66,3 @@ clip: "rect(0 0 0 0)",
       wordWrap: "normal"
-    }
+    }, style)
   }, props));
@@ -44,5 +73,10 @@ });
   VisuallyHidden.displayName = "VisuallyHidden";
+  VisuallyHidden.propTypes = {
+    as: PropTypes.any,
+    children: PropTypes.node
+  };
 }
 
 export default VisuallyHidden;
+export { VisuallyHidden };
 //# sourceMappingURL=visually-hidden.esm.js.map

package.json

 {
   "name": "@reach/visually-hidden",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Render text that is announced to screen readers but visually hidden.",
@@ -29,3 +29,3 @@ "author": "React Training <[e-mail]>",
   },
-  "gitHead": "5c6de02db35c1bb69e28d52bf345ea5c5c484013"
+  "gitHead": "09eeccda6e4597d21545982c53db5c42beddce6b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24919

increased by82.28%

Lines of code

210

increased by84.21%

No dependency changes