@react-aria/visually-hidden - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-nightly.672

dist/main.js

@@ -1,13 +0,22 @@
-require("./main.css");
+var {
+  useFocus
+} = require("@react-aria/interactions");
 
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
+var _react2 = require("react");
 
-var _babelRuntimeHelpersDefineProperty = $parcel$interopDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = $parcel$interopDefault(_react2);
 
-var _babelRuntimeHelpersObjectWithoutProperties = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var {
+  useMemo,
+  useState
+} = _react2;
 
-var _classnames = $parcel$interopDefault(require("classnames"));
+var {
+  mergeProps
+} = require("@react-aria/utils");
 
-var _react = $parcel$interopDefault(require("react"));
+var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
 
+var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 function $parcel$interopDefault(a) {
@@ -17,25 +26,74 @@ return a && a.__esModule ? a.default : a;
 
-// ASSET: /Users/govett/dev/react-spectrum/packages/@react-aria/visually-hidden/src/VisuallyHidden.css
-var $a89d8d77dc13bdd44b11976e70e732a$exports = {};
-$a89d8d77dc13bdd44b11976e70e732a$exports = {
-  "u-react-spectrum-screenReaderOnly": "_u-react-spectrum-screenReaderOnly_1b5d0",
-  "is-focusable": "_is-focusable_1b5d0"
+const $c1f76ac3c0285c5bc650b183209bb9$var$styles = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  margin: '0 -1px -1px 0',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  width: 1,
+  whiteSpace: 'nowrap'
 };
-var $a89d8d77dc13bdd44b11976e70e732a$$interop$default = $parcel$interopDefault($a89d8d77dc13bdd44b11976e70e732a$exports);
 
+/**
+ * Provides props for an element that hides its children visually
+ * but keeps content visible to assistive technology.
+ */
+function useVisuallyHidden(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  let {
+    style,
+    isFocusable
+  } = props;
+  let [isFocused, setFocused] = useState(false);
+  let {
+    focusProps
+  } = useFocus({
+    isDisabled: !isFocusable,
+    onFocusChange: setFocused
+  }); // If focused, don't hide the element.
+
+  let combinedStyles = useMemo(() => {
+    if (isFocused) {
+      return style;
+    } else if (style) {
+      return _babelRuntimeHelpersExtends({}, $c1f76ac3c0285c5bc650b183209bb9$var$styles, style);
+    } else {
+      return $c1f76ac3c0285c5bc650b183209bb9$var$styles;
+    }
+  }, [isFocused]);
+  return {
+    visuallyHiddenProps: _babelRuntimeHelpersExtends({}, focusProps, {
+      style: combinedStyles
+    })
+  };
+}
+/**
+ * VisuallyHidden hides its children visually, while keeping content visible
+ * to screen readers.
+ */
+
+
+exports.useVisuallyHidden = useVisuallyHidden;
+
 function VisuallyHidden(props) {
-  var children = props.children,
-      className = props.className,
-      _props$elementType = props.elementType,
-      Element = _props$elementType === void 0 ? 'div' : _props$elementType,
-      isFocusable = props.isFocusable,
-      otherProps = _babelRuntimeHelpersObjectWithoutProperties(props, ["children", "className", "elementType", "isFocusable"]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {
+    children,
+    elementType: Element = 'div'
+  } = props,
+      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["children", "elementType", "isFocusable", "style"]);
 
-  className = _classnames($a89d8d77dc13bdd44b11976e70e732a$$interop$default['u-react-spectrum-screenReaderOnly'], _babelRuntimeHelpersDefineProperty({}, $a89d8d77dc13bdd44b11976e70e732a$$interop$default['is-focusable'], isFocusable), className);
-  return (/*#__PURE__*/_react.createElement(Element, _babelRuntimeHelpersExtends({
-      className: className
-    }, otherProps), children)
-  );
+  let {
+    visuallyHiddenProps
+  } = useVisuallyHidden(props);
+  return /*#__PURE__*/_react.createElement(Element, mergeProps(otherProps, visuallyHiddenProps), children);
 }
 
-exports.VisuallyHidden = VisuallyHidden;
+exports.VisuallyHidden = VisuallyHidden;
+//# sourceMappingURL=main.js.map

dist/module.js

@@ -1,34 +0,73 @@
-import "./main.css";
+import { useFocus } from "@react-aria/interactions";
+import _react, { useMemo, useState } from "react";
+import { mergeProps } from "@react-aria/utils";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
-import _babelRuntimeHelpersEsmObjectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classnames from "classnames";
-import _react from "react";
+import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const $f431c2c11cc559fa3c5864caafbcfd19$var$styles = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  margin: '0 -1px -1px 0',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  width: 1,
+  whiteSpace: 'nowrap'
+};
 
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
+/**
+ * Provides props for an element that hides its children visually
+ * but keeps content visible to assistive technology.
+ */
+export function useVisuallyHidden(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  let {
+    style,
+    isFocusable
+  } = props;
+  let [isFocused, setFocused] = useState(false);
+  let {
+    focusProps
+  } = useFocus({
+    isDisabled: !isFocusable,
+    onFocusChange: setFocused
+  }); // If focused, don't hide the element.
+
+  let combinedStyles = useMemo(() => {
+    if (isFocused) {
+      return style;
+    } else if (style) {
+      return _babelRuntimeHelpersEsmExtends({}, $f431c2c11cc559fa3c5864caafbcfd19$var$styles, style);
+    } else {
+      return $f431c2c11cc559fa3c5864caafbcfd19$var$styles;
+    }
+  }, [isFocused]);
+  return {
+    visuallyHiddenProps: _babelRuntimeHelpersEsmExtends({}, focusProps, {
+      style: combinedStyles
+    })
+  };
 }
+/**
+ * VisuallyHidden hides its children visually, while keeping content visible
+ * to screen readers.
+ */
 
-// ASSET: /Users/govett/dev/react-spectrum/packages/@react-aria/visually-hidden/src/VisuallyHidden.css
-var $ca5fedd195fe2b68a49d151fd9f50776$exports = {};
-$ca5fedd195fe2b68a49d151fd9f50776$exports = {
-  "u-react-spectrum-screenReaderOnly": "_u-react-spectrum-screenReaderOnly_1b5d0",
-  "is-focusable": "_is-focusable_1b5d0"
-};
-var $ca5fedd195fe2b68a49d151fd9f50776$$interop$default = $parcel$interopDefault($ca5fedd195fe2b68a49d151fd9f50776$exports);
 export function VisuallyHidden(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let {
     children,
-    className,
-    elementType: Element = 'div',
-    isFocusable
+    elementType: Element = 'div'
   } = props,
-      otherProps = _babelRuntimeHelpersEsmObjectWithoutProperties(props, ["children", "className", "elementType", "isFocusable"]);
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["children", "elementType", "isFocusable", "style"]);
 
-  className = _classnames($ca5fedd195fe2b68a49d151fd9f50776$$interop$default['u-react-spectrum-screenReaderOnly'], {
-    [$ca5fedd195fe2b68a49d151fd9f50776$$interop$default['is-focusable']]: isFocusable
-  }, className);
-  return (/*#__PURE__*/_react.createElement(Element, _babelRuntimeHelpersEsmExtends({
-      className: className
-    }, otherProps), children)
-  );
-}
+  let {
+    visuallyHiddenProps
+  } = useVisuallyHidden(props);
+  return /*#__PURE__*/_react.createElement(Element, mergeProps(otherProps, visuallyHiddenProps), children);
+}
+//# sourceMappingURL=module.js.map

dist/types.d.ts

 import { HTMLAttributes, JSXElementConstructor, ReactNode } from "react";
 interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
-    children: ReactNode;
+    /** The content to visually hide. */
+    children?: ReactNode;
+    /**
+     * The element type for the container.
+     * @default 'div'
+     */
     elementType?: string | JSXElementConstructor<any>;
+    /** Whether the element should become visible on focus, for example skip links. */
     isFocusable?: boolean;
 }
+interface VisuallyHiddenAria {
+    visuallyHiddenProps: HTMLAttributes<HTMLElement>;
+}
+/**
+ * Provides props for an element that hides its children visually
+ * but keeps content visible to assistive technology.
+ */
+export function useVisuallyHidden(props?: VisuallyHiddenProps): VisuallyHiddenAria;
+/**
+ * VisuallyHidden hides its children visually, while keeping content visible
+ * to screen readers.
+ */
 export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/visually-hidden",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-nightly.672+9853bacb",
   "description": "Spectrum UI components in React",
@@ -11,12 +11,17 @@ "license": "Apache-2.0",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/adobe-private/react-spectrum-v3"
+    "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "classnames": "^2.2.5"
+    "@react-aria/interactions": "3.0.0-nightly.672+9853bacb",
+    "@react-aria/utils": "3.0.0-nightly.672+9853bacb",
+    "clsx": "^1.1.1"
   },
@@ -29,3 +34,3 @@ "peerDependencies": {
   },
-  "gitHead": "207e6ee9076905c96638a7f81a367758872e1410"
+  "gitHead": "9853bacb98dd37c64faf573e5cb1a6493e2e6f08"
 }

README.md

 # @react-aria/visually-hidden
 
-This package is part of [react-spectrum](https://github.com/adobe-private/react-spectrum-v3). See the repo for more details.
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Improved metrics

Total package byte prevSize

32410

increased by92.01%

Number of package files

11

increased by37.5%

Lines of code

273

increased by196.74%

Worsened metrics

Dependency count

5

increased by66.67%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@react-aria/interactions@3.0.0-nightly.672+9853bacb

• + Added@react-aria/utils@3.0.0-nightly.672+9853bacb

• + Addedclsx@^1.1.1

• + Addedclsx@1.2.1(transitive)

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)