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

Comparing version 3.1.0 to 3.2.0

dist/main.js

@@ -1,10 +0,21 @@
-var _react = $parcel$interopDefault(require("react"));
+var {
+  useFocus
+} = require("@react-aria/interactions");
 
-var _classnames = $parcel$interopDefault(require("classnames"));
+var _react2 = require("react");
 
-var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = $parcel$interopDefault(_react2);
 
+var {
+  useMemo,
+  useState
+} = _react2;
+
+var {
+  mergeProps
+} = require("@react-aria/utils");
+
 var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
 
-require("./main.css");
+var _babelRuntimeHelpersObjectWithoutPropertiesLoose = $parcel$interopDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -15,29 +26,71 @@ function $parcel$interopDefault(a) {
 
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-aria/visually-hidden/src/VisuallyHidden.css
-var $e2ec7683a5efeba3448b0a5b7c6804d$exports = {};
-$e2ec7683a5efeba3448b0a5b7c6804d$exports = {
-  "u-react-spectrum-screenReaderOnly": "_u-react-spectrum-screenReaderOnly_3e916",
-  "is-focusable": "_is-focusable_3e916"
+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 $e2ec7683a5efeba3448b0a5b7c6804d$$interop$default = $parcel$interopDefault($e2ec7683a5efeba3448b0a5b7c6804d$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) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let {
     children,
-    className,
-    elementType: Element = 'div',
-    isFocusable
+    elementType: Element = 'div'
   } = props,
-      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["children", "className", "elementType", "isFocusable"]);
+      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["children", "elementType", "isFocusable", "style"]);
 
-  className = _classnames($e2ec7683a5efeba3448b0a5b7c6804d$$interop$default['u-react-spectrum-screenReaderOnly'], {
-    [$e2ec7683a5efeba3448b0a5b7c6804d$$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);
 }
@@ -44,0 +97,0 @@

dist/module.js

@@ -1,19 +0,55 @@
-import _react from "react";
-import _classnames from "classnames";
+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 _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
-import "./main.css";
+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 = {};
+  }
 
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-aria/visually-hidden/src/VisuallyHidden.css
-var $e3a45510afa47b9f5b8c801389497b16$exports = {};
-$e3a45510afa47b9f5b8c801389497b16$exports = {
-  "u-react-spectrum-screenReaderOnly": "_u-react-spectrum-screenReaderOnly_3e916",
-  "is-focusable": "_is-focusable_3e916"
-};
-var $e3a45510afa47b9f5b8c801389497b16$$interop$default = $parcel$interopDefault($e3a45510afa47b9f5b8c801389497b16$exports);
+  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
+    })
+  };
+}
 /**
@@ -23,18 +59,16 @@ * VisuallyHidden hides its children visually, while keeping content visible
  */
+
 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 = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["children", "className", "elementType", "isFocusable"]);
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["children", "elementType", "isFocusable", "style"]);
 
-  className = _classnames($e3a45510afa47b9f5b8c801389497b16$$interop$default['u-react-spectrum-screenReaderOnly'], {
-    [$e3a45510afa47b9f5b8c801389497b16$$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> {
     /** The content to visually hide. */
-    children: ReactNode;
+    children?: ReactNode;
     /**
@@ -10,6 +10,14 @@ * The element type for the container.
     elementType?: string | JSXElementConstructor<any>;
-    /** Whether the content can be focused. */
+    /** 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
@@ -16,0 +24,0 @@ * to screen readers.

package.json

 {
   "name": "@react-aria/visually-hidden",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Spectrum UI components in React",
@@ -23,3 +23,5 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "classnames": "^2.2.5"
+    "@react-aria/interactions": "^3.2.0",
+    "@react-aria/utils": "^3.2.0",
+    "clsx": "^1.1.1"
   },
@@ -32,3 +34,3 @@ "peerDependencies": {
   },
-  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
+  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
 }

src/index.ts

@@ -13,4 +13,2 @@ /*
 
-/// <reference types="css-module-types" />
-
 export * from './VisuallyHidden';

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

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

32349

increased by0.85%

Lines of code

273

increased by42.19%

Worsened metrics

Dependency count

5

increased by66.67%

Number of package files

11

decreased by-21.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@react-aria/interactions@^3.2.0

• + Added@react-aria/utils@^3.2.0

• + Addedclsx@^1.1.1

• + Added@react-aria/interactions@3.22.2(transitive)

• + Added@react-aria/ssr@3.9.5(transitive)

• + Added@react-aria/utils@3.25.2(transitive)

• + Added@react-stately/utils@3.10.3(transitive)

• + Added@react-types/shared@3.24.1(transitive)

• + Added@swc/helpers@0.5.13(transitive)

• + Addedclsx@1.2.12.1.1(transitive)

• + Addedtslib@2.7.0(transitive)

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)