react-aria 3.51.0 → 3.52.1

package/dist/private/tokenfield/useToken.js

@@ -1,3 +1,4 @@
+import {isVirtualClick as $fa0ef9dfcca012a7$export$60278871457622de} from "../utils/isVirtualEvent.js";
 import {useEvent as $c3cab330536504ec$export$90fc3a17d93f704c} from "../utils/useEvent.js";
 import {useState as $bIBdX$useState, useRef as $bIBdX$useRef} from "react";
 
@@ -13,14 +14,15 @@ import {useState as $bIBdX$useState, useRef as $bIBdX$useRef} from "react";
  * governing
  */ 
 
+
 function $a06747c3f56c51df$export$31dcd79391e423fe(// Unused but matches the normal signature.
 _props, _state, ref) {
     let [isSelected, setSelected] = (0, $bIBdX$useState)(false);
     (0, $c3cab330536504ec$export$90fc3a17d93f704c)((0, $bIBdX$useRef)(typeof document !== 'undefined' ? document : null), 'selectionchange', ()=>{
         let selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0 || !ref.current) return;
-        let range = selection.getRangeAt(0);
-        if (!range.collapsed && range.intersectsNode(ref.current)) setSelected(true);
+        if (!selection || !ref.current) return;
+        let range = selection.rangeCount === 0 ? null : selection.getRangeAt(0);
+        if (!(range === null || range === void 0 ? void 0 : range.collapsed) && (range === null || range === void 0 ? void 0 : range.intersectsNode(ref.current))) setSelected(true);
         else setSelected(false);
     });
     return {
@@ -29,7 +31,21 @@ _props, _state, ref) {
             suppressContentEditableWarning: true,
             style: {
                 userSelect: 'all',
-                WebkitUserSelect: 'all'
+                WebkitUserSelect: 'all',
+                WebkitTapHighlightColor: 'transparent'
+            },
+            onClick (e) {
+                var _ref_current;
+                // Select the token when a screen reader clicks on it.
+                if (isSelected || !(0, $fa0ef9dfcca012a7$export$60278871457622de)(e.nativeEvent)) return;
+                let selection = window.getSelection();
+                let wrapper = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.parentElement;
+                if (!selection || !wrapper) return;
+                let range = document.createRange();
+                range.setStartBefore(wrapper);
+                range.setEndAfter(wrapper);
+                selection.removeAllRanges();
+                selection.addRange(range);
             }
         },
         isSelected: isSelected

package/dist/private/tokenfield/useToken.js.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAkBM,SAAS,0CACd,2CAA2C;AAC3C,MAAkB,EAClB,MAAW,EACX,GAAsC;IAEtC,IAAI,CAAC,YAAY,YAAY,GAAG,CAAA,GAAA,eAAO,EAAE;IAEzC,CAAA,GAAA,yCAAO,EAAE,CAAA,GAAA,aAAK,EAAE,OAAO,aAAa,cAAc,WAAW,OAAO,mBAAmB;QACrF,IAAI,YAAY,OAAO,YAAY;QACnC,IAAI,CAAC,aAAa,UAAU,UAAU,KAAK,KAAK,CAAC,IAAI,OAAO,EAC1D;QAGF,IAAI,QAAQ,UAAU,UAAU,CAAC;QACjC,IAAI,CAAC,MAAM,SAAS,IAAI,MAAM,cAAc,CAAC,IAAI,OAAO,GACtD,YAAY;aAEZ,YAAY;IAEhB;IAEA,OAAO;QACL,YAAY;YACV,iBAAiB;YACjB,gCAAgC;YAChC,OAAO;gBACL,YAAY;gBACZ,kBAAkB;YACpB;QACF;oBACA;IACF;AACF","sources":["packages/react-aria/src/tokenfield/useToken.ts"],"sourcesContent":["/*\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing\n */\n\nimport {HTMLAttributes, RefObject, useRef, useState} from 'react';\nimport {useEvent} from '../utils/useEvent';\n\nexport interface TokenProps {}\n\nexport interface TokenAria {\n  /** Props for the token element. */\n  tokenProps: HTMLAttributes<HTMLSpanElement>;\n  /** Whether the token is currently selected. */\n  isSelected: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a token within a token field.\n * A token field allows users to enter text with inline tokens.\n */\nexport function useToken(\n  // Unused but matches the normal signature.\n  _props: TokenProps,\n  _state: any,\n  ref: RefObject<HTMLSpanElement | null>\n): TokenAria {\n  let [isSelected, setSelected] = useState(false);\n\n  useEvent(useRef(typeof document !== 'undefined' ? document : null), 'selectionchange', () => {\n    let selection = window.getSelection();\n    if (!selection || selection.rangeCount === 0 || !ref.current) {\n      return;\n    }\n\n    let range = selection.getRangeAt(0);\n    if (!range.collapsed && range.intersectsNode(ref.current)) {\n      setSelected(true);\n    } else {\n      setSelected(false);\n    }\n  });\n\n  return {\n    tokenProps: {\n      contentEditable: false,\n      suppressContentEditableWarning: true,\n      style: {\n        userSelect: 'all',\n        WebkitUserSelect: 'all'\n      }\n    },\n    isSelected\n  };\n}\n"],"names":[],"version":3,"file":"useToken.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,SAAS,0CACd,2CAA2C;AAC3C,MAAkB,EAClB,MAAW,EACX,GAAsC;IAEtC,IAAI,CAAC,YAAY,YAAY,GAAG,CAAA,GAAA,eAAO,EAAE;IAEzC,CAAA,GAAA,yCAAO,EAAE,CAAA,GAAA,aAAK,EAAE,OAAO,aAAa,cAAc,WAAW,OAAO,mBAAmB;QACrF,IAAI,YAAY,OAAO,YAAY;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,OAAO,EAC5B;QAGF,IAAI,QAAQ,UAAU,UAAU,KAAK,IAAI,OAAO,UAAU,UAAU,CAAC;QACrE,IAAI,EAAC,kBAAA,4BAAA,MAAO,SAAS,MAAI,kBAAA,4BAAA,MAAO,cAAc,CAAC,IAAI,OAAO,IACxD,YAAY;aAEZ,YAAY;IAEhB;IAEA,OAAO;QACL,YAAY;YACV,iBAAiB;YACjB,gCAAgC;YAChC,OAAO;gBACL,YAAY;gBACZ,kBAAkB;gBAClB,yBAAyB;YAC3B;YACA,SAAQ,CAAC;oBAMO;gBALd,sDAAsD;gBACtD,IAAI,cAAc,CAAC,CAAA,GAAA,yCAAa,EAAE,EAAE,WAAW,GAC7C;gBAEF,IAAI,YAAY,OAAO,YAAY;gBACnC,IAAI,WAAU,eAAA,IAAI,OAAO,cAAX,mCAAA,aAAa,aAAa;gBACxC,IAAI,CAAC,aAAa,CAAC,SACjB;gBAEF,IAAI,QAAQ,SAAS,WAAW;gBAChC,MAAM,cAAc,CAAC;gBACrB,MAAM,WAAW,CAAC;gBAClB,UAAU,eAAe;gBACzB,UAAU,QAAQ,CAAC;YACrB;QACF;oBACA;IACF;AACF","sources":["packages/react-aria/src/tokenfield/useToken.ts"],"sourcesContent":["/*\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing\n */\n\nimport {HTMLAttributes, RefObject, useRef, useState} from 'react';\nimport {isVirtualClick} from '../utils/isVirtualEvent';\nimport {useEvent} from '../utils/useEvent';\n\nexport interface TokenProps {}\n\nexport interface TokenAria {\n  /** Props for the token element. */\n  tokenProps: HTMLAttributes<HTMLSpanElement>;\n  /** Whether the token is currently selected. */\n  isSelected: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a token within a token field.\n * A token field allows users to enter text with inline tokens.\n */\nexport function useToken(\n  // Unused but matches the normal signature.\n  _props: TokenProps,\n  _state: any,\n  ref: RefObject<HTMLSpanElement | null>\n): TokenAria {\n  let [isSelected, setSelected] = useState(false);\n\n  useEvent(useRef(typeof document !== 'undefined' ? document : null), 'selectionchange', () => {\n    let selection = window.getSelection();\n    if (!selection || !ref.current) {\n      return;\n    }\n\n    let range = selection.rangeCount === 0 ? null : selection.getRangeAt(0);\n    if (!range?.collapsed && range?.intersectsNode(ref.current)) {\n      setSelected(true);\n    } else {\n      setSelected(false);\n    }\n  });\n\n  return {\n    tokenProps: {\n      contentEditable: false,\n      suppressContentEditableWarning: true,\n      style: {\n        userSelect: 'all',\n        WebkitUserSelect: 'all',\n        WebkitTapHighlightColor: 'transparent'\n      },\n      onClick(e) {\n        // Select the token when a screen reader clicks on it.\n        if (isSelected || !isVirtualClick(e.nativeEvent)) {\n          return;\n        }\n        let selection = window.getSelection();\n        let wrapper = ref.current?.parentElement;\n        if (!selection || !wrapper) {\n          return;\n        }\n        let range = document.createRange();\n        range.setStartBefore(wrapper);\n        range.setEndAfter(wrapper);\n        selection.removeAllRanges();\n        selection.addRange(range);\n      }\n    },\n    isSelected\n  };\n}\n"],"names":[],"version":3,"file":"useToken.js.map"}

package/dist/private/tokenfield/useToken.mjs

@@ -1,3 +1,4 @@
+import {isVirtualClick as $b5c62b033c25b96d$export$60278871457622de} from "../utils/isVirtualEvent.mjs";
 import {useEvent as $600b3cf69ae46262$export$90fc3a17d93f704c} from "../utils/useEvent.mjs";
 import {useState as $gQiz1$useState, useRef as $gQiz1$useRef} from "react";
 
@@ -13,14 +14,15 @@ import {useState as $gQiz1$useState, useRef as $gQiz1$useRef} from "react";
  * governing
  */ 
 
+
 function $d089f4b2a715a8e0$export$31dcd79391e423fe(// Unused but matches the normal signature.
 _props, _state, ref) {
     let [isSelected, setSelected] = (0, $gQiz1$useState)(false);
     (0, $600b3cf69ae46262$export$90fc3a17d93f704c)((0, $gQiz1$useRef)(typeof document !== 'undefined' ? document : null), 'selectionchange', ()=>{
         let selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0 || !ref.current) return;
-        let range = selection.getRangeAt(0);
-        if (!range.collapsed && range.intersectsNode(ref.current)) setSelected(true);
+        if (!selection || !ref.current) return;
+        let range = selection.rangeCount === 0 ? null : selection.getRangeAt(0);
+        if (!range?.collapsed && range?.intersectsNode(ref.current)) setSelected(true);
         else setSelected(false);
     });
     return {
@@ -29,7 +31,20 @@ _props, _state, ref) {
             suppressContentEditableWarning: true,
             style: {
                 userSelect: 'all',
-                WebkitUserSelect: 'all'
+                WebkitUserSelect: 'all',
+                WebkitTapHighlightColor: 'transparent'
+            },
+            onClick (e) {
+                // Select the token when a screen reader clicks on it.
+                if (isSelected || !(0, $b5c62b033c25b96d$export$60278871457622de)(e.nativeEvent)) return;
+                let selection = window.getSelection();
+                let wrapper = ref.current?.parentElement;
+                if (!selection || !wrapper) return;
+                let range = document.createRange();
+                range.setStartBefore(wrapper);
+                range.setEndAfter(wrapper);
+                selection.removeAllRanges();
+                selection.addRange(range);
             }
         },
         isSelected: isSelected

package/dist/private/tokenfield/useToken.mjs.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAkBM,SAAS,0CACd,2CAA2C;AAC3C,MAAkB,EAClB,MAAW,EACX,GAAsC;IAEtC,IAAI,CAAC,YAAY,YAAY,GAAG,CAAA,GAAA,eAAO,EAAE;IAEzC,CAAA,GAAA,yCAAO,EAAE,CAAA,GAAA,aAAK,EAAE,OAAO,aAAa,cAAc,WAAW,OAAO,mBAAmB;QACrF,IAAI,YAAY,OAAO,YAAY;QACnC,IAAI,CAAC,aAAa,UAAU,UAAU,KAAK,KAAK,CAAC,IAAI,OAAO,EAC1D;QAGF,IAAI,QAAQ,UAAU,UAAU,CAAC;QACjC,IAAI,CAAC,MAAM,SAAS,IAAI,MAAM,cAAc,CAAC,IAAI,OAAO,GACtD,YAAY;aAEZ,YAAY;IAEhB;IAEA,OAAO;QACL,YAAY;YACV,iBAAiB;YACjB,gCAAgC;YAChC,OAAO;gBACL,YAAY;gBACZ,kBAAkB;YACpB;QACF;oBACA;IACF;AACF","sources":["packages/react-aria/src/tokenfield/useToken.ts"],"sourcesContent":["/*\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing\n */\n\nimport {HTMLAttributes, RefObject, useRef, useState} from 'react';\nimport {useEvent} from '../utils/useEvent';\n\nexport interface TokenProps {}\n\nexport interface TokenAria {\n  /** Props for the token element. */\n  tokenProps: HTMLAttributes<HTMLSpanElement>;\n  /** Whether the token is currently selected. */\n  isSelected: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a token within a token field.\n * A token field allows users to enter text with inline tokens.\n */\nexport function useToken(\n  // Unused but matches the normal signature.\n  _props: TokenProps,\n  _state: any,\n  ref: RefObject<HTMLSpanElement | null>\n): TokenAria {\n  let [isSelected, setSelected] = useState(false);\n\n  useEvent(useRef(typeof document !== 'undefined' ? document : null), 'selectionchange', () => {\n    let selection = window.getSelection();\n    if (!selection || selection.rangeCount === 0 || !ref.current) {\n      return;\n    }\n\n    let range = selection.getRangeAt(0);\n    if (!range.collapsed && range.intersectsNode(ref.current)) {\n      setSelected(true);\n    } else {\n      setSelected(false);\n    }\n  });\n\n  return {\n    tokenProps: {\n      contentEditable: false,\n      suppressContentEditableWarning: true,\n      style: {\n        userSelect: 'all',\n        WebkitUserSelect: 'all'\n      }\n    },\n    isSelected\n  };\n}\n"],"names":[],"version":3,"file":"useToken.mjs.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,SAAS,0CACd,2CAA2C;AAC3C,MAAkB,EAClB,MAAW,EACX,GAAsC;IAEtC,IAAI,CAAC,YAAY,YAAY,GAAG,CAAA,GAAA,eAAO,EAAE;IAEzC,CAAA,GAAA,yCAAO,EAAE,CAAA,GAAA,aAAK,EAAE,OAAO,aAAa,cAAc,WAAW,OAAO,mBAAmB;QACrF,IAAI,YAAY,OAAO,YAAY;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,OAAO,EAC5B;QAGF,IAAI,QAAQ,UAAU,UAAU,KAAK,IAAI,OAAO,UAAU,UAAU,CAAC;QACrE,IAAI,CAAC,OAAO,aAAa,OAAO,eAAe,IAAI,OAAO,GACxD,YAAY;aAEZ,YAAY;IAEhB;IAEA,OAAO;QACL,YAAY;YACV,iBAAiB;YACjB,gCAAgC;YAChC,OAAO;gBACL,YAAY;gBACZ,kBAAkB;gBAClB,yBAAyB;YAC3B;YACA,SAAQ,CAAC;gBACP,sDAAsD;gBACtD,IAAI,cAAc,CAAC,CAAA,GAAA,yCAAa,EAAE,EAAE,WAAW,GAC7C;gBAEF,IAAI,YAAY,OAAO,YAAY;gBACnC,IAAI,UAAU,IAAI,OAAO,EAAE;gBAC3B,IAAI,CAAC,aAAa,CAAC,SACjB;gBAEF,IAAI,QAAQ,SAAS,WAAW;gBAChC,MAAM,cAAc,CAAC;gBACrB,MAAM,WAAW,CAAC;gBAClB,UAAU,eAAe;gBACzB,UAAU,QAAQ,CAAC;YACrB;QACF;oBACA;IACF;AACF","sources":["packages/react-aria/src/tokenfield/useToken.ts"],"sourcesContent":["/*\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing\n */\n\nimport {HTMLAttributes, RefObject, useRef, useState} from 'react';\nimport {isVirtualClick} from '../utils/isVirtualEvent';\nimport {useEvent} from '../utils/useEvent';\n\nexport interface TokenProps {}\n\nexport interface TokenAria {\n  /** Props for the token element. */\n  tokenProps: HTMLAttributes<HTMLSpanElement>;\n  /** Whether the token is currently selected. */\n  isSelected: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a token within a token field.\n * A token field allows users to enter text with inline tokens.\n */\nexport function useToken(\n  // Unused but matches the normal signature.\n  _props: TokenProps,\n  _state: any,\n  ref: RefObject<HTMLSpanElement | null>\n): TokenAria {\n  let [isSelected, setSelected] = useState(false);\n\n  useEvent(useRef(typeof document !== 'undefined' ? document : null), 'selectionchange', () => {\n    let selection = window.getSelection();\n    if (!selection || !ref.current) {\n      return;\n    }\n\n    let range = selection.rangeCount === 0 ? null : selection.getRangeAt(0);\n    if (!range?.collapsed && range?.intersectsNode(ref.current)) {\n      setSelected(true);\n    } else {\n      setSelected(false);\n    }\n  });\n\n  return {\n    tokenProps: {\n      contentEditable: false,\n      suppressContentEditableWarning: true,\n      style: {\n        userSelect: 'all',\n        WebkitUserSelect: 'all',\n        WebkitTapHighlightColor: 'transparent'\n      },\n      onClick(e) {\n        // Select the token when a screen reader clicks on it.\n        if (isSelected || !isVirtualClick(e.nativeEvent)) {\n          return;\n        }\n        let selection = window.getSelection();\n        let wrapper = ref.current?.parentElement;\n        if (!selection || !wrapper) {\n          return;\n        }\n        let range = document.createRange();\n        range.setStartBefore(wrapper);\n        range.setEndAfter(wrapper);\n        selection.removeAllRanges();\n        selection.addRange(range);\n      }\n    },\n    isSelected\n  };\n}\n"],"names":[],"version":3,"file":"useToken.mjs.map"}

package/dist/private/tokenfield/useTokenField.cjs

@@ -1,9 +1,11 @@
 var $74b2c5b1e7ea9589$exports = require("../live-announcer/LiveAnnouncer.cjs");
 var $da02ee888921bc9e$exports = require("../utils/shadowdom/DOMFunctions.cjs");
+var $d0df89f3abe2c2ca$exports = require("../interactions/useFocusVisible.cjs");
 var $49582955cc364b1c$exports = require("../utils/domHelpers.cjs");
+var $e2a63525475bbd9f$exports = require("../utils/getScrollParents.cjs");
 var $d0b4a781cf26e80b$exports = require("../utils/platform.cjs");
 var $89b39774f3b79dbb$exports = require("../utils/mergeProps.cjs");
-var $d0df89f3abe2c2ca$exports = require("../interactions/useFocusVisible.cjs");
+var $9a1324d6ffd8bbb0$exports = require("../utils/scrollIntoView.cjs");
 var $6e76e65001bbcda2$exports = require("../utils/useEvent.cjs");
 var $e3486d9c44549186$exports = require("../label/useField.cjs");
 var $cfe896014413cb8c$exports = require("../interactions/useFocusable.cjs");
@@ -19,8 +21,8 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "useTokenField", function () { return $a3a7b013e6c801ed$export$adf3c8de3c7afc8b; });
-$parcel$export(module.exports, "getSelection", function () { return $a3a7b013e6c801ed$export$ca798a7e6e94638c; });
 $parcel$export(module.exports, "setTokenFieldSelection", function () { return $a3a7b013e6c801ed$export$9cafaa09e78b6e4b; });
+$parcel$export(module.exports, "getSelection", function () { return $a3a7b013e6c801ed$export$ca798a7e6e94638c; });
 $parcel$export(module.exports, "tokenFieldPositionToDOMRange", function () { return $a3a7b013e6c801ed$export$30729a8cd0694a7c; });
 /*
  * Copyright 2026 Adobe. All rights reserved.
@@ -46,6 +48,8 @@ $parcel$export(module.exports, "tokenFieldPositionToDOMRange", function () { ret
 
 
 
+
+
 const $a3a7b013e6c801ed$var$CLIPBOARD_MIME_TYPE = 'application/vnd.react-aria.tokens+json';
 function $a3a7b013e6c801ed$export$adf3c8de3c7afc8b(props, state, ref) {
     let { role: role = 'textbox', allowsNewlines: multiline = false, isReadOnly: isReadOnly = false, isDisabled: isDisabled = false, 'aria-details': ariaDetails } = props;
@@ -111,21 +115,30 @@ function $a3a7b013e6c801ed$export$adf3c8de3c7afc8b(props, state, ref) {
         if (state.isComposing && value !== nextValue.current) stopComposition();
         nextValue.current = value;
     });
-    let caretPosition = (0, $bmmaU$react.useRef)(null);
+    let selectedRange = (0, $bmmaU$react.useRef)(null);
     (0, $429333cab433657c$exports.useLayoutEffect)(()=>{
-        if (ref.current && value.caretPosition && !state.isComposing && value.caretPosition !== caretPosition.current) {
+        if (ref.current && !state.isComposing && value.selectedRange !== selectedRange.current) {
             // Only move the caret when the field is already focused.
-            if (ref.current === (0, $da02ee888921bc9e$exports.getActiveElement)((0, $49582955cc364b1c$exports.getOwnerDocument)(ref.current))) $a3a7b013e6c801ed$var$setCursor(ref.current, value.caretPosition);
-            caretPosition.current = value.caretPosition;
+            if (ref.current === (0, $da02ee888921bc9e$exports.getActiveElement)((0, $49582955cc364b1c$exports.getOwnerDocument)(ref.current))) {
+                $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(ref.current, value.selectedRange);
+                $a3a7b013e6c801ed$var$announceToken(value);
+                // We call preventDefault in the beforeinput handler below, which also prevents the
+                // browser's default behavior of scrolling the caret into view. Do it ourselves instead.
+                $a3a7b013e6c801ed$var$scrollCaretIntoView(ref.current);
+            }
+            selectedRange.current = value.selectedRange;
         }
     });
     // Handle text editing commands and prevent browser default behavior.
     (0, $6e76e65001bbcda2$exports.useEvent)(ref, 'beforeinput', (e)=>{
         // Android sometimes doesn't fire a compositionend event before a regular input event.
         if (state.isComposing && !e.isComposing) stopComposition();
-        let selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) return;
-        let range = selection.getRangeAt(0);
+        let range = e.getTargetRanges()[0];
+        if (!range) {
+            let selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0) return;
+            range = selection.getRangeAt(0);
+        }
         let [start, end] = $a3a7b013e6c801ed$var$rangeToPositions(ref.current, range);
         // https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes
         switch(e.inputType){
@@ -179,7 +192,7 @@ function $a3a7b013e6c801ed$export$adf3c8de3c7afc8b(props, state, ref) {
             case 'deleteContent':
             case 'deleteByCut':
             case 'deleteCompositionText':
-                if (!range.collapsed) {
+                if (!range.collapsed && !$a3a7b013e6c801ed$var$isSamePosition(start, end)) {
                     apply((tokens)=>tokens.replaceRange(start, end, ''));
                     break;
                 }
@@ -251,15 +264,19 @@ function $a3a7b013e6c801ed$export$adf3c8de3c7afc8b(props, state, ref) {
         value.endCoalescing();
         // When the cursor moves next to a token, announce it.
         // Otherwise the screen reader will only announce the first/last character.
-        if (window.getSelection()?.isCollapsed) {
-            let [start, end] = $a3a7b013e6c801ed$export$ca798a7e6e94638c(ref.current);
-            if (start.offset === 0) {
-                let segment = value.segments[start.index];
-                if (segment?.type !== 'token') segment = value.segments[start.index - 1];
-                if (segment?.type === 'token') (0, $74b2c5b1e7ea9589$exports.announce)(segment.text, 'assertive');
-                // Update the caret position in the value.
-                state.setValue((value)=>value.withCaretPosition(end));
-            }
+        let range = $a3a7b013e6c801ed$export$6ec3e5953919831d(ref.current);
+        if (!range) return;
+        $a3a7b013e6c801ed$var$announceToken(value, range);
+        // Update the selected range in the value.
+        state.setValue((value)=>value.withSelectedRange(range));
+    });
+    // Clear selection on blur.
+    (0, $6e76e65001bbcda2$exports.useEvent)(ref, 'blur', (e)=>{
+        if (!e.isTrusted) return;
+        let selection = window.getSelection();
+        if (ref.current && selection && selection.containsNode(ref.current, true) && !selection.isCollapsed) {
+            selection.removeAllRanges();
+            state.setValue((value)=>value.withSelectedRange(new (0, $bmmaU$reactstatelyuseTokenFieldState.TokenFieldValue).SelectedRange(value.caretPosition)));
         }
     });
     // Override the default triple click behavior to ensure that tokens get selected.
@@ -272,7 +289,7 @@ function $a3a7b013e6c801ed$export$adf3c8de3c7afc8b(props, state, ref) {
             let end = value.findLineBoundary(selection[1], (0, $bmmaU$reactstatelyuseTokenFieldState.TokenFieldValue).Direction.Forward);
             if (start && end) {
                 e.preventDefault();
-                $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(ref.current, start, end, true);
+                $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(ref.current, new (0, $bmmaU$reactstatelyuseTokenFieldState.TokenFieldValue).SelectedRange(start, end), true);
             }
         }
     });
@@ -425,15 +442,22 @@ function $a3a7b013e6c801ed$export$ca798a7e6e94638c(container) {
     let range = selection.getRangeAt(0);
     return $a3a7b013e6c801ed$var$rangeToPositions(container, range);
 }
+function $a3a7b013e6c801ed$export$6ec3e5953919831d(container) {
+    let selection = window.getSelection();
+    if (!selection || !selection.anchorNode || !selection.focusNode || !(0, $da02ee888921bc9e$exports.nodeContains)(container, selection.anchorNode) || !(0, $da02ee888921bc9e$exports.nodeContains)(container, selection.focusNode)) return null;
+    let anchor = $a3a7b013e6c801ed$var$getPosition(container, selection.anchorNode, selection.anchorOffset, false);
+    let current = $a3a7b013e6c801ed$var$getPosition(container, selection.focusNode, selection.focusOffset, !selection.isCollapsed);
+    return new (0, $bmmaU$reactstatelyuseTokenFieldState.TokenFieldValue).SelectedRange(anchor, current);
+}
 function $a3a7b013e6c801ed$var$rangeToPositions(container, range) {
-    let start = $a3a7b013e6c801ed$var$getPosition(container, range.startContainer, range.startOffset);
-    let end = $a3a7b013e6c801ed$var$getPosition(container, range.endContainer, range.endOffset);
+    let start = $a3a7b013e6c801ed$var$getPosition(container, range.startContainer, range.startOffset, false);
+    let end = $a3a7b013e6c801ed$var$getPosition(container, range.endContainer, range.endOffset, !range.collapsed);
     return [
         start,
         end
     ];
 }
-function $a3a7b013e6c801ed$var$getPosition(container, node, offset) {
+function $a3a7b013e6c801ed$var$getPosition(container, node, offset, isRangeEnd = false) {
     if (node === container) return {
         index: offset,
         offset: 0
@@ -446,7 +470,7 @@ function $a3a7b013e6c801ed$var$getPosition(container, node, offset) {
         let atEnd;
         let endOffset = 0;
         if (originalNode === tokenNode) // Cursor is inside the token.
-        atEnd = offset > 0;
+        atEnd = isRangeEnd || offset > 0;
         else if (originalNode === node) // Cursor is inside the wrapper element.
         atEnd = offset > 1;
         else {
@@ -474,37 +498,127 @@ function $a3a7b013e6c801ed$var$getPosition(container, node, offset) {
 }
 let $a3a7b013e6c801ed$var$isProgrammaticSelectionChange = Symbol('isProgrammaticSelectionChange');
 function $a3a7b013e6c801ed$var$setCursor(root, pos, fireEvent = false) {
-    $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(root, pos, pos, fireEvent);
+    $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(root, new (0, $bmmaU$reactstatelyuseTokenFieldState.TokenFieldValue).SelectedRange(pos), fireEvent);
 }
-function $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(root, start, end, fireEvent = false) {
+function $a3a7b013e6c801ed$export$9cafaa09e78b6e4b(root, selectedRange, fireEvent = false) {
     let selection = window.getSelection();
     if (selection) {
-        let range = $a3a7b013e6c801ed$var$createDOMRange(root, start, end);
+        // Use setBaseAndExtent to preserve the selection direction. A plain Range +
+        // addRange always produces a forward selection and collapses when the
+        // anchor comes after the current position (backward selections).
+        let [anchorNode, anchorOffset] = $a3a7b013e6c801ed$var$getDOMPosition(root, selectedRange.anchor);
+        let [focusNode, focusOffset] = $a3a7b013e6c801ed$var$getDOMPosition(root, selectedRange.current);
         root[$a3a7b013e6c801ed$var$isProgrammaticSelectionChange] = !fireEvent;
-        selection.removeAllRanges();
-        selection.addRange(range);
+        // Only set selection if it has changed, because this can clobber the browser's selection direction.
+        if (selection.anchorNode !== anchorNode || selection.anchorOffset !== anchorOffset || selection.focusNode !== focusNode || selection.focusOffset !== focusOffset) selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    }
+}
+// Calling preventDefault in the beforeinput handler stops the browser from performing its
+// default edit action, which also suppresses its normal behavior of scrolling the caret into
+// view. Recreate that behavior by measuring the caret's position with a Range and
+// scrolling each scrollable ancestor of the field so it is visible.
+function $a3a7b013e6c801ed$var$scrollCaretIntoView(root) {
+    let selection = window.getSelection();
+    if ((0, $d0df89f3abe2c2ca$exports.getInteractionModality)() !== 'keyboard' || !selection || selection.rangeCount === 0 || !(0, $da02ee888921bc9e$exports.nodeContains)(root, selection.focusNode)) return;
+    let range = selection.getRangeAt(0);
+    let rect = range.getBoundingClientRect();
+    // A collapsed range doesn't always produce a client rect. This happens for empty lines.
+    if (rect.top === 0 && rect.bottom === 0 && rect.left === 0 && rect.right === 0) {
+        let node = range.endContainer;
+        if (node.nodeType === Node.TEXT_NODE && range.endOffset < node.nodeValue.length) {
+            // If we are not at the end of the text node, extend the range to include the next character.
+            range = range.cloneRange();
+            range.setEnd(node, range.endOffset + 1);
+            rect = range.getBoundingClientRect();
+        } else if (root.firstChild == null) // If the root has no children, use its rect.
+        rect = root.getBoundingClientRect();
+        else {
+            // Otherwise find the next sibling element (e.g. trailing <br>) and use its rect in this case.
+            let nextSibling = node.nextSibling;
+            while(node && node !== root && !nextSibling){
+                node = node.parentNode;
+                nextSibling = node ? node.nextSibling : null;
+            }
+            if (nextSibling?.nodeType === Node.ELEMENT_NODE) rect = nextSibling.getBoundingClientRect();
+        }
+    }
+    for (let element of (0, $e2a63525475bbd9f$exports.getScrollParents)(root, true)){
+        // scrollRectIntoView only scrolls a single scroll parent based on `rect`, which is a
+        // snapshot of the caret's position before any scrolling occurs. Scrolling an inner ancestor
+        // moves the caret within the viewport, so translate `rect` by however much we just scrolled
+        // before moving on to the next (outer) ancestor.
+        let scrollParent = element;
+        let beforeTop = scrollParent.scrollTop;
+        let beforeLeft = scrollParent.scrollLeft;
+        (0, $9a1324d6ffd8bbb0$exports.scrollRectIntoView)(scrollParent, root, rect, {
+            block: 'nearest',
+            inline: 'nearest'
+        });
+        let dy = scrollParent.scrollTop - beforeTop;
+        let dx = scrollParent.scrollLeft - beforeLeft;
+        if (dy !== 0 || dx !== 0) rect = new DOMRect(rect.x - dx, rect.y - dy, rect.width, rect.height);
     }
 }
 function $a3a7b013e6c801ed$export$30729a8cd0694a7c(root, pos) {
-    return $a3a7b013e6c801ed$var$createDOMRange(root, pos, pos);
+    // Unlike createDOMRange (used for caret/selection placement), this range is only
+    // measured via getBoundingClientRect to position things like an autocomplete popover.
+    // Place the endpoints inside the token's zero width space wrappers so the range has a
+    // valid rect at the token, rather than a collapsed root-level position.
+    let range = document.createRange();
+    let [startContainer, startOffset] = $a3a7b013e6c801ed$var$getDOMRectPosition(root, pos);
+    range.setStart(startContainer, startOffset);
+    range.setEnd(startContainer, startOffset);
+    return range;
+}
+function $a3a7b013e6c801ed$var$getDOMRectPosition(root, pos) {
+    let child = root.childNodes[pos.index];
+    if (child && child.nodeType === Node.ELEMENT_NODE) {
+        // Place the position inside the zero width space wrappers around the token.
+        if (pos.offset > 0) return [
+            child.lastChild,
+            1
+        ];
+        else return [
+            child.firstChild,
+            0
+        ];
+    }
+    return $a3a7b013e6c801ed$var$getDOMPosition(root, pos);
 }
 function $a3a7b013e6c801ed$var$createDOMRange(root, start, end) {
     let range = document.createRange();
-    let startChild = root.childNodes[start.index];
-    if (!startChild) range.setStart(root, Math.min(root.childNodes.length, start.index));
-    else if (startChild.nodeType === Node.ELEMENT_NODE) {
-        // Place the cursor outside the token wrapper element.
-        if (start.offset > 0) range.setStartAfter(startChild);
-        else range.setStartBefore(startChild);
-    } else range.setStart(startChild, start.offset);
-    let endChild = root.childNodes[end.index];
-    if (!endChild) range.setEnd(root, Math.min(root.childNodes.length, end.index));
-    else if (endChild.nodeType === Node.ELEMENT_NODE) {
-        if (end.offset > 0) range.setEndAfter(endChild);
-        else range.setEndBefore(endChild);
-    } else range.setEnd(endChild, end.offset);
+    let [startContainer, startOffset] = $a3a7b013e6c801ed$var$getDOMPosition(root, start);
+    let [endContainer, endOffset] = $a3a7b013e6c801ed$var$getDOMPosition(root, end);
+    range.setStart(startContainer, startOffset);
+    range.setEnd(endContainer, endOffset);
     return range;
 }
+function $a3a7b013e6c801ed$var$getDOMPosition(root, pos) {
+    let index = Math.max(0, Math.min(root.childNodes.length, pos.index));
+    let child = root.childNodes[index];
+    if (!child) return [
+        root,
+        index
+    ];
+    else if (child.nodeType === Node.ELEMENT_NODE) {
+        // Place the cursor outside the token wrapper element.
+        // This is necessary for composition events.
+        if (pos.offset > 0) return [
+            root,
+            index + 1
+        ];
+        else return [
+            root,
+            index
+        ];
+    } else {
+        let offset = Math.max(0, Math.min(child.textContent?.length ?? 0, pos.offset));
+        return [
+            child,
+            offset
+        ];
+    }
+}
 function $a3a7b013e6c801ed$var$isSamePosition(a, b) {
     return a.index === b.index && a.offset === b.offset;
 }
@@ -582,6 +696,21 @@ function $a3a7b013e6c801ed$var$trackMutations(element) {
         }
     };
 }
+function $a3a7b013e6c801ed$var$announceToken(value, range = value.selectedRange) {
+    if (range.isCollapsed) {
+        // Announce adjacent tokens.
+        let segment = value.segments[range.current.index];
+        if (segment && segment.type !== 'token') {
+            if (range.current.offset === 0) segment = value.segments[range.current.index - 1];
+            else if (range.current.offset === segment.text.length) segment = value.segments[range.current.index + 1];
+        }
+        if (segment?.type === 'token') (0, $74b2c5b1e7ea9589$exports.announce)(segment.text, 'assertive');
+    } else {
+        // Announce token if it is the only thing selected.
+        let selected = value.slice(range.start, range.end).segments;
+        if (selected.length === 1 && selected[0].type === 'token') (0, $74b2c5b1e7ea9589$exports.announce)(selected[0].text, 'assertive');
+    }
+}
 
 
 //# sourceMappingURL=useTokenField.cjs.map