@dnd-kit/accessibility - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

CHANGELOG.md

 # @dnd-kit/accessibility
 
+## 3.0.0
+
+### Major Changes
+
+- [`a9d92cf`](https://github.com/clauderic/dnd-kit/commit/a9d92cf1fa35dd957e6c5915a13dfd2af134c103) [#174](https://github.com/clauderic/dnd-kit/pull/174) Thanks [@clauderic](https://github.com/clauderic)! - Distributed assets now only target modern browsers. [Browserlist](https://github.com/browserslist/browserslist) config:
+
+  ```
+  defaults
+  last 2 version
+  not IE 11
+  not dead
+  ```
+
+  If you need to support older browsers, include the appropriate polyfills in your project's build process.
+
+### Patch Changes
+
+- [`b406cb9`](https://github.com/clauderic/dnd-kit/commit/b406cb9251beef8677d05c45ec42bab7581a86dc) [#187](https://github.com/clauderic/dnd-kit/pull/187) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `useDndMonitor` hook. The `useDndMonitor` hook can be used within components wrapped in a `DndContext` provider to monitor the different drag and drop events that happen for that `DndContext`.
+
+  Example usage:
+
+  ```tsx
+  import {DndContext, useDndMonitor} from '@dnd-kit/core';
+
+  function App() {
+    return (
+      <DndContext>
+        <Component />
+      </DndContext>
+    );
+  }
+
+  function Component() {
+    useDndMonitor({
+      onDragStart(event) {},
+      onDragMove(event) {},
+      onDragOver(event) {},
+      onDragEnd(event) {},
+      onDragCancel(event) {},
+    });
+  }
+  ```
+
 ## 2.0.0
@@ -4,0 +47,0 @@

dist/accessibility.cjs.development.js

@@ -10,8 +10,9 @@ 'use strict';
 
-var hiddenStyles = {
+const hiddenStyles = {
   display: 'none'
 };
-function HiddenText(_ref) {
-  var id = _ref.id,
-      value = _ref.value;
+function HiddenText({
+  id,
+  value
+}) {
   return React__default.createElement("div", {
@@ -23,3 +24,3 @@ id: id,
 
-var visuallyHidden = {
+const visuallyHidden = {
   position: 'absolute',
@@ -36,5 +37,6 @@ width: 1,
 };
-function LiveRegion(_ref) {
-  var id = _ref.id,
-      announcement = _ref.announcement;
+function LiveRegion({
+  id,
+  announcement
+}) {
   return React__default.createElement("div", {
@@ -50,9 +52,11 @@ id: id,
 function useAnnouncement() {
-  var _useState = React.useState(''),
-      announcement = _useState[0],
-      setAnnouncement = _useState[1];
-
+  const [announcement, setAnnouncement] = React.useState('');
+  const announce = React.useCallback(value => {
+    if (value != null) {
+      setAnnouncement(value);
+    }
+  }, []);
   return {
-    announce: setAnnouncement,
-    announcement: announcement
+    announce,
+    announcement
   };
@@ -59,0 +63,0 @@ }

dist/accessibility.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i={display:"none"},r={position:"absolute",width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"};exports.HiddenText=function(e){return n.createElement("div",{id:e.id,style:i},e.value)},exports.LiveRegion=function(e){return n.createElement("div",{id:e.id,style:r,role:"status","aria-live":"assertive","aria-atomic":!0},e.announcement)},exports.useAnnouncement=function(){var e=t.useState("");return{announce:e[1],announcement:e[0]}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;const i={display:"none"},r={position:"absolute",width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"};exports.HiddenText=function({id:e,value:t}){return n.createElement("div",{id:e,style:i},t)},exports.LiveRegion=function({id:e,announcement:t}){return n.createElement("div",{id:e,style:r,role:"status","aria-live":"assertive","aria-atomic":!0},t)},exports.useAnnouncement=function(){const[e,n]=t.useState("");return{announce:t.useCallback(e=>{null!=e&&n(e)},[]),announcement:e}};
 //# sourceMappingURL=accessibility.cjs.production.min.js.map

dist/accessibility.esm.js

@@ -1,9 +0,10 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 
-var hiddenStyles = {
+const hiddenStyles = {
   display: 'none'
 };
-function HiddenText(_ref) {
-  var id = _ref.id,
-      value = _ref.value;
+function HiddenText({
+  id,
+  value
+}) {
   return React.createElement("div", {
@@ -15,3 +16,3 @@ id: id,
 
-var visuallyHidden = {
+const visuallyHidden = {
   position: 'absolute',
@@ -28,5 +29,6 @@ width: 1,
 };
-function LiveRegion(_ref) {
-  var id = _ref.id,
-      announcement = _ref.announcement;
+function LiveRegion({
+  id,
+  announcement
+}) {
   return React.createElement("div", {
@@ -42,9 +44,11 @@ id: id,
 function useAnnouncement() {
-  var _useState = useState(''),
-      announcement = _useState[0],
-      setAnnouncement = _useState[1];
-
+  const [announcement, setAnnouncement] = useState('');
+  const announce = useCallback(value => {
+    if (value != null) {
+      setAnnouncement(value);
+    }
+  }, []);
   return {
-    announce: setAnnouncement,
-    announcement: announcement
+    announce,
+    announcement
   };
@@ -51,0 +55,0 @@ }

dist/hooks/useAnnouncement.d.ts

@@ -1,5 +0,4 @@
-/// <reference types="react" />
 export declare function useAnnouncement(): {
-    readonly announce: import("react").Dispatch<import("react").SetStateAction<string>>;
+    readonly announce: (value: string | undefined) => void;
     readonly announcement: string;
 };

package.json

 {
   "name": "@dnd-kit/accessibility",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A generic toolkit to help with accessibility",
@@ -5,0 +5,0 @@ "author": "Claudéric Demers",

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

18239

increased by13.87%

Lines of code

142

increased by6.77%

No dependency changes