@dnd-kit/accessibility 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @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
 
 ### Major Changes

package/dist/accessibility.cjs.development.js

@@ -7,19 +7,20 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 
-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", {
     id: id,
     style: hiddenStyles
   }, value);
 }
 
-var visuallyHidden = {
+const visuallyHidden = {
   position: 'absolute',
   width: 1,
   height: 1,
@@ -31,9 +32,10 @@ var visuallyHidden = {
   clipPath: 'inset(100%)',
   whiteSpace: 'nowrap'
 };
-function LiveRegion(_ref) {
-  var id = _ref.id,
-      announcement = _ref.announcement;
+function LiveRegion({
+  id,
+  announcement
+}) {
   return React__default.createElement("div", {
     id: id,
     style: visuallyHidden,
@@ -44,13 +46,15 @@ function LiveRegion(_ref) {
 }
 
 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
   };
 }
 

package/dist/accessibility.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.cjs.development.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n  id: string;\n  value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n  display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n  return (\n    <div id={id} style={hiddenStyles}>\n      {value}\n    </div>\n  );\n}\n","import React from 'react';\n\nexport interface Props {\n  id: string;\n  announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  border: 0,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(100%)',\n  whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n  return (\n    <div\n      id={id}\n      style={visuallyHidden}\n      role=\"status\"\n      aria-live=\"assertive\"\n      aria-atomic\n    >\n      {announcement}\n    </div>\n  );\n}\n","import {useState} from 'react';\n\nexport function useAnnouncement() {\n  const [announcement, setAnnouncement] = useState('');\n\n  return {announce: setAnnouncement, announcement} as const;\n}\n"],"names":["hiddenStyles","display","HiddenText","id","value","React","style","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","LiveRegion","announcement","role","useAnnouncement","useState","setAnnouncement","announce"],"mappings":";;;;;;;;;AAOA,IAAMA,YAAY,GAAwB;AACxCC,EAAAA,OAAO,EAAE;AAD+B,CAA1C;SAIgBC;MAAYC,UAAAA;MAAIC,aAAAA;AAC9B,SACEC,4BAAA,MAAA;AAAKF,IAAAA,EAAE,EAAEA;AAAIG,IAAAA,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,IAAMG,cAAc,GAAwB;AAC1CC,EAAAA,QAAQ,EAAE,UADgC;AAE1CC,EAAAA,KAAK,EAAE,CAFmC;AAG1CC,EAAAA,MAAM,EAAE,CAHkC;AAI1CC,EAAAA,MAAM,EAAE,CAAC,CAJiC;AAK1CC,EAAAA,MAAM,EAAE,CALkC;AAM1CC,EAAAA,OAAO,EAAE,CANiC;AAO1CC,EAAAA,QAAQ,EAAE,QAPgC;AAQ1CC,EAAAA,IAAI,EAAE,eARoC;AAS1CC,EAAAA,QAAQ,EAAE,aATgC;AAU1CC,EAAAA,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC;MAAYf,UAAAA;MAAIgB,oBAAAA;AAC9B,SACEd,4BAAA,MAAA;AACEF,IAAAA,EAAE,EAAEA;AACJG,IAAAA,KAAK,EAAEC;AACPa,IAAAA,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;kBAC0BC,cAAQ,CAAC,EAAD;MAAzCH;MAAcI;;AAErB,SAAO;AAACC,IAAAA,QAAQ,EAAED,eAAX;AAA4BJ,IAAAA,YAAY,EAAZA;AAA5B,GAAP;AACD;;;;;;"}
+{"version":3,"file":"accessibility.cjs.development.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n  id: string;\n  value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n  display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n  return (\n    <div id={id} style={hiddenStyles}>\n      {value}\n    </div>\n  );\n}\n","import React from 'react';\n\nexport interface Props {\n  id: string;\n  announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  border: 0,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(100%)',\n  whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n  return (\n    <div\n      id={id}\n      style={visuallyHidden}\n      role=\"status\"\n      aria-live=\"assertive\"\n      aria-atomic\n    >\n      {announcement}\n    </div>\n  );\n}\n","import {useCallback, useState} from 'react';\n\nexport function useAnnouncement() {\n  const [announcement, setAnnouncement] = useState('');\n  const announce = useCallback((value: string | undefined) => {\n    if (value != null) {\n      setAnnouncement(value);\n    }\n  }, []);\n\n  return {announce, announcement} as const;\n}\n"],"names":["hiddenStyles","display","HiddenText","id","value","React","style","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","LiveRegion","announcement","role","useAnnouncement","setAnnouncement","useState","announce","useCallback"],"mappings":";;;;;;;;;AAOA,MAAMA,YAAY,GAAwB;AACxCC,EAAAA,OAAO,EAAE;AAD+B,CAA1C;SAIgBC,WAAW;AAACC,EAAAA,EAAD;AAAKC,EAAAA;AAAL;AACzB,SACEC,4BAAA,MAAA;AAAKF,IAAAA,EAAE,EAAEA;AAAIG,IAAAA,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,MAAMG,cAAc,GAAwB;AAC1CC,EAAAA,QAAQ,EAAE,UADgC;AAE1CC,EAAAA,KAAK,EAAE,CAFmC;AAG1CC,EAAAA,MAAM,EAAE,CAHkC;AAI1CC,EAAAA,MAAM,EAAE,CAAC,CAJiC;AAK1CC,EAAAA,MAAM,EAAE,CALkC;AAM1CC,EAAAA,OAAO,EAAE,CANiC;AAO1CC,EAAAA,QAAQ,EAAE,QAPgC;AAQ1CC,EAAAA,IAAI,EAAE,eARoC;AAS1CC,EAAAA,QAAQ,EAAE,aATgC;AAU1CC,EAAAA,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC,WAAW;AAACf,EAAAA,EAAD;AAAKgB,EAAAA;AAAL;AACzB,SACEd,4BAAA,MAAA;AACEF,IAAAA,EAAE,EAAEA;AACJG,IAAAA,KAAK,EAAEC;AACPa,IAAAA,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;AACd,QAAM,CAACF,YAAD,EAAeG,eAAf,IAAkCC,cAAQ,CAAC,EAAD,CAAhD;AACA,QAAMC,QAAQ,GAAGC,iBAAW,CAAErB,KAAD;AAC3B,QAAIA,KAAK,IAAI,IAAb,EAAmB;AACjBkB,MAAAA,eAAe,CAAClB,KAAD,CAAf;AACD;AACF,GAJ2B,EAIzB,EAJyB,CAA5B;AAMA,SAAO;AAACoB,IAAAA,QAAD;AAAWL,IAAAA;AAAX,GAAP;AACD;;;;;;"}

package/dist/accessibility.cjs.production.min.js

@@ -1,2 +1,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

package/dist/accessibility.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.cjs.production.min.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n  id: string;\n  value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n  display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n  return (\n    <div id={id} style={hiddenStyles}>\n      {value}\n    </div>\n  );\n}\n","import React from 'react';\n\nexport interface Props {\n  id: string;\n  announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  border: 0,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(100%)',\n  whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n  return (\n    <div\n      id={id}\n      style={visuallyHidden}\n      role=\"status\"\n      aria-live=\"assertive\"\n      aria-atomic\n    >\n      {announcement}\n    </div>\n  );\n}\n","import {useState} from 'react';\n\nexport function useAnnouncement() {\n  const [announcement, setAnnouncement] = useState('');\n\n  return {announce: setAnnouncement, announcement} as const;\n}\n"],"names":["hiddenStyles","display","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","React","id","style","value","role","announcement","useState","announce"],"mappings":"oJAOMA,EAAoC,CACxCC,QAAS,QCALC,EAAsC,CAC1CC,SAAU,WACVC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,SAAU,SACVC,KAAM,gBACNC,SAAU,cACVC,WAAY,gDDLVC,uBAAKC,KAFmBA,GAEXC,MAAOf,KAFQgB,8CCY5BH,uBACEC,KAHsBA,GAItBC,MAAOb,EACPe,KAAK,qBACK,gCANgBC,wDClBUC,WAAS,UAE1C,CAACC,cAA2BF"}
+{"version":3,"file":"accessibility.cjs.production.min.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n  id: string;\n  value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n  display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n  return (\n    <div id={id} style={hiddenStyles}>\n      {value}\n    </div>\n  );\n}\n","import React from 'react';\n\nexport interface Props {\n  id: string;\n  announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  border: 0,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(100%)',\n  whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n  return (\n    <div\n      id={id}\n      style={visuallyHidden}\n      role=\"status\"\n      aria-live=\"assertive\"\n      aria-atomic\n    >\n      {announcement}\n    </div>\n  );\n}\n","import {useCallback, useState} from 'react';\n\nexport function useAnnouncement() {\n  const [announcement, setAnnouncement] = useState('');\n  const announce = useCallback((value: string | undefined) => {\n    if (value != null) {\n      setAnnouncement(value);\n    }\n  }, []);\n\n  return {announce, announcement} as const;\n}\n"],"names":["hiddenStyles","display","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","id","value","React","style","announcement","role","setAnnouncement","useState","announce","useCallback"],"mappings":"oJAOA,MAAMA,EAAoC,CACxCC,QAAS,QCALC,EAAsC,CAC1CC,SAAU,WACVC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,SAAU,SACVC,KAAM,gBACNC,SAAU,cACVC,WAAY,uCDPaC,GAACA,EAADC,MAAKA,WAE5BC,uBAAKF,GAAIA,EAAIG,MAAOhB,GACjBc,uBCOP,UAA2BD,GAACA,EAADI,aAAKA,WAE5BF,uBACEF,GAAIA,EACJG,MAAOd,EACPgB,KAAK,qBACK,8BAGTD,6CC3BEA,EAAcE,GAAmBC,WAAS,UAO1C,CAACC,SANSC,cAAaR,IACf,MAATA,GACFK,EAAgBL,IAEjB,IAEeG,aAAAA"}

package/dist/accessibility.esm.js

@@ -1,18 +1,19 @@
-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", {
     id: id,
     style: hiddenStyles
   }, value);
 }
 
-var visuallyHidden = {
+const visuallyHidden = {
   position: 'absolute',
   width: 1,
   height: 1,
@@ -24,9 +25,10 @@ var visuallyHidden = {
   clipPath: 'inset(100%)',
   whiteSpace: 'nowrap'
 };
-function LiveRegion(_ref) {
-  var id = _ref.id,
-      announcement = _ref.announcement;
+function LiveRegion({
+  id,
+  announcement
+}) {
   return React.createElement("div", {
     id: id,
     style: visuallyHidden,
@@ -37,13 +39,15 @@ function LiveRegion(_ref) {
 }
 
 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
   };
 }
 

package/dist/accessibility.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.esm.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n  id: string;\n  value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n  display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n  return (\n    <div id={id} style={hiddenStyles}>\n      {value}\n    </div>\n  );\n}\n","import React from 'react';\n\nexport interface Props {\n  id: string;\n  announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  border: 0,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(100%)',\n  whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n  return (\n    <div\n      id={id}\n      style={visuallyHidden}\n      role=\"status\"\n      aria-live=\"assertive\"\n      aria-atomic\n    >\n      {announcement}\n    </div>\n  );\n}\n","import {useState} from 'react';\n\nexport function useAnnouncement() {\n  const [announcement, setAnnouncement] = useState('');\n\n  return {announce: setAnnouncement, announcement} as const;\n}\n"],"names":["hiddenStyles","display","HiddenText","id","value","React","style","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","LiveRegion","announcement","role","useAnnouncement","useState","setAnnouncement","announce"],"mappings":";;AAOA,IAAMA,YAAY,GAAwB;AACxCC,EAAAA,OAAO,EAAE;AAD+B,CAA1C;SAIgBC;MAAYC,UAAAA;MAAIC,aAAAA;AAC9B,SACEC,mBAAA,MAAA;AAAKF,IAAAA,EAAE,EAAEA;AAAIG,IAAAA,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,IAAMG,cAAc,GAAwB;AAC1CC,EAAAA,QAAQ,EAAE,UADgC;AAE1CC,EAAAA,KAAK,EAAE,CAFmC;AAG1CC,EAAAA,MAAM,EAAE,CAHkC;AAI1CC,EAAAA,MAAM,EAAE,CAAC,CAJiC;AAK1CC,EAAAA,MAAM,EAAE,CALkC;AAM1CC,EAAAA,OAAO,EAAE,CANiC;AAO1CC,EAAAA,QAAQ,EAAE,QAPgC;AAQ1CC,EAAAA,IAAI,EAAE,eARoC;AAS1CC,EAAAA,QAAQ,EAAE,aATgC;AAU1CC,EAAAA,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC;MAAYf,UAAAA;MAAIgB,oBAAAA;AAC9B,SACEd,mBAAA,MAAA;AACEF,IAAAA,EAAE,EAAEA;AACJG,IAAAA,KAAK,EAAEC;AACPa,IAAAA,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;kBAC0BC,QAAQ,CAAC,EAAD;MAAzCH;MAAcI;;AAErB,SAAO;AAACC,IAAAA,QAAQ,EAAED,eAAX;AAA4BJ,IAAAA,YAAY,EAAZA;AAA5B,GAAP;AACD;;;;"}
+{"version":3,"file":"accessibility.esm.js","sources":["../src/components/HiddenText/HiddenText.tsx","../src/components/LiveRegion/LiveRegion.tsx","../src/hooks/useAnnouncement.ts"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n  id: string;\n  value: string;\n}\n\nconst hiddenStyles: React.CSSProperties = {\n  display: 'none',\n};\n\nexport function HiddenText({id, value}: Props) {\n  return (\n    <div id={id} style={hiddenStyles}>\n      {value}\n    </div>\n  );\n}\n","import React from 'react';\n\nexport interface Props {\n  id: string;\n  announcement: string;\n}\n\n// Hide element visually but keep it readable by screen readers\nconst visuallyHidden: React.CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  border: 0,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(100%)',\n  whiteSpace: 'nowrap',\n};\n\nexport function LiveRegion({id, announcement}: Props) {\n  return (\n    <div\n      id={id}\n      style={visuallyHidden}\n      role=\"status\"\n      aria-live=\"assertive\"\n      aria-atomic\n    >\n      {announcement}\n    </div>\n  );\n}\n","import {useCallback, useState} from 'react';\n\nexport function useAnnouncement() {\n  const [announcement, setAnnouncement] = useState('');\n  const announce = useCallback((value: string | undefined) => {\n    if (value != null) {\n      setAnnouncement(value);\n    }\n  }, []);\n\n  return {announce, announcement} as const;\n}\n"],"names":["hiddenStyles","display","HiddenText","id","value","React","style","visuallyHidden","position","width","height","margin","border","padding","overflow","clip","clipPath","whiteSpace","LiveRegion","announcement","role","useAnnouncement","setAnnouncement","useState","announce","useCallback"],"mappings":";;AAOA,MAAMA,YAAY,GAAwB;AACxCC,EAAAA,OAAO,EAAE;AAD+B,CAA1C;SAIgBC,WAAW;AAACC,EAAAA,EAAD;AAAKC,EAAAA;AAAL;AACzB,SACEC,mBAAA,MAAA;AAAKF,IAAAA,EAAE,EAAEA;AAAIG,IAAAA,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,MAAMG,cAAc,GAAwB;AAC1CC,EAAAA,QAAQ,EAAE,UADgC;AAE1CC,EAAAA,KAAK,EAAE,CAFmC;AAG1CC,EAAAA,MAAM,EAAE,CAHkC;AAI1CC,EAAAA,MAAM,EAAE,CAAC,CAJiC;AAK1CC,EAAAA,MAAM,EAAE,CALkC;AAM1CC,EAAAA,OAAO,EAAE,CANiC;AAO1CC,EAAAA,QAAQ,EAAE,QAPgC;AAQ1CC,EAAAA,IAAI,EAAE,eARoC;AAS1CC,EAAAA,QAAQ,EAAE,aATgC;AAU1CC,EAAAA,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC,WAAW;AAACf,EAAAA,EAAD;AAAKgB,EAAAA;AAAL;AACzB,SACEd,mBAAA,MAAA;AACEF,IAAAA,EAAE,EAAEA;AACJG,IAAAA,KAAK,EAAEC;AACPa,IAAAA,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;AACd,QAAM,CAACF,YAAD,EAAeG,eAAf,IAAkCC,QAAQ,CAAC,EAAD,CAAhD;AACA,QAAMC,QAAQ,GAAGC,WAAW,CAAErB,KAAD;AAC3B,QAAIA,KAAK,IAAI,IAAb,EAAmB;AACjBkB,MAAAA,eAAe,CAAClB,KAAD,CAAf;AACD;AACF,GAJ2B,EAIzB,EAJyB,CAA5B;AAMA,SAAO;AAACoB,IAAAA,QAAD;AAAWL,IAAAA;AAAX,GAAP;AACD;;;;"}

package/dist/hooks/useAnnouncement.d.ts

@@ -1,5 +1,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/package.json

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