@cloudscape-design/components 3.0.1269 → 3.0.1271

package/popover/styles.selectors.js

@@ -2,62 +2,63 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_xjuzf_45l16_153",
-  "arrow-outer": "awsui_arrow-outer_xjuzf_45l16_157",
-  "arrow-inner": "awsui_arrow-inner_xjuzf_45l16_157",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_45l16_199",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_45l16_199",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_45l16_202",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_45l16_202",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_45l16_205",
-  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_45l16_205",
-  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_45l16_205",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_45l16_205",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_45l16_208",
-  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_45l16_208",
-  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_45l16_208",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_45l16_208",
-  "arrow-variant-info": "awsui_arrow-variant-info_xjuzf_45l16_212",
-  "body": "awsui_body_xjuzf_45l16_227",
-  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_45l16_263",
-  "body-variant-chart": "awsui_body-variant-chart_xjuzf_45l16_266",
-  "has-dismiss": "awsui_has-dismiss_xjuzf_45l16_271",
-  "dismiss": "awsui_dismiss_xjuzf_45l16_276",
-  "dismiss-control": "awsui_dismiss-control_xjuzf_45l16_284",
-  "header-row": "awsui_header-row_xjuzf_45l16_288",
-  "header": "awsui_header_xjuzf_45l16_288",
-  "content": "awsui_content_xjuzf_45l16_317",
-  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_45l16_326",
-  "container": "awsui_container_xjuzf_45l16_338",
-  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_45l16_349",
-  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_45l16_349",
-  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_45l16_349",
-  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_45l16_354",
-  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_45l16_354",
-  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_45l16_354",
-  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_45l16_359",
-  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_45l16_359",
-  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_45l16_364",
-  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_45l16_364",
-  "container-body": "awsui_container-body_xjuzf_45l16_370",
-  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_45l16_410",
-  "container-body-size-small": "awsui_container-body-size-small_xjuzf_45l16_415",
-  "fixed-width": "awsui_fixed-width_xjuzf_45l16_418",
-  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_45l16_422",
-  "container-body-size-large": "awsui_container-body-size-large_xjuzf_45l16_429",
-  "container-arrow": "awsui_container-arrow_xjuzf_45l16_349",
-  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_45l16_479",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_45l16_1",
-  "refresh": "awsui_refresh_xjuzf_45l16_537",
-  "root": "awsui_root_xjuzf_45l16_559",
-  "no-wrap": "awsui_no-wrap_xjuzf_45l16_591",
-  "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_45l16_594",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_45l16_594",
-  "trigger-type-text": "awsui_trigger-type-text_xjuzf_45l16_594",
-  "root-filtering-token": "awsui_root-filtering-token_xjuzf_45l16_616",
-  "trigger": "awsui_trigger_xjuzf_45l16_594",
-  "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_45l16_703",
-  "popover-inline-content": "awsui_popover-inline-content_xjuzf_45l16_707",
-  "hover-area": "awsui_hover-area_xjuzf_45l16_711"
+  "arrow": "awsui_arrow_xjuzf_38kom_153",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_38kom_157",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_38kom_157",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_38kom_199",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_38kom_199",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_38kom_202",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_38kom_202",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_38kom_205",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_38kom_205",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_38kom_205",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_38kom_205",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_38kom_208",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_38kom_208",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_38kom_208",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_38kom_208",
+  "arrow-variant-info": "awsui_arrow-variant-info_xjuzf_38kom_212",
+  "body": "awsui_body_xjuzf_38kom_227",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_38kom_263",
+  "body-variant-chart": "awsui_body-variant-chart_xjuzf_38kom_266",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_38kom_271",
+  "dismiss": "awsui_dismiss_xjuzf_38kom_276",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_38kom_284",
+  "header-row": "awsui_header-row_xjuzf_38kom_288",
+  "header": "awsui_header_xjuzf_38kom_288",
+  "content": "awsui_content_xjuzf_38kom_317",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_38kom_326",
+  "container": "awsui_container_xjuzf_38kom_338",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_38kom_349",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_38kom_349",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_38kom_349",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_38kom_354",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_38kom_354",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_38kom_354",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_38kom_359",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_38kom_359",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_38kom_364",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_38kom_364",
+  "container-body": "awsui_container-body_xjuzf_38kom_370",
+  "container-body-variant-annotation": "awsui_container-body-variant-annotation_xjuzf_38kom_410",
+  "container-body-size-small": "awsui_container-body-size-small_xjuzf_38kom_415",
+  "fixed-width": "awsui_fixed-width_xjuzf_38kom_418",
+  "container-body-size-medium": "awsui_container-body-size-medium_xjuzf_38kom_422",
+  "container-body-size-large": "awsui_container-body-size-large_xjuzf_38kom_429",
+  "container-arrow": "awsui_container-arrow_xjuzf_38kom_349",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_38kom_479",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_38kom_1",
+  "refresh": "awsui_refresh_xjuzf_38kom_537",
+  "root": "awsui_root_xjuzf_38kom_559",
+  "no-wrap": "awsui_no-wrap_xjuzf_38kom_591",
+  "trigger-type-text-inline": "awsui_trigger-type-text-inline_xjuzf_38kom_594",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_xjuzf_38kom_594",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_38kom_594",
+  "root-filtering-token": "awsui_root-filtering-token_xjuzf_38kom_616",
+  "trigger": "awsui_trigger_xjuzf_38kom_594",
+  "in-inline-token": "awsui_in-inline-token_xjuzf_38kom_658",
+  "trigger-type-filtering-token": "awsui_trigger-type-filtering-token_xjuzf_38kom_706",
+  "popover-inline-content": "awsui_popover-inline-content_xjuzf_38kom_710",
+  "hover-area": "awsui_hover-area_xjuzf_38kom_714"
 };
   

package/prompt-input/components/menu-dropdown.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';
+import { PromptInputProps } from '../interfaces';
+/** Props for the menu options list rendered inside the trigger dropdown. */
+interface MenuDropdownProps {
+  menu: PromptInputProps.MenuDefinition;
+  statusType: PromptInputProps.MenuDefinition['statusType'];
+  menuItemsState: MenuItemsState;
+  menuItemsHandlers: MenuItemsHandlers;
+  highlightedOptionId?: string;
+  highlightText: string;
+  listId: string;
+  controlId: string;
+  handleLoadMore: () => void;
+  hasDropdownStatus?: boolean;
+  listBottom?: React.ReactNode;
+  ariaDescribedby?: string;
+}
+export default function MenuDropdown({
+  menu,
+  statusType,
+  menuItemsState,
+  menuItemsHandlers,
+  highlightedOptionId,
+  highlightText,
+  listId,
+  controlId,
+  handleLoadMore,
+  hasDropdownStatus,
+  listBottom,
+  ariaDescribedby
+}: MenuDropdownProps): JSX.Element;
+export {};

package/prompt-input/components/menu-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,4EAA4E;AAC5E,UAAU,iBAAiB;IACzB,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC;IACtC,UAAU,EAAE,gBAAgB,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1D,cAAc,EAAE,cAAc,CAAC;IAC/B,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,GAChB,EAAE,iBAAiB,eAmDnB"}

package/prompt-input/components/menu-dropdown.js

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import PlainList from '../../autosuggest/plain-list';
+import VirtualList from '../../autosuggest/virtual-list';
+import InternalLiveRegion from '../../live-region/internal';
+import { useAnnouncement } from '../../select/utils/use-announcement';
+const createMouseEventHandler = (handler) => (itemIndex) => {
+    if (itemIndex > -1) {
+        handler(itemIndex);
+    }
+};
+export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, }) {
+    const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);
+    const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);
+    const ListComponent = menu.virtualScroll ? VirtualList : PlainList;
+    const announcement = useAnnouncement({
+        highlightText,
+        announceSelected: false,
+        highlightedOption: menuItemsState.highlightedOption,
+        getParent: option => menuItemsState.getItemGroup(option),
+    });
+    // Force re-announcement when the filtered items list changes.
+    // The screenReaderContent on SelectableItem only works for keyboard
+    // navigation (highlight moving between existing items). When filtering
+    // replaces the entire list, new items mount already highlighted and
+    // the SR doesn't pick up the initial textContent set.
+    const liveRegionRef = useRef(null);
+    const prevItemsLengthRef = useRef(menuItemsState.items.length);
+    useEffect(() => {
+        var _a;
+        if (menuItemsState.items.length !== prevItemsLengthRef.current && announcement) {
+            (_a = liveRegionRef.current) === null || _a === void 0 ? void 0 : _a.reannounce();
+        }
+        prevItemsLengthRef.current = menuItemsState.items.length;
+    }, [menuItemsState.items.length, announcement]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InternalLiveRegion, { ref: liveRegionRef, tagName: "span", hidden: true }, announcement),
+        React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, autosuggestItemsState: menuItemsState, highlightText: highlightText, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: {
+                id: listId,
+                ariaLabelledby: controlId,
+                onMouseUp: handleMouseUp,
+                onMouseMove: handleMouseMove,
+                ariaDescribedby,
+                statusType: statusType !== null && statusType !== void 0 ? statusType : 'finished',
+            }, screenReaderContent: announcement })));
+}
+//# sourceMappingURL=menu-dropdown.js.map

package/prompt-input/components/menu-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-dropdown.js","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,SAAS,MAAM,8BAA8B,CAAC;AACrD,OAAO,WAAW,MAAM,gCAAgC,CAAC;AACzD,OAAO,kBAA6C,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAoBtE,MAAM,uBAAuB,GAAG,CAAC,OAAgC,EAAE,EAAE,CAAC,CAAC,SAAiB,EAAE,EAAE;IAC1F,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;QACnB,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,GACG;IAClB,MAAM,aAAa,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,CAAC;IAC9F,MAAM,eAAe,GAAG,uBAAuB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAAC;IAEnG,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,MAAM,YAAY,GAAG,eAAe,CAAC;QACnC,aAAa;QACb,gBAAgB,EAAE,KAAK;QACvB,iBAAiB,EAAE,cAAc,CAAC,iBAAiB;QACnD,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC;KACzD,CAAC,CAAC;IAEH,8DAA8D;IAC9D,oEAAoE;IACpE,uEAAuE;IACvE,oEAAoE;IACpE,sDAAsD;IACtD,MAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/D,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,cAAc,CAAC,KAAK,CAAC,MAAM,KAAK,kBAAkB,CAAC,OAAO,IAAI,YAAY,EAAE,CAAC;YAC/E,MAAA,aAAa,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;QACtC,CAAC;QACD,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC;IAC3D,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhD,OAAO,CACL;QACE,oBAAC,kBAAkB,IAAC,GAAG,EAAE,aAAa,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,IAChE,YAAY,CACM;QACrB,oBAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,cAAc,EACrC,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5E,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE;gBACT,EAAE,EAAE,MAAM;gBACV,cAAc,EAAE,SAAS;gBACzB,SAAS,EAAE,aAAa;gBACxB,WAAW,EAAE,eAAe;gBAC5B,eAAe;gBACf,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,UAAU;aACrC,EACD,mBAAmB,EAAE,YAAY,GACjC,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef } from 'react';\n\nimport PlainList from '../../autosuggest/plain-list';\nimport VirtualList from '../../autosuggest/virtual-list';\nimport InternalLiveRegion, { InternalLiveRegionRef } from '../../live-region/internal';\nimport { useAnnouncement } from '../../select/utils/use-announcement';\nimport { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';\nimport { PromptInputProps } from '../interfaces';\n\n/** Props for the menu options list rendered inside the trigger dropdown. */\ninterface MenuDropdownProps {\n  menu: PromptInputProps.MenuDefinition;\n  statusType: PromptInputProps.MenuDefinition['statusType'];\n  menuItemsState: MenuItemsState;\n  menuItemsHandlers: MenuItemsHandlers;\n  highlightedOptionId?: string;\n  highlightText: string;\n  listId: string;\n  controlId: string;\n  handleLoadMore: () => void;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  ariaDescribedby?: string;\n}\n\nconst createMouseEventHandler = (handler: (index: number) => void) => (itemIndex: number) => {\n  if (itemIndex > -1) {\n    handler(itemIndex);\n  }\n};\n\nexport default function MenuDropdown({\n  menu,\n  statusType,\n  menuItemsState,\n  menuItemsHandlers,\n  highlightedOptionId,\n  highlightText,\n  listId,\n  controlId,\n  handleLoadMore,\n  hasDropdownStatus,\n  listBottom,\n  ariaDescribedby,\n}: MenuDropdownProps) {\n  const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);\n  const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);\n\n  const ListComponent = menu.virtualScroll ? VirtualList : PlainList;\n\n  const announcement = useAnnouncement({\n    highlightText,\n    announceSelected: false,\n    highlightedOption: menuItemsState.highlightedOption,\n    getParent: option => menuItemsState.getItemGroup(option),\n  });\n\n  // Force re-announcement when the filtered items list changes.\n  // The screenReaderContent on SelectableItem only works for keyboard\n  // navigation (highlight moving between existing items). When filtering\n  // replaces the entire list, new items mount already highlighted and\n  // the SR doesn't pick up the initial textContent set.\n  const liveRegionRef = useRef<InternalLiveRegionRef>(null);\n  const prevItemsLengthRef = useRef(menuItemsState.items.length);\n  useEffect(() => {\n    if (menuItemsState.items.length !== prevItemsLengthRef.current && announcement) {\n      liveRegionRef.current?.reannounce();\n    }\n    prevItemsLengthRef.current = menuItemsState.items.length;\n  }, [menuItemsState.items.length, announcement]);\n\n  return (\n    <>\n      <InternalLiveRegion ref={liveRegionRef} tagName=\"span\" hidden={true}>\n        {announcement}\n      </InternalLiveRegion>\n      <ListComponent\n        listBottom={listBottom}\n        handleLoadMore={handleLoadMore}\n        autosuggestItemsState={menuItemsState}\n        highlightText={highlightText}\n        highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n        hasDropdownStatus={hasDropdownStatus}\n        menuProps={{\n          id: listId,\n          ariaLabelledby: controlId,\n          onMouseUp: handleMouseUp,\n          onMouseMove: handleMouseMove,\n          ariaDescribedby,\n          statusType: statusType ?? 'finished',\n        }}\n        screenReaderContent={announcement}\n      />\n    </>\n  );\n}\n"]}

package/prompt-input/components/textarea-mode.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/** Props for when using standard PromptInput. */
+interface TextareaModeProps {
+  textareaRef: React.RefObject<HTMLTextAreaElement>;
+  controlId?: string;
+  textareaAttributes: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  nativeTextareaAttributes?: Record<string, any>;
+}
+export default function TextareaMode({
+  textareaRef,
+  controlId,
+  textareaAttributes,
+  nativeTextareaAttributes
+}: TextareaModeProps): JSX.Element;
+export {};

package/prompt-input/components/textarea-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-mode.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/textarea-mode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,iDAAiD;AACjD,UAAU,iBAAiB;IACzB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IACtE,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,wBAAwB,GACzB,EAAE,iBAAiB,eAWnB"}

package/prompt-input/components/textarea-mode.js

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import WithNativeAttributes from '../../internal/utils/with-native-attributes';
+export default function TextareaMode({ textareaRef, controlId, textareaAttributes, nativeTextareaAttributes, }) {
+    return (React.createElement(WithNativeAttributes, { ...textareaAttributes, tag: "textarea", componentName: "PromptInput", nativeAttributes: nativeTextareaAttributes, ref: textareaRef, id: controlId }));
+}
+//# sourceMappingURL=textarea-mode.js.map

package/prompt-input/components/textarea-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-mode.js","sourceRoot":"","sources":["../../../../src/prompt-input/components/textarea-mode.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAU/E,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,wBAAwB,GACN;IAClB,OAAO,CACL,oBAAC,oBAAoB,OACf,kBAAkB,EACtB,GAAG,EAAC,UAAU,EACd,aAAa,EAAC,aAAa,EAC3B,gBAAgB,EAAE,wBAAwB,EAC1C,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,SAAS,GACb,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport WithNativeAttributes from '../../internal/utils/with-native-attributes';\n\n/** Props for when using standard PromptInput. */\ninterface TextareaModeProps {\n  textareaRef: React.RefObject<HTMLTextAreaElement>;\n  controlId?: string;\n  textareaAttributes: React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n  nativeTextareaAttributes?: Record<string, any>;\n}\n\nexport default function TextareaMode({\n  textareaRef,\n  controlId,\n  textareaAttributes,\n  nativeTextareaAttributes,\n}: TextareaModeProps) {\n  return (\n    <WithNativeAttributes\n      {...textareaAttributes}\n      tag=\"textarea\"\n      componentName=\"PromptInput\"\n      nativeAttributes={nativeTextareaAttributes}\n      ref={textareaRef}\n      id={controlId}\n    />\n  );\n}\n"]}

package/prompt-input/components/token-mode.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { DropdownStatusResult } from '../../internal/components/dropdown-status';
+import { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';
+import { PromptInputProps } from '../interfaces';
+/** Props for the token-mode contentEditable input and its associated menu dropdown. */
+interface TokenModeProps {
+  /** Ref to the contentEditable div */
+  editableElementRef: React.RefObject<HTMLDivElement>;
+  /** Ref to the active trigger element, used to anchor the dropdown */
+  triggerWrapperRef: React.MutableRefObject<HTMLElement | null>;
+  controlId?: string;
+  menuListId: string;
+  menuFooterControlId: string;
+  highlightedMenuOptionId?: string;
+  /** When set, renders a hidden input for native form submission */
+  name?: string;
+  /** Plain text representation of the current tokens */
+  plainTextValue: string;
+  menuIsOpen: boolean;
+  /** True once the trigger element is mounted and ready for dropdown positioning */
+  triggerWrapperReady: boolean;
+  shouldRenderMenuDropdown: boolean;
+  activeMenu: PromptInputProps.MenuDefinition | null;
+  activeTriggerToken: PromptInputProps.TriggerToken | null;
+  menuFilterText: string;
+  menuItemsState: MenuItemsState | null;
+  menuItemsHandlers: MenuItemsHandlers | null;
+  menuDropdownStatus: DropdownStatusResult | null;
+  handleInput: () => void;
+  handleLoadMore: () => void;
+  /** Spread onto the contentEditable div — includes aria attrs, className, and event handlers */
+  editableElementAttributes: React.HTMLAttributes<HTMLDivElement> & {
+    'data-placeholder'?: string;
+  };
+  i18nStrings?: PromptInputProps['i18nStrings'];
+  maxMenuHeight?: number;
+}
+export default function TokenMode({
+  editableElementRef,
+  triggerWrapperRef,
+  controlId,
+  menuListId,
+  menuFooterControlId,
+  highlightedMenuOptionId,
+  name,
+  plainTextValue,
+  menuIsOpen,
+  triggerWrapperReady,
+  shouldRenderMenuDropdown,
+  activeMenu,
+  activeTriggerToken,
+  menuFilterText,
+  menuItemsState,
+  menuItemsHandlers,
+  menuDropdownStatus,
+  maxMenuHeight,
+  handleInput,
+  handleLoadMore,
+  editableElementAttributes
+}: TokenModeProps): JSX.Element;
+export {};

package/prompt-input/components/token-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-mode.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/token-mode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD,uFAAuF;AACvF,UAAU,cAAc;IACtB,qCAAqC;IACrC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,qEAAqE;IACrE,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,mBAAmB,EAAE,OAAO,CAAC;IAC7B,wBAAwB,EAAE,OAAO,CAAC;IAElC,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC;IACnD,kBAAkB,EAAE,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,kBAAkB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAEhD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B,+FAA+F;IAC/F,yBAAyB,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;QAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IAEF,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAE9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAID,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,IAAI,EACJ,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,yBAAyB,GAC1B,EAAE,cAAc,eAkGhB"}

package/prompt-input/components/token-mode.js

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import Dropdown from '../../dropdown/internal';
+import DropdownFooter from '../../internal/components/dropdown-footer';
+import MenuDropdown from './menu-dropdown';
+import styles from '../styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+const MENU_MIN_WIDTH = 300;
+export default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, handleInput, handleLoadMore, editableElementAttributes, }) {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        name && React.createElement("input", { type: "hidden", name: name, value: plainTextValue }),
+        React.createElement("div", { className: styles['editable-wrapper'] },
+            React.createElement("div", { id: controlId, ref: editableElementRef, role: "textbox", "aria-multiline": "true", "aria-haspopup": "listbox", "aria-expanded": menuIsOpen && shouldRenderMenuDropdown, contentEditable: !editableElementAttributes['aria-disabled'] && !editableElementAttributes['aria-readonly']
+                    ? 'true'
+                    : 'false', 
+                // React warns when children of a contentEditable element are managed by React.
+                // We suppress this because we intentionally manage the DOM directly via token-renderer
+                // to avoid React's reconciliation conflicting with browser-native editing behavior.
+                suppressContentEditableWarning: true, "aria-controls": menuIsOpen ? menuListId : undefined, "aria-owns": menuIsOpen ? menuListId : undefined, "aria-activedescendant": highlightedMenuOptionId, onInput: handleInput, ...editableElementAttributes, className: clsx(editableElementAttributes.className, testutilStyles['content-editable'], styles['editable-element']) }),
+            React.createElement(Dropdown, { minWidth: MENU_MIN_WIDTH, maxHeight: maxMenuHeight, expandToViewport: true, open: !!(shouldRenderMenuDropdown &&
+                    triggerWrapperReady &&
+                    menuIsOpen &&
+                    menuItemsState &&
+                    (menuItemsState.items.length > 0 || (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content))), trigger: null, triggerRef: triggerWrapperRef, triggerId: activeTriggerToken === null || activeTriggerToken === void 0 ? void 0 : activeTriggerToken.id, contentKey: triggerWrapperReady
+                    ? `trigger-${activeTriggerToken === null || activeTriggerToken === void 0 ? void 0 : activeTriggerToken.id}-${activeTriggerToken === null || activeTriggerToken === void 0 ? void 0 : activeTriggerToken.triggerChar}-${menuItemsState ? menuItemsState.items.length > 0 : false}`
+                    : undefined, 
+                /* istanbul ignore next -- integ test: src/prompt-input/__integ__/prompt-input-token-mode.test.ts > "clicking a menu option inserts reference and retains focus" */
+                onMouseDown: event => {
+                    // Prevent default to stop the dropdown from stealing focus from the contentEditable.
+                    // Without this, clicking a menu option would blur the input before the selection handler fires.
+                    event.preventDefault();
+                }, footer: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.isSticky) && menuDropdownStatus.content ? (React.createElement(DropdownFooter, { id: menuFooterControlId, content: menuDropdownStatus.content, hasItems: menuItemsState ? menuItemsState.items.length >= 1 : false })) : null, content: React.createElement(React.Fragment, null, shouldRenderMenuDropdown && menuItemsState && menuItemsHandlers && activeMenu && (React.createElement(MenuDropdown, { menu: activeMenu, statusType: (_a = activeMenu.statusType) !== null && _a !== void 0 ? _a : 'finished', menuItemsState: menuItemsState, menuItemsHandlers: menuItemsHandlers, highlightedOptionId: highlightedMenuOptionId, highlightText: menuFilterText, listId: menuListId, controlId: controlId !== null && controlId !== void 0 ? controlId : '', handleLoadMore: handleLoadMore, hasDropdownStatus: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) !== null, listBottom: !(menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.isSticky) && (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) ? (React.createElement(DropdownFooter, { content: menuDropdownStatus.content, id: menuFooterControlId })) : null, ariaDescribedby: (menuDropdownStatus === null || menuDropdownStatus === void 0 ? void 0 : menuDropdownStatus.content) ? menuFooterControlId : undefined }))) }))));
+}
+//# sourceMappingURL=token-mode.js.map

package/prompt-input/components/token-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-mode.js","sourceRoot":"","sources":["../../../../src/prompt-input/components/token-mode.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport Dropdown from '../../dropdown/internal';\nimport DropdownFooter from '../../internal/components/dropdown-footer';\nimport { DropdownStatusResult } from '../../internal/components/dropdown-status';\nimport { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';\nimport { PromptInputProps } from '../interfaces';\nimport MenuDropdown from './menu-dropdown';\n\nimport styles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/** Props for the token-mode contentEditable input and its associated menu dropdown. */\ninterface TokenModeProps {\n  /** Ref to the contentEditable div */\n  editableElementRef: React.RefObject<HTMLDivElement>;\n  /** Ref to the active trigger element, used to anchor the dropdown */\n  triggerWrapperRef: React.MutableRefObject<HTMLElement | null>;\n\n  controlId?: string;\n  menuListId: string;\n  menuFooterControlId: string;\n  highlightedMenuOptionId?: string;\n\n  /** When set, renders a hidden input for native form submission */\n  name?: string;\n  /** Plain text representation of the current tokens */\n  plainTextValue: string;\n  menuIsOpen: boolean;\n  /** True once the trigger element is mounted and ready for dropdown positioning */\n  triggerWrapperReady: boolean;\n  shouldRenderMenuDropdown: boolean;\n\n  activeMenu: PromptInputProps.MenuDefinition | null;\n  activeTriggerToken: PromptInputProps.TriggerToken | null;\n  menuFilterText: string;\n  menuItemsState: MenuItemsState | null;\n  menuItemsHandlers: MenuItemsHandlers | null;\n  menuDropdownStatus: DropdownStatusResult | null;\n\n  handleInput: () => void;\n  handleLoadMore: () => void;\n\n  /** Spread onto the contentEditable div — includes aria attrs, className, and event handlers */\n  editableElementAttributes: React.HTMLAttributes<HTMLDivElement> & {\n    'data-placeholder'?: string;\n  };\n\n  i18nStrings?: PromptInputProps['i18nStrings'];\n\n  maxMenuHeight?: number;\n}\n\nconst MENU_MIN_WIDTH = 300;\n\nexport default function TokenMode({\n  editableElementRef,\n  triggerWrapperRef,\n  controlId,\n  menuListId,\n  menuFooterControlId,\n  highlightedMenuOptionId,\n  name,\n  plainTextValue,\n  menuIsOpen,\n  triggerWrapperReady,\n  shouldRenderMenuDropdown,\n  activeMenu,\n  activeTriggerToken,\n  menuFilterText,\n  menuItemsState,\n  menuItemsHandlers,\n  menuDropdownStatus,\n  maxMenuHeight,\n  handleInput,\n  handleLoadMore,\n  editableElementAttributes,\n}: TokenModeProps) {\n  return (\n    <>\n      {/* Hidden input enables native form submission with the plain text value when a name is provided */}\n      {name && <input type=\"hidden\" name={name} value={plainTextValue} />}\n      <div className={styles['editable-wrapper']}>\n        <div\n          id={controlId}\n          ref={editableElementRef}\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={menuIsOpen && shouldRenderMenuDropdown}\n          contentEditable={\n            !editableElementAttributes['aria-disabled'] && !editableElementAttributes['aria-readonly']\n              ? 'true'\n              : 'false'\n          }\n          // React warns when children of a contentEditable element are managed by React.\n          // We suppress this because we intentionally manage the DOM directly via token-renderer\n          // to avoid React's reconciliation conflicting with browser-native editing behavior.\n          suppressContentEditableWarning={true}\n          aria-controls={menuIsOpen ? menuListId : undefined}\n          // aria-owns needed for Safari+VoiceOver to announce activedescendant content\n          aria-owns={menuIsOpen ? menuListId : undefined}\n          aria-activedescendant={highlightedMenuOptionId}\n          onInput={handleInput}\n          {...editableElementAttributes}\n          className={clsx(\n            editableElementAttributes.className,\n            testutilStyles['content-editable'],\n            styles['editable-element']\n          )}\n        />\n        <Dropdown\n          minWidth={MENU_MIN_WIDTH}\n          maxHeight={maxMenuHeight}\n          expandToViewport={true}\n          open={\n            !!(\n              shouldRenderMenuDropdown &&\n              triggerWrapperReady &&\n              menuIsOpen &&\n              menuItemsState &&\n              (menuItemsState.items.length > 0 || menuDropdownStatus?.content)\n            )\n          }\n          trigger={null}\n          triggerRef={triggerWrapperRef}\n          triggerId={activeTriggerToken?.id}\n          contentKey={\n            triggerWrapperReady\n              ? `trigger-${activeTriggerToken?.id}-${activeTriggerToken?.triggerChar}-${menuItemsState ? menuItemsState.items.length > 0 : false}`\n              : undefined\n          }\n          /* istanbul ignore next -- integ test: src/prompt-input/__integ__/prompt-input-token-mode.test.ts > \"clicking a menu option inserts reference and retains focus\" */\n          onMouseDown={event => {\n            // Prevent default to stop the dropdown from stealing focus from the contentEditable.\n            // Without this, clicking a menu option would blur the input before the selection handler fires.\n            event.preventDefault();\n          }}\n          footer={\n            menuDropdownStatus?.isSticky && menuDropdownStatus.content ? (\n              <DropdownFooter\n                id={menuFooterControlId}\n                content={menuDropdownStatus.content}\n                hasItems={menuItemsState ? menuItemsState.items.length >= 1 : false}\n              />\n            ) : null\n          }\n          content={\n            <>\n              {shouldRenderMenuDropdown && menuItemsState && menuItemsHandlers && activeMenu && (\n                <MenuDropdown\n                  menu={activeMenu}\n                  statusType={activeMenu.statusType ?? 'finished'}\n                  menuItemsState={menuItemsState}\n                  menuItemsHandlers={menuItemsHandlers}\n                  highlightedOptionId={highlightedMenuOptionId}\n                  highlightText={menuFilterText}\n                  listId={menuListId}\n                  controlId={controlId ?? ''}\n                  handleLoadMore={handleLoadMore}\n                  hasDropdownStatus={menuDropdownStatus?.content !== null}\n                  listBottom={\n                    !menuDropdownStatus?.isSticky && menuDropdownStatus?.content ? (\n                      <DropdownFooter content={menuDropdownStatus.content} id={menuFooterControlId} />\n                    ) : null\n                  }\n                  ariaDescribedby={menuDropdownStatus?.content ? menuFooterControlId : undefined}\n                />\n              )}\n            </>\n          }\n        />\n      </div>\n    </>\n  );\n}\n"]}

package/prompt-input/core/caret-controller.d.ts

@@ -0,0 +1,73 @@
+import { PromptInputProps } from '../interfaces';
+/** Returns the Selection from the element's owning window, supporting iframe contexts. */
+export declare function getOwnerSelection(element: Node): Selection | null;
+/** Logical lengths for each token type, used for cursor position calculations. */
+export declare const TOKEN_LENGTHS: {
+  readonly REFERENCE: 1;
+  readonly LINE_BREAK: 1;
+  readonly trigger: (filterText: string) => number;
+  readonly text: (content: string) => number;
+};
+/** Calculates the logical cursor position after a given token index. */
+export declare function calculateTokenPosition(tokens: readonly PromptInputProps.InputToken[], upToIndex: number): number;
+/** Calculates the total logical length of all tokens. */
+export declare function calculateTotalTokenLength(tokens: readonly PromptInputProps.InputToken[]): number;
+/** A resolved position within the DOM: a node and an offset into it. */
+interface DOMLocation {
+  node: Node;
+  offset: number;
+}
+/**
+ * Manages caret positioning within a contentEditable element.
+ * Translates between logical token positions and DOM Range/Selection API.
+ */
+export declare class CaretController {
+  private element;
+  private state;
+  constructor(element: HTMLElement);
+  private get ownerDoc();
+  /**
+   * Creates a DOM Range from resolved start/end locations and applies it to the given selection.
+   * Returns the created Range for further use (e.g. scroll-into-view checks).
+   */
+  applyRange(ownerDocument: Document, selection: Selection, startLocation: DOMLocation, endLocation?: DOMLocation): Range;
+  /** Returns the logical length of a DOM node based on its token type. */
+  private getNodeLength;
+  /** Returns the current logical caret position from the DOM selection. */
+  getPosition(): number;
+  /** Finds the trigger element at the current caret position, if any. */
+  findActiveTrigger(): HTMLElement | null;
+  /**
+   * Sets the caret to a logical position, or creates a selection range if end is provided.
+   * Handles smart positioning around atomic reference tokens and scrolls into view.
+   * @param start logical start position
+   * @param end optional logical end position for range selection
+   */
+  setPosition(start: number, end?: number): void;
+  /** Captures the current caret/selection state for later restoration. */
+  capture(): void;
+  /** Returns the captured caret start position, or null if no valid capture exists. */
+  getSavedPosition(): number | null;
+  /** Restores the caret to the previously captured state. */
+  restore(offset?: number): void;
+  /** Overrides the captured state so the next restore() positions to a calculated location.
+   *  Currently used only in tests — consider removing if no production use case emerges.
+   */
+  setCapturedPosition(start: number, end?: number): void;
+  /** Selects all content in the element. */
+  selectAll(): void;
+  /** Positions the caret at the end of a text node. */
+  positionAfterText(textNode: Text): void;
+  /** Moves the caret forward by a logical offset. */
+  moveForward(offset: number): void;
+  /** Moves the caret backward by a logical offset, clamped to 0. */
+  moveBackward(offset: number): void;
+  private calculatePositionFromRange;
+  private findDOMLocation;
+  /** Resolves a DOM location for a specific child node at the given offset within a paragraph. */
+  private resolveChildLocation;
+  private findLocationInParagraph;
+  private countParagraphContent;
+  private countUpToCursor;
+}
+export {};

package/prompt-input/core/caret-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"caret-controller.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/core/caret-controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYjD,0FAA0F;AAC1F,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAEjE;AAED,kFAAkF;AAClF,eAAO,MAAM,aAAa;;;mCAGF,MAAM;6BACZ,MAAM;CACd,CAAC;AAEX,wEAAwE;AACxE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,gBAAgB,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAehH;AAED,yDAAyD;AACzD,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,SAAS,gBAAgB,CAAC,UAAU,EAAE,GAAG,MAAM,CAEhG;AAQD,wEAAwE;AACxE,UAAU,WAAW;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,KAAK,CAAa;gBAEd,OAAO,EAAE,WAAW;IAKhC,OAAO,KAAK,QAAQ,GAEnB;IAED;;;OAGG;IACH,UAAU,CACR,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,WAAW,EAC1B,WAAW,CAAC,EAAE,WAAW,GACxB,KAAK;IAeR,wEAAwE;IACxE,OAAO,CAAC,aAAa;IAYrB,yEAAyE;IACzE,WAAW,IAAI,MAAM;IAcrB,uEAAuE;IACvE,iBAAiB,IAAI,WAAW,GAAG,IAAI;IAuCvC;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI;IA0B9C,wEAAwE;IACxE,OAAO,IAAI,IAAI;IAmBf,qFAAqF;IACrF,gBAAgB,IAAI,MAAM,GAAG,IAAI;IAIjC,2DAA2D;IAC3D,OAAO,CAAC,MAAM,SAAI,GAAG,IAAI;IAQzB;;OAEG;IACH,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI;IAItD,0CAA0C;IAC1C,SAAS,IAAI,IAAI;IA6BjB,qDAAqD;IACrD,iBAAiB,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI;IAYvC,mDAAmD;IACnD,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKjC,kEAAkE;IAClE,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKlC,OAAO,CAAC,0BAA0B;IA4BlC,OAAO,CAAC,eAAe;IA8BvB,gGAAgG;IAChG,OAAO,CAAC,oBAAoB;IAqC5B,OAAO,CAAC,uBAAuB;IAmB/B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,eAAe;CA+DxB"}