@dnd-kit/accessibility 2.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @dnd-kit/accessibility
 
+## 3.0.1
+
+### Patch Changes
+
+- [#776](https://github.com/clauderic/dnd-kit/pull/776) [`3978c43`](https://github.com/clauderic/dnd-kit/commit/3978c43c6b045f10b75f47ad8bbea38a84437bd6) Thanks [@clauderic](https://github.com/clauderic)! - The ARIA live region element used for screen reader announcements is now positioned using `position: fixed` instead of `position: absolute`. As of `@dnd-kit/core^6.0.0`, the live region element is no longer portaled by default into the `document.body`. This change was introduced in order to fix issues with portaled live regions. However, this change can introduce visual regressions when using absolutely positioned elements, since the live region element is constrained to the stacking and position context of its closest positioned ancestor. Using fixed position ensures the element does not introduce visual regressions.
+
+## 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,20 +7,22 @@ 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;
+  let {
+    id,
+    value
+  } = _ref;
   return React__default.createElement("div", {
     id: id,
     style: hiddenStyles
   }, value);
 }
 
-var visuallyHidden = {
-  position: 'absolute',
+const visuallyHidden = {
+  position: 'fixed',
   width: 1,
   height: 1,
   margin: -1,
@@ -32,8 +34,10 @@ var visuallyHidden = {
   whiteSpace: 'nowrap'
 };
 function LiveRegion(_ref) {
-  var id = _ref.id,
-      announcement = _ref.announcement;
+  let {
+    id,
+    announcement
+  } = _ref;
   return React__default.createElement("div", {
     id: id,
     style: visuallyHidden,
@@ -44,13 +48,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: 'fixed',\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;EACxCC,OAAO,EAAE;AAD+B,CAA1C;SAIgBC;MAAW;IAACC,EAAD;IAAKC;;EAC9B,OACEC,4BAAA,MAAA;IAAKF,EAAE,EAAEA;IAAIG,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,MAAMG,cAAc,GAAwB;EAC1CC,QAAQ,EAAE,OADgC;EAE1CC,KAAK,EAAE,CAFmC;EAG1CC,MAAM,EAAE,CAHkC;EAI1CC,MAAM,EAAE,CAAC,CAJiC;EAK1CC,MAAM,EAAE,CALkC;EAM1CC,OAAO,EAAE,CANiC;EAO1CC,QAAQ,EAAE,QAPgC;EAQ1CC,IAAI,EAAE,eARoC;EAS1CC,QAAQ,EAAE,aATgC;EAU1CC,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC;MAAW;IAACf,EAAD;IAAKgB;;EAC9B,OACEd,4BAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEC;IACPa,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;EACd,MAAM,CAACF,YAAD,EAAeG,eAAf,IAAkCC,cAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,iBAAW,CAAErB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBkB,eAAe,CAAClB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACoB,QAAD;IAAWL;GAAlB;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:"fixed",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){let{id:t,value:r}=e;return n.createElement("div",{id:t,style:i},r)},exports.LiveRegion=function(e){let{id:t,announcement:i}=e;return n.createElement("div",{id:t,style:r,role:"status","aria-live":"assertive","aria-atomic":!0},i)},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: 'fixed',\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,QACVC,MAAO,EACPC,OAAQ,EACRC,QAAS,EACTC,OAAQ,EACRC,QAAS,EACTC,SAAU,SACVC,KAAM,gBACNC,SAAU,cACVC,WAAY,6CDPaC,GAACA,EAADC,MAAKA,KAC9B,OACEC,uBAAKF,GAAIA,EAAIG,MAAOhB,GACjBc,uCCOoBD,GAACA,EAADI,aAAKA,KAC9B,OACEF,uBACEF,GAAIA,EACJG,MAAOd,EACPgB,KAAK,qBACK,8BAGTD,uCC3BL,MAAOA,EAAcE,GAAmBC,WAAS,IAOjD,MAAO,CAACC,SANSC,cAAaR,IACf,MAATA,GACFK,EAAgBL,IAEjB,IAEeG,aAAAA"}

package/dist/accessibility.esm.js

@@ -1,19 +1,21 @@
-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;
+  let {
+    id,
+    value
+  } = _ref;
   return React.createElement("div", {
     id: id,
     style: hiddenStyles
   }, value);
 }
 
-var visuallyHidden = {
-  position: 'absolute',
+const visuallyHidden = {
+  position: 'fixed',
   width: 1,
   height: 1,
   margin: -1,
@@ -25,8 +27,10 @@ var visuallyHidden = {
   whiteSpace: 'nowrap'
 };
 function LiveRegion(_ref) {
-  var id = _ref.id,
-      announcement = _ref.announcement;
+  let {
+    id,
+    announcement
+  } = _ref;
   return React.createElement("div", {
     id: id,
     style: visuallyHidden,
@@ -37,13 +41,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: 'fixed',\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;EACxCC,OAAO,EAAE;AAD+B,CAA1C;SAIgBC;MAAW;IAACC,EAAD;IAAKC;;EAC9B,OACEC,mBAAA,MAAA;IAAKF,EAAE,EAAEA;IAAIG,KAAK,EAAEN;GAApB,EACGI,KADH,CADF;AAKD;;ACTD,MAAMG,cAAc,GAAwB;EAC1CC,QAAQ,EAAE,OADgC;EAE1CC,KAAK,EAAE,CAFmC;EAG1CC,MAAM,EAAE,CAHkC;EAI1CC,MAAM,EAAE,CAAC,CAJiC;EAK1CC,MAAM,EAAE,CALkC;EAM1CC,OAAO,EAAE,CANiC;EAO1CC,QAAQ,EAAE,QAPgC;EAQ1CC,IAAI,EAAE,eARoC;EAS1CC,QAAQ,EAAE,aATgC;EAU1CC,UAAU,EAAE;AAV8B,CAA5C;AAaA,SAAgBC;MAAW;IAACf,EAAD;IAAKgB;;EAC9B,OACEd,mBAAA,MAAA;IACEF,EAAE,EAAEA;IACJG,KAAK,EAAEC;IACPa,IAAI,EAAC;iBACK;;GAJZ,EAOGD,YAPH,CADF;AAWD;;SC/BeE;EACd,MAAM,CAACF,YAAD,EAAeG,eAAf,IAAkCC,QAAQ,CAAC,EAAD,CAAhD;EACA,MAAMC,QAAQ,GAAGC,WAAW,CAAErB,KAAD;IAC3B,IAAIA,KAAK,IAAI,IAAb,EAAmB;MACjBkB,eAAe,CAAClB,KAAD,CAAf;;GAFwB,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IAACoB,QAAD;IAAWL;GAAlB;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.1",
   "description": "A generic toolkit to help with accessibility",
   "author": "Claudéric Demers",
   "license": "MIT",