@cloudscape-design/components-themeable 3.0.1328 → 3.0.1329

package/lib/internal/template/progress-bar/styles.scoped.css

@@ -186,27 +186,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
   -webkit-transition: width var(--motion-duration-moderate-24bai8, 135ms) linear;
   transition: width var(--motion-duration-moderate-24bai8, 135ms) linear;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
+  .awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
     animation: none;
     -webkit-transition: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
+.awsui-motion-disabled .awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
   animation: none;
   -webkit-transition: none;
   transition: none;
 }
 
-.awsui_result-state_11huc_38flh_203:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_11huc_38flh_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
+.awsui_result-state_11huc_15aqv_203:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_11huc_15aqv_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_11huc_38flh_1 {
+@keyframes awsui_awsui-motion-fade-in_11huc_15aqv_1 {
   from {
     opacity: 0.2;
   }
@@ -215,17 +215,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_result-state_11huc_38flh_203:not(#\9) {
+  .awsui_result-state_11huc_15aqv_203:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_result-state_11huc_38flh_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_38flh_203:not(#\9) {
+.awsui-motion-disabled .awsui_result-state_11huc_15aqv_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_15aqv_203:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_11huc_38flh_225:not(#\9) {
+.awsui_root_11huc_15aqv_225:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -257,34 +257,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_with-result-button_11huc_38flh_257:not(#\9) {
+.awsui_with-result-button_11huc_15aqv_257:not(#\9) {
   padding-inline-end: var(--space-m-n2lypl, 16px);
 }
 
-.awsui_result-text_11huc_38flh_261:not(#\9) {
+.awsui_result-text_11huc_15aqv_261:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-container-error_11huc_38flh_265:not(#\9), .awsui_result-container-success_11huc_38flh_265:not(#\9) {
+.awsui_result-container-error_11huc_15aqv_265:not(#\9), .awsui_result-container-success_11huc_15aqv_265:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-button_11huc_38flh_269:not(#\9) {
+.awsui_result-button_11huc_15aqv_269:not(#\9) {
   display: inline-block;
   margin-block: var(--space-scaled-xxs-jatbiv, 4px);
   margin-inline: 0;
 }
 
-.awsui_word-wrap_11huc_38flh_275:not(#\9) {
+.awsui_word-wrap_11huc_15aqv_275:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_label-flash_11huc_38flh_280:not(#\9) {
+.awsui_label-flash_11huc_15aqv_280:not(#\9) {
   color: inherit;
   font-weight: var(--font-weight-bold-p16d06, 700);
 }
-.awsui_label-key-value_11huc_38flh_284:not(#\9) {
+.awsui_label-key-value_11huc_15aqv_284:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   font-weight: var(--font-display-label-weight-ise9n2, 400);
@@ -292,18 +292,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-end: var(--space-scaled-xxxs-prgw5k, 2px);
 }
 
-.awsui_flash_11huc_38flh_292:not(#\9) {
+.awsui_flash_11huc_15aqv_292:not(#\9) {
   color: inherit;
 }
 
-.awsui_progress-container_11huc_38flh_296:not(#\9) {
+.awsui_progress-container_11huc_15aqv_296:not(#\9) {
   display: flex;
   align-items: center;
   max-inline-size: 800px;
   block-size: var(--line-height-body-m-bedeoh, 22px);
 }
 
-.awsui_percentage-container_11huc_38flh_303:not(#\9) {
+.awsui_percentage-container_11huc_15aqv_303:not(#\9) {
   inline-size: 33px;
   flex-shrink: 0;
   white-space: nowrap;
@@ -313,56 +313,56 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
 }
 
-.awsui_percentage_11huc_38flh_303:not(#\9) {
+.awsui_percentage_11huc_15aqv_303:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_progress_11huc_38flh_189:not(#\9) {
+.awsui_progress_11huc_15aqv_189:not(#\9) {
   inline-size: 100%;
   margin-inline-end: var(--space-s-4a5hs8, 12px);
   min-inline-size: 0;
-  block-size: var(--awsui-progress-bar-height-6b9ypa, 4px);
+  block-size: var(--awsui-progress-bar-height-z17rmd, 4px);
   border-block: 0;
   border-inline: none;
   box-sizing: border-box;
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  background-color: var(--awsui-progress-bar-background-color-6b9ypa, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  background-color: var(--awsui-progress-bar-background-color-z17rmd, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
 }
-.awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-bar {
-  block-size: var(--awsui-progress-bar-height-6b9ypa, 4px);
+.awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-bar {
+  block-size: var(--awsui-progress-bar-height-z17rmd, 4px);
   border-block: 0;
   border-inline: none;
   box-sizing: border-box;
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  background-color: var(--awsui-progress-bar-background-color-6b9ypa, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  background-color: var(--awsui-progress-bar-background-color-z17rmd, var(--color-background-progress-bar-default-kw9ow4, #eaeded));
 }
-.awsui_progress_11huc_38flh_189:not(#\9)::-webkit-progress-value {
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+.awsui_progress_11huc_15aqv_189:not(#\9)::-webkit-progress-value {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-start-end-radius: 0;
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-end-end-radius: 0;
-  background-color: var(--awsui-progress-value-background-color-6b9ypa, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
+  background-color: var(--awsui-progress-value-background-color-z17rmd, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
 }
-.awsui_progress_11huc_38flh_189.awsui_complete_11huc_38flh_349:not(#\9)::-webkit-progress-value {
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
-  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+.awsui_progress_11huc_15aqv_189.awsui_complete_11huc_15aqv_349:not(#\9)::-webkit-progress-value {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
 }
-.awsui_progress_11huc_38flh_189:not(#\9)::-moz-progress-bar {
-  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+.awsui_progress_11huc_15aqv_189:not(#\9)::-moz-progress-bar {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-start-end-radius: 0;
-  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-z17rmd, 10px);
   border-end-end-radius: 0;
-  background-color: var(--awsui-progress-value-background-color-6b9ypa, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
+  background-color: var(--awsui-progress-value-background-color-z17rmd, var(--color-background-progress-bar-value-default-1bekh3, #0073bb));
 }
 
-.awsui_additional-info_11huc_38flh_363:not(#\9) {
+.awsui_additional-info_11huc_15aqv_363:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/progress-bar/styles.selectors.js

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "progress": "awsui_progress_11huc_38flh_189",
-  "result-state": "awsui_result-state_11huc_38flh_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_38flh_1",
-  "root": "awsui_root_11huc_38flh_225",
-  "with-result-button": "awsui_with-result-button_11huc_38flh_257",
-  "result-text": "awsui_result-text_11huc_38flh_261",
-  "result-container-error": "awsui_result-container-error_11huc_38flh_265",
-  "result-container-success": "awsui_result-container-success_11huc_38flh_265",
-  "result-button": "awsui_result-button_11huc_38flh_269",
-  "word-wrap": "awsui_word-wrap_11huc_38flh_275",
-  "label-flash": "awsui_label-flash_11huc_38flh_280",
-  "label-key-value": "awsui_label-key-value_11huc_38flh_284",
-  "flash": "awsui_flash_11huc_38flh_292",
-  "progress-container": "awsui_progress-container_11huc_38flh_296",
-  "percentage-container": "awsui_percentage-container_11huc_38flh_303",
-  "percentage": "awsui_percentage_11huc_38flh_303",
-  "complete": "awsui_complete_11huc_38flh_349",
-  "additional-info": "awsui_additional-info_11huc_38flh_363"
+  "progress": "awsui_progress_11huc_15aqv_189",
+  "result-state": "awsui_result-state_11huc_15aqv_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_15aqv_1",
+  "root": "awsui_root_11huc_15aqv_225",
+  "with-result-button": "awsui_with-result-button_11huc_15aqv_257",
+  "result-text": "awsui_result-text_11huc_15aqv_261",
+  "result-container-error": "awsui_result-container-error_11huc_15aqv_265",
+  "result-container-success": "awsui_result-container-success_11huc_15aqv_265",
+  "result-button": "awsui_result-button_11huc_15aqv_269",
+  "word-wrap": "awsui_word-wrap_11huc_15aqv_275",
+  "label-flash": "awsui_label-flash_11huc_15aqv_280",
+  "label-key-value": "awsui_label-key-value_11huc_15aqv_284",
+  "flash": "awsui_flash_11huc_15aqv_292",
+  "progress-container": "awsui_progress-container_11huc_15aqv_296",
+  "percentage-container": "awsui_percentage-container_11huc_15aqv_303",
+  "percentage": "awsui_percentage_11huc_15aqv_303",
+  "complete": "awsui_complete_11huc_15aqv_349",
+  "additional-info": "awsui_additional-info_11huc_15aqv_363"
 };
   

package/lib/internal/template/prompt-input/components/menu-dropdown.d.ts

@@ -15,7 +15,9 @@ interface MenuDropdownProps {
     hasDropdownStatus?: boolean;
     listBottom?: React.ReactNode;
     ariaDescribedby?: string;
+    /** Custom CSS properties applied to the options list root to theme option rows. */
+    optionsListCustomProperties?: React.CSSProperties;
 }
-export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, }: MenuDropdownProps): JSX.Element;
+export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, optionsListCustomProperties, }: MenuDropdownProps): JSX.Element;
 export {};
 //# sourceMappingURL=menu-dropdown.d.ts.map

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

@@ -1 +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"}
+{"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;IACzB,mFAAmF;IACnF,2BAA2B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnD;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,EACf,2BAA2B,GAC5B,EAAE,iBAAiB,eAoDnB"}

package/lib/internal/template/prompt-input/components/menu-dropdown.js

@@ -10,7 +10,7 @@ const createMouseEventHandler = (handler) => (itemIndex) => {
         handler(itemIndex);
     }
 };
-export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, }) {
+export default function MenuDropdown({ menu, statusType, menuItemsState, menuItemsHandlers, highlightedOptionId, highlightText, listId, controlId, handleLoadMore, hasDropdownStatus, listBottom, ariaDescribedby, optionsListCustomProperties, }) {
     const handleMouseUp = createMouseEventHandler(menuItemsHandlers.selectVisibleOptionWithMouse);
     const handleMouseMove = createMouseEventHandler(menuItemsHandlers.highlightVisibleOptionWithMouse);
     const ListComponent = menu.virtualScroll ? VirtualList : PlainList;
@@ -43,6 +43,7 @@ export default function MenuDropdown({ menu, statusType, menuItemsState, menuIte
                 onMouseMove: handleMouseMove,
                 ariaDescribedby,
                 statusType: statusType !== null && statusType !== void 0 ? statusType : 'finished',
+                customProperties: optionsListCustomProperties,
             }, screenReaderContent: announcement })));
 }
 //# sourceMappingURL=menu-dropdown.js.map

package/lib/internal/template/prompt-input/components/menu-dropdown.js.map

@@ -1 +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"]}
+{"version":3,"file":"menu-dropdown.js","sourceRoot":"","sources":["../../../../src/prompt-input/components/menu-dropdown.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, { 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  /** Custom CSS properties applied to the options list root to theme option rows. */\n  optionsListCustomProperties?: React.CSSProperties;\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  optionsListCustomProperties,\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          customProperties: optionsListCustomProperties,\n        }}\n        screenReaderContent={announcement}\n      />\n    </>\n  );\n}\n"]}

package/lib/internal/template/prompt-input/components/token-mode.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { DropdownStatusResult } from '../../internal/components/dropdown-status';
 import { MenuItemsHandlers, MenuItemsState } from '../core/menu-state';
 import { PromptInputProps } from '../interfaces';
+import { PromptInputMenuStyle } from '../internal-interfaces';
 /** Props for the token-mode contentEditable input and its associated menu dropdown. */
 interface TokenModeProps {
     /** Ref to the contentEditable div */
@@ -34,7 +35,8 @@ interface TokenModeProps {
     };
     i18nStrings?: PromptInputProps['i18nStrings'];
     maxMenuHeight?: number;
+    menuStyle?: PromptInputMenuStyle;
 }
-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 default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, menuStyle, handleInput, handleLoadMore, editableElementAttributes, }: TokenModeProps): JSX.Element;
 export {};
 //# sourceMappingURL=token-mode.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"token-mode.d.ts","sourceRoot":"","sources":["../../../../src/prompt-input/components/token-mode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,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;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO9D,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;IACvB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;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,SAAS,EACT,WAAW,EACX,cAAc,EACd,yBAAyB,GAC1B,EAAE,cAAc,eAgHhB"}

package/lib/internal/template/prompt-input/components/token-mode.js

@@ -4,11 +4,12 @@ import React from 'react';
 import clsx from 'clsx';
 import Dropdown from '../../dropdown/internal';
 import DropdownFooter from '../../internal/components/dropdown-footer';
+import { getMenuOptionsListStyles } from '../styles';
 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, }) {
+export default function TokenMode({ editableElementRef, triggerWrapperRef, controlId, menuListId, menuFooterControlId, highlightedMenuOptionId, name, plainTextValue, menuIsOpen, triggerWrapperReady, shouldRenderMenuDropdown, activeMenu, activeTriggerToken, menuFilterText, menuItemsState, menuItemsHandlers, menuDropdownStatus, maxMenuHeight, menuStyle, handleInput, handleLoadMore, editableElementAttributes, }) {
     var _a;
     return (React.createElement(React.Fragment, null,
         name && React.createElement("input", { type: "hidden", name: name, value: plainTextValue }),
@@ -20,7 +21,17 @@ export default function TokenMode({ editableElementRef, triggerWrapperRef, contr
                 // 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 &&
+            React.createElement(Dropdown, { minWidth: MENU_MIN_WIDTH, maxHeight: maxMenuHeight, expandToViewport: true, style: menuStyle
+                    ? {
+                        // DropdownProps.Style names the fill `background`; PromptInput exposes it as `backgroundColor`.
+                        dropdown: {
+                            background: menuStyle.backgroundColor,
+                            borderColor: menuStyle.borderColor,
+                            borderRadius: menuStyle.borderRadius,
+                            borderWidth: menuStyle.borderWidth,
+                        },
+                    }
+                    : undefined, open: !!(shouldRenderMenuDropdown &&
                     triggerWrapperReady &&
                     menuIsOpen &&
                     menuItemsState &&
@@ -32,6 +43,6 @@ export default function TokenMode({ editableElementRef, triggerWrapperRef, contr
                     // 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 }))) }))));
+                }, 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, optionsListCustomProperties: getMenuOptionsListStyles(menuStyle), 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/lib/internal/template/prompt-input/components/token-mode.js.map

@@ -1 +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"]}
+{"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 { DropdownProps } from '../../dropdown/interfaces';\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 { PromptInputMenuStyle } from '../internal-interfaces';\nimport { getMenuOptionsListStyles } from '../styles';\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  menuStyle?: PromptInputMenuStyle;\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  menuStyle,\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          style={\n            menuStyle\n              ? ({\n                  // DropdownProps.Style names the fill `background`; PromptInput exposes it as `backgroundColor`.\n                  dropdown: {\n                    background: menuStyle.backgroundColor,\n                    borderColor: menuStyle.borderColor,\n                    borderRadius: menuStyle.borderRadius,\n                    borderWidth: menuStyle.borderWidth,\n                  },\n                } satisfies DropdownProps.Style)\n              : undefined\n          }\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                  optionsListCustomProperties={getMenuOptionsListStyles(menuStyle)}\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/lib/internal/template/prompt-input/internal-interfaces.d.ts

@@ -0,0 +1,41 @@
+import { PromptInputProps } from './interfaces';
+/**
+ * Internal style overrides for the trigger menu dropdown. Not part of the public
+ * `PromptInputProps.Style`; passed via the `_menu` key (see `PromptInputInternalStyle`).
+ */
+export interface PromptInputMenuStyle {
+    backgroundColor?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+    /** Themes the option rows, which are opaque and cover the surface `backgroundColor`. */
+    options?: {
+        backgroundColor?: {
+            default?: string;
+            /** Applied to the hovered/keyboard-highlighted option. */
+            highlighted?: string;
+            selected?: string;
+        };
+        color?: {
+            default?: string;
+            /** Applied to the hovered/keyboard-highlighted option. */
+            highlighted?: string;
+            disabled?: string;
+            /** Applied to non-interactive option group labels. */
+            groupLabel?: string;
+        };
+    };
+    /** Themes the substring highlight on options matching the filtering text. */
+    filterMatch?: {
+        backgroundColor?: string;
+        color?: string;
+    };
+}
+/**
+ * `PromptInputProps.Style` plus the internal `_menu` escape hatch. Consumers pass
+ * menu styling by casting the `style` value to this type.
+ */
+export type PromptInputInternalStyle = PromptInputProps.Style & {
+    _menu?: PromptInputMenuStyle;
+};
+//# sourceMappingURL=internal-interfaces.d.ts.map

package/lib/internal/template/prompt-input/internal-interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-interfaces.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/internal-interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wFAAwF;IACxF,OAAO,CAAC,EAAE;QACR,eAAe,CAAC,EAAE;YAChB,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,0DAA0D;YAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;SACnB,CAAC;QACF,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,0DAA0D;YAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,sDAAsD;YACtD,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;KACH,CAAC;IAEF,6EAA6E;IAC7E,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,KAAK,GAAG;IAC9D,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAC9B,CAAC"}

package/lib/internal/template/prompt-input/internal-interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=internal-interfaces.js.map

package/lib/internal/template/prompt-input/internal-interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-interfaces.js","sourceRoot":"","sources":["../../../src/prompt-input/internal-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { PromptInputProps } from './interfaces';\n\n/**\n * Internal style overrides for the trigger menu dropdown. Not part of the public\n * `PromptInputProps.Style`; passed via the `_menu` key (see `PromptInputInternalStyle`).\n */\nexport interface PromptInputMenuStyle {\n  backgroundColor?: string;\n  borderColor?: string;\n  borderRadius?: string;\n  borderWidth?: string;\n\n  /** Themes the option rows, which are opaque and cover the surface `backgroundColor`. */\n  options?: {\n    backgroundColor?: {\n      default?: string;\n      /** Applied to the hovered/keyboard-highlighted option. */\n      highlighted?: string;\n      selected?: string;\n    };\n    color?: {\n      default?: string;\n      /** Applied to the hovered/keyboard-highlighted option. */\n      highlighted?: string;\n      disabled?: string;\n      /** Applied to non-interactive option group labels. */\n      groupLabel?: string;\n    };\n  };\n\n  /** Themes the substring highlight on options matching the filtering text. */\n  filterMatch?: {\n    backgroundColor?: string;\n    color?: string;\n  };\n}\n\n/**\n * `PromptInputProps.Style` plus the internal `_menu` escape hatch. Consumers pass\n * menu styling by casting the `style` value to this type.\n */\nexport type PromptInputInternalStyle = PromptInputProps.Style & {\n  _menu?: PromptInputMenuStyle;\n};\n"]}

package/lib/internal/template/prompt-input/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAiB3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,UAAU,wBACR,SAAQ,YAAY,CAAC,gBAAgB,EAAE,SAAS,GAAG,SAAS,CAAC,EAC3D,0BAA0B;CAAG;AAEjC,QAAA,MAAM,mBAAmB,gJA6bxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAiB3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,wBACR,SAAQ,YAAY,CAAC,gBAAgB,EAAE,SAAS,GAAG,SAAS,CAAC,EAC3D,0BAA0B;CAAG;AAEjC,QAAA,MAAM,mBAAmB,gJA8bxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/internal/template/prompt-input/internal.js

@@ -269,7 +269,7 @@ const InternalPromptInput = React.forwardRef(({ value: valueProp, actionButtonAr
                 [styles.warning]: warning,
             }) }, secondaryContent)),
         React.createElement("div", { className: styles['textarea-wrapper'] },
-            isTokenMode ? (React.createElement(TokenMode, { editableElementRef: editableElementRef, triggerWrapperRef: tokenMode.triggerWrapperRef, controlId: controlId, menuListId: tokenMode.menuListId, menuFooterControlId: tokenMode.menuFooterControlId, highlightedMenuOptionId: tokenMode.highlightedMenuOptionId, name: name, plainTextValue: plainTextValue, menuIsOpen: tokenMode.menuIsOpen, triggerWrapperReady: tokenMode.triggerWrapperReady, shouldRenderMenuDropdown: tokenMode.shouldRenderMenuDropdown, activeMenu: tokenMode.activeMenu, activeTriggerToken: tokenMode.activeTriggerToken, menuFilterText: tokenMode.menuFilterText, menuItemsState: tokenMode.menuItemsState, menuItemsHandlers: tokenMode.menuItemsHandlers, menuDropdownStatus: tokenMode.menuDropdownStatus, maxMenuHeight: maxMenuHeight, handleInput: tokenMode.handleInput, handleLoadMore: tokenMode.handleLoadMore, editableElementAttributes: tokenMode.editableElementAttributes, i18nStrings: effectiveI18nStrings })) : (React.createElement(TextareaMode, { textareaRef: textareaRef, controlId: controlId, textareaAttributes: textareaAttributes, nativeTextareaAttributes: nativeTextareaAttributes })),
+            isTokenMode ? (React.createElement(TokenMode, { editableElementRef: editableElementRef, triggerWrapperRef: tokenMode.triggerWrapperRef, controlId: controlId, menuListId: tokenMode.menuListId, menuFooterControlId: tokenMode.menuFooterControlId, highlightedMenuOptionId: tokenMode.highlightedMenuOptionId, name: name, plainTextValue: plainTextValue, menuIsOpen: tokenMode.menuIsOpen, triggerWrapperReady: tokenMode.triggerWrapperReady, shouldRenderMenuDropdown: tokenMode.shouldRenderMenuDropdown, activeMenu: tokenMode.activeMenu, activeTriggerToken: tokenMode.activeTriggerToken, menuFilterText: tokenMode.menuFilterText, menuItemsState: tokenMode.menuItemsState, menuItemsHandlers: tokenMode.menuItemsHandlers, menuDropdownStatus: tokenMode.menuDropdownStatus, maxMenuHeight: maxMenuHeight, menuStyle: style === null || style === void 0 ? void 0 : style._menu, handleInput: tokenMode.handleInput, handleLoadMore: tokenMode.handleLoadMore, editableElementAttributes: tokenMode.editableElementAttributes, i18nStrings: effectiveI18nStrings })) : (React.createElement(TextareaMode, { textareaRef: textareaRef, controlId: controlId, textareaAttributes: textareaAttributes, nativeTextareaAttributes: nativeTextareaAttributes })),
             hasActionButton && !secondaryActions && actionButton),
         isTokenMode && tokenMode.portals,
         secondaryActions && (React.createElement("div", { className: clsx(styles['action-stripe'], {