@cloudscape-design/components 3.0.245 → 3.0.246

package/internal/components/menu-dropdown/styles.scoped.css

@@ -90,7 +90,7 @@ 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_button_m5h9f_5k6gw_93:not(#\9) {
+.awsui_button_m5h9f_1yya9_93:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -146,38 +146,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: transparent;
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
 }
-.awsui_button_m5h9f_5k6gw_93:not(#\9):hover {
+.awsui_button_m5h9f_1yya9_93:not(#\9):hover {
   color: var(--color-text-interactive-hover-v3lasm, #000716);
   text-decoration: none;
 }
-.awsui_button_m5h9f_5k6gw_93:not(#\9):active, .awsui_button_m5h9f_5k6gw_93.awsui_expanded_m5h9f_5k6gw_127:not(#\9) {
+.awsui_button_m5h9f_1yya9_93:not(#\9):active, .awsui_button_m5h9f_1yya9_93.awsui_expanded_m5h9f_1yya9_127:not(#\9) {
   background: transparent;
   color: var(--color-text-interactive-active-vol84d, #000716);
 }
-.awsui_button_m5h9f_5k6gw_93.awsui_expanded_m5h9f_5k6gw_127:not(#\9) {
+.awsui_button_m5h9f_1yya9_93.awsui_expanded_m5h9f_1yya9_127:not(#\9) {
   color: var(--color-text-accent-s1eqko, #0972d3);
 }
-.awsui_button_m5h9f_5k6gw_93:not(#\9):focus {
+.awsui_button_m5h9f_1yya9_93:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_button_m5h9f_5k6gw_93.awsui_offset-right-none_m5h9f_5k6gw_138:not(#\9) {
+.awsui_button_m5h9f_1yya9_93.awsui_offset-right-none_m5h9f_1yya9_138:not(#\9) {
   margin-right: 0;
 }
-.awsui_button_m5h9f_5k6gw_93.awsui_offset-right-l_m5h9f_5k6gw_141:not(#\9) {
+.awsui_button_m5h9f_1yya9_93.awsui_offset-right-l_m5h9f_1yya9_141:not(#\9) {
   margin-right: var(--space-s-hv8c1d, 12px);
 }
-.awsui_button_m5h9f_5k6gw_93.awsui_offset-right-xxl_m5h9f_5k6gw_144:not(#\9) {
+.awsui_button_m5h9f_1yya9_93.awsui_offset-right-xxl_m5h9f_1yya9_144:not(#\9) {
   margin-right: var(--space-xl-a39hup, 24px);
 }
-.awsui_button_m5h9f_5k6gw_93[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button_m5h9f_1yya9_93:not(#\9):focus {
   position: relative;
 }
-.awsui_button_m5h9f_5k6gw_93[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button_m5h9f_1yya9_93:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(-1px - 1px);
 }
-.awsui_button_m5h9f_5k6gw_93[data-awsui-focus-visible=true]:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button_m5h9f_1yya9_93:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -189,10 +189,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_text_m5h9f_5k6gw_166:not(#\9) {
+.awsui_text_m5h9f_1yya9_166:not(#\9) {
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_icon_m5h9f_5k6gw_170 + .awsui_text_m5h9f_5k6gw_166:not(#\9) {
+.awsui_icon_m5h9f_1yya9_170 + .awsui_text_m5h9f_1yya9_166:not(#\9) {
   margin-left: var(--space-xs-rsr2qu, 8px);
 }

package/internal/components/menu-dropdown/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button": "awsui_button_m5h9f_5k6gw_93",
-  "expanded": "awsui_expanded_m5h9f_5k6gw_127",
-  "offset-right-none": "awsui_offset-right-none_m5h9f_5k6gw_138",
-  "offset-right-l": "awsui_offset-right-l_m5h9f_5k6gw_141",
-  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_5k6gw_144",
-  "text": "awsui_text_m5h9f_5k6gw_166",
-  "icon": "awsui_icon_m5h9f_5k6gw_170"
+  "button": "awsui_button_m5h9f_1yya9_93",
+  "expanded": "awsui_expanded_m5h9f_1yya9_127",
+  "offset-right-none": "awsui_offset-right-none_m5h9f_1yya9_138",
+  "offset-right-l": "awsui_offset-right-l_m5h9f_1yya9_141",
+  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_1yya9_144",
+  "text": "awsui_text_m5h9f_1yya9_166",
+  "icon": "awsui_icon_m5h9f_1yya9_170"
 };
   

package/internal/components/token-list/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TokenListProps } from './interfaces';
-export default function TokenList<Item>({ items, alignment, renderItem, itemAttributes, limit, after, i18nStrings, removedItemIndex, }: TokenListProps<Item>): JSX.Element;
+export default function TokenList<Item>({ items, alignment, renderItem, limit, after, i18nStrings, removedItemIndex, }: TokenListProps<Item>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/token-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,EACtC,KAAK,EACL,SAAS,EACT,UAAU,EACV,cAAc,EACd,KAAK,EACL,KAAK,EACL,WAAW,EACX,gBAAgB,GACjB,EAAE,cAAc,CAAC,IAAI,CAAC,eAqEtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,EACtC,KAAK,EACL,SAAS,EACT,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,gBAAgB,GACjB,EAAE,cAAc,CAAC,IAAI,CAAC,eAmEtB"}

package/internal/components/token-list/index.js

@@ -6,7 +6,7 @@ import styles from './styles.css.js';
 import { useUniqueId } from '../../hooks/use-unique-id';
 import clsx from 'clsx';
 import { useTokenFocusController } from './token-focus-controller';
-export default function TokenList({ items, alignment, renderItem, itemAttributes, limit, after, i18nStrings, removedItemIndex, }) {
+export default function TokenList({ items, alignment, renderItem, limit, after, i18nStrings, removedItemIndex, }) {
     const tokenListRef = useTokenFocusController({ removedItemIndex });
     const controlId = useUniqueId();
     const [expanded, setExpanded] = useState(false);
@@ -18,13 +18,13 @@ export default function TokenList({ items, alignment, renderItem, itemAttributes
         React.createElement(TokenLimitToggle, { controlId: hasVisibleItems ? controlId : undefined, allHidden: limit === 0, expanded: expanded, numberOfHiddenOptions: items.length - visibleItems.length, i18nStrings: i18nStrings, onClick: () => setExpanded(!expanded) }))) : null;
     if (alignment === 'inline') {
         return (React.createElement("div", { ref: tokenListRef, className: clsx(styles.root, styles.horizontal) },
-            hasItems && (React.createElement("ul", { id: controlId, className: styles.list }, visibleItems.map((item, itemIndex) => (React.createElement("li", Object.assign({ key: itemIndex, className: styles['list-item'] }, itemAttributes === null || itemAttributes === void 0 ? void 0 : itemAttributes(item, itemIndex), { "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }), renderItem(item, itemIndex)))))),
+            hasItems && (React.createElement("ul", { id: controlId, className: styles.list }, visibleItems.map((item, itemIndex) => (React.createElement("li", { key: itemIndex, className: styles['list-item'], "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }, renderItem(item, itemIndex)))))),
             toggle,
             after && React.createElement("div", { className: styles.separator }),
             after));
     }
     return (React.createElement("div", { ref: tokenListRef, className: clsx(styles.root, styles.vertical) },
-        hasVisibleItems && (React.createElement("ul", { id: controlId, className: clsx(styles.list, styles[alignment]) }, visibleItems.map((item, itemIndex) => (React.createElement("li", Object.assign({ key: itemIndex, className: styles['list-item'] }, itemAttributes === null || itemAttributes === void 0 ? void 0 : itemAttributes(item, itemIndex), { "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }), renderItem(item, itemIndex)))))),
+        hasVisibleItems && (React.createElement("ul", { id: controlId, className: clsx(styles.list, styles[alignment]) }, visibleItems.map((item, itemIndex) => (React.createElement("li", { key: itemIndex, className: styles['list-item'], "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }, renderItem(item, itemIndex)))))),
         toggle,
         after));
 }

package/internal/components/token-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/index.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, { useState } from 'react';\n\nimport TokenLimitToggle from './token-limit-toggle';\nimport styles from './styles.css.js';\nimport { TokenListProps } from './interfaces';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport clsx from 'clsx';\nimport { useTokenFocusController } from './token-focus-controller';\n\nexport default function TokenList<Item>({\n  items,\n  alignment,\n  renderItem,\n  itemAttributes,\n  limit,\n  after,\n  i18nStrings,\n  removedItemIndex,\n}: TokenListProps<Item>) {\n  const tokenListRef = useTokenFocusController({ removedItemIndex });\n  const controlId = useUniqueId();\n\n  const [expanded, setExpanded] = useState(false);\n  const hasItems = items.length > 0;\n  const hasHiddenItems = hasItems && limit !== undefined && items.length > limit;\n  const visibleItems = hasHiddenItems && !expanded ? items.slice(0, limit) : items;\n  const hasVisibleItems = visibleItems.length > 0;\n\n  const toggle = hasHiddenItems ? (\n    <div className={styles[`toggle-container-${alignment}`]}>\n      <TokenLimitToggle\n        controlId={hasVisibleItems ? controlId : undefined}\n        allHidden={limit === 0}\n        expanded={expanded}\n        numberOfHiddenOptions={items.length - visibleItems.length}\n        i18nStrings={i18nStrings}\n        onClick={() => setExpanded(!expanded)}\n      />\n    </div>\n  ) : null;\n\n  if (alignment === 'inline') {\n    return (\n      <div ref={tokenListRef} className={clsx(styles.root, styles.horizontal)}>\n        {hasItems && (\n          <ul id={controlId} className={styles.list}>\n            {visibleItems.map((item, itemIndex) => (\n              <li\n                key={itemIndex}\n                className={styles['list-item']}\n                {...itemAttributes?.(item, itemIndex)}\n                aria-setsize={items.length}\n                aria-posinset={itemIndex + 1}\n              >\n                {renderItem(item, itemIndex)}\n              </li>\n            ))}\n          </ul>\n        )}\n        {toggle}\n        {after && <div className={styles.separator} />}\n        {after}\n      </div>\n    );\n  }\n\n  return (\n    <div ref={tokenListRef} className={clsx(styles.root, styles.vertical)}>\n      {hasVisibleItems && (\n        <ul id={controlId} className={clsx(styles.list, styles[alignment])}>\n          {visibleItems.map((item, itemIndex) => (\n            <li\n              key={itemIndex}\n              className={styles['list-item']}\n              {...itemAttributes?.(item, itemIndex)}\n              aria-setsize={items.length}\n              aria-posinset={itemIndex + 1}\n            >\n              {renderItem(item, itemIndex)}\n            </li>\n          ))}\n        </ul>\n      )}\n      {toggle}\n      {after}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,SAAS,CAAO,EACtC,KAAK,EACL,SAAS,EACT,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,gBAAgB,GACK;IACrB,MAAM,YAAY,GAAG,uBAAuB,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAEhC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,MAAM,cAAc,GAAG,QAAQ,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAC/E,MAAM,YAAY,GAAG,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACjF,MAAM,eAAe,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;IAEhD,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,SAAS,EAAE,CAAC;QACrD,oBAAC,gBAAgB,IACf,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,KAAK,KAAK,CAAC,EACtB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,EACzD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,GACrC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC;YACpE,QAAQ,IAAI,CACX,4BAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,IACtC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,4BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,kBAChB,KAAK,CAAC,MAAM,mBACX,SAAS,GAAG,CAAC,IAE3B,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CACzB,CACN,CAAC,CACC,CACN;YACA,MAAM;YACN,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;YAC7C,KAAK,CACF,CACP,CAAC;KACH;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC;QAClE,eAAe,IAAI,CAClB,4BAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,IAC/D,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,4BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,kBAChB,KAAK,CAAC,MAAM,mBACX,SAAS,GAAG,CAAC,IAE3B,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CACzB,CACN,CAAC,CACC,CACN;QACA,MAAM;QACN,KAAK,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useState } from 'react';\n\nimport TokenLimitToggle from './token-limit-toggle';\nimport styles from './styles.css.js';\nimport { TokenListProps } from './interfaces';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport clsx from 'clsx';\nimport { useTokenFocusController } from './token-focus-controller';\n\nexport default function TokenList<Item>({\n  items,\n  alignment,\n  renderItem,\n  limit,\n  after,\n  i18nStrings,\n  removedItemIndex,\n}: TokenListProps<Item>) {\n  const tokenListRef = useTokenFocusController({ removedItemIndex });\n  const controlId = useUniqueId();\n\n  const [expanded, setExpanded] = useState(false);\n  const hasItems = items.length > 0;\n  const hasHiddenItems = hasItems && limit !== undefined && items.length > limit;\n  const visibleItems = hasHiddenItems && !expanded ? items.slice(0, limit) : items;\n  const hasVisibleItems = visibleItems.length > 0;\n\n  const toggle = hasHiddenItems ? (\n    <div className={styles[`toggle-container-${alignment}`]}>\n      <TokenLimitToggle\n        controlId={hasVisibleItems ? controlId : undefined}\n        allHidden={limit === 0}\n        expanded={expanded}\n        numberOfHiddenOptions={items.length - visibleItems.length}\n        i18nStrings={i18nStrings}\n        onClick={() => setExpanded(!expanded)}\n      />\n    </div>\n  ) : null;\n\n  if (alignment === 'inline') {\n    return (\n      <div ref={tokenListRef} className={clsx(styles.root, styles.horizontal)}>\n        {hasItems && (\n          <ul id={controlId} className={styles.list}>\n            {visibleItems.map((item, itemIndex) => (\n              <li\n                key={itemIndex}\n                className={styles['list-item']}\n                aria-setsize={items.length}\n                aria-posinset={itemIndex + 1}\n              >\n                {renderItem(item, itemIndex)}\n              </li>\n            ))}\n          </ul>\n        )}\n        {toggle}\n        {after && <div className={styles.separator} />}\n        {after}\n      </div>\n    );\n  }\n\n  return (\n    <div ref={tokenListRef} className={clsx(styles.root, styles.vertical)}>\n      {hasVisibleItems && (\n        <ul id={controlId} className={clsx(styles.list, styles[alignment])}>\n          {visibleItems.map((item, itemIndex) => (\n            <li\n              key={itemIndex}\n              className={styles['list-item']}\n              aria-setsize={items.length}\n              aria-posinset={itemIndex + 1}\n            >\n              {renderItem(item, itemIndex)}\n            </li>\n          ))}\n        </ul>\n      )}\n      {toggle}\n      {after}\n    </div>\n  );\n}\n"]}

package/internal/components/token-list/interfaces.d.ts

@@ -5,7 +5,6 @@ export interface TokenListProps<Item> {
     limit?: number;
     after?: React.ReactNode;
     renderItem: (item: Item, itemIndex: number) => React.ReactNode;
-    itemAttributes?: (item: Item, itemIndex: number) => React.HTMLAttributes<HTMLLIElement>;
     i18nStrings?: I18nStrings;
     removedItemIndex?: null | number;
 }

package/internal/components/token-list/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc,CAAC,IAAI;IAClC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;IAChD,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACxF,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc,CAAC,IAAI;IAClC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;IAChD,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/internal/components/token-list/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nexport interface TokenListProps<Item> {\n  alignment: 'vertical' | 'horizontal' | 'inline';\n  items: readonly Item[];\n  limit?: number;\n  after?: React.ReactNode;\n  renderItem: (item: Item, itemIndex: number) => React.ReactNode;\n  itemAttributes?: (item: Item, itemIndex: number) => React.HTMLAttributes<HTMLLIElement>;\n  i18nStrings?: I18nStrings;\n  removedItemIndex?: null | number;\n}\n\nexport interface I18nStrings {\n  limitShowFewer?: string;\n  limitShowMore?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nexport interface TokenListProps<Item> {\n  alignment: 'vertical' | 'horizontal' | 'inline';\n  items: readonly Item[];\n  limit?: number;\n  after?: React.ReactNode;\n  renderItem: (item: Item, itemIndex: number) => React.ReactNode;\n  i18nStrings?: I18nStrings;\n  removedItemIndex?: null | number;\n}\n\nexport interface I18nStrings {\n  limitShowFewer?: string;\n  limitShowMore?: string;\n}\n"]}

package/internal/components/token-list/styles.css.js

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gfwv3_bhz29_93",
-  "horizontal": "awsui_horizontal_gfwv3_bhz29_98",
-  "vertical": "awsui_vertical_gfwv3_bhz29_102",
-  "list": "awsui_list_gfwv3_bhz29_106",
-  "list-item": "awsui_list-item_gfwv3_bhz29_124",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_bhz29_128",
-  "toggle": "awsui_toggle_gfwv3_bhz29_128",
-  "description": "awsui_description_gfwv3_bhz29_196",
-  "separator": "awsui_separator_gfwv3_bhz29_200"
+  "root": "awsui_root_gfwv3_sgio_93",
+  "horizontal": "awsui_horizontal_gfwv3_sgio_98",
+  "vertical": "awsui_vertical_gfwv3_sgio_102",
+  "list": "awsui_list_gfwv3_sgio_106",
+  "list-item": "awsui_list-item_gfwv3_sgio_124",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_sgio_128",
+  "toggle": "awsui_toggle_gfwv3_sgio_128",
+  "description": "awsui_description_gfwv3_sgio_196",
+  "separator": "awsui_separator_gfwv3_sgio_200"
 };
   

package/internal/components/token-list/styles.scoped.css

@@ -90,48 +90,48 @@ 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_root_gfwv3_bhz29_93:not(#\9) {
+.awsui_root_gfwv3_sgio_93:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-scaled-xs-6859qs, 8px);
 }
-.awsui_root_gfwv3_bhz29_93.awsui_horizontal_gfwv3_bhz29_98:not(#\9) {
+.awsui_root_gfwv3_sgio_93.awsui_horizontal_gfwv3_sgio_98:not(#\9) {
   gap: var(--space-xs-rsr2qu, 8px);
   flex-direction: row;
 }
-.awsui_root_gfwv3_bhz29_93.awsui_vertical_gfwv3_bhz29_102:not(#\9) {
+.awsui_root_gfwv3_sgio_93.awsui_vertical_gfwv3_sgio_102:not(#\9) {
   flex-direction: column;
 }
 
-.awsui_list_gfwv3_bhz29_106:not(#\9) {
+.awsui_list_gfwv3_sgio_106:not(#\9) {
   display: contents;
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.awsui_list_gfwv3_bhz29_106.awsui_horizontal_gfwv3_bhz29_98:not(#\9), .awsui_list_gfwv3_bhz29_106.awsui_vertical_gfwv3_bhz29_102:not(#\9) {
+.awsui_list_gfwv3_sgio_106.awsui_horizontal_gfwv3_sgio_98:not(#\9), .awsui_list_gfwv3_sgio_106.awsui_vertical_gfwv3_sgio_102:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-xs-rsr2qu, 8px);
 }
-.awsui_list_gfwv3_bhz29_106.awsui_horizontal_gfwv3_bhz29_98:not(#\9) {
+.awsui_list_gfwv3_sgio_106.awsui_horizontal_gfwv3_sgio_98:not(#\9) {
   flex-direction: row;
 }
-.awsui_list_gfwv3_bhz29_106.awsui_vertical_gfwv3_bhz29_102:not(#\9) {
+.awsui_list_gfwv3_sgio_106.awsui_vertical_gfwv3_sgio_102:not(#\9) {
   flex-direction: column;
 }
 
-.awsui_list-item_gfwv3_bhz29_124:not(#\9) {
+.awsui_list-item_gfwv3_sgio_124:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_toggle-container-inline_gfwv3_bhz29_128:not(#\9) {
+.awsui_toggle-container-inline_gfwv3_sgio_128:not(#\9) {
   padding-left: var(--space-xs-rsr2qu, 8px);
   display: flex;
   align-items: center;
 }
 
-.awsui_toggle_gfwv3_bhz29_128:not(#\9) {
+.awsui_toggle_gfwv3_sgio_128:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -186,46 +186,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-left: -1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle_gfwv3_bhz29_128:not(#\9) {
+  .awsui_toggle_gfwv3_sgio_128:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle_gfwv3_bhz29_128:not(#\9), .awsui-mode-entering .awsui_toggle_gfwv3_bhz29_128:not(#\9) {
+.awsui-motion-disabled .awsui_toggle_gfwv3_sgio_128:not(#\9), .awsui-mode-entering .awsui_toggle_gfwv3_sgio_128:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_toggle_gfwv3_bhz29_128:not(#\9):hover {
+.awsui_toggle_gfwv3_sgio_128:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-kololx, #033160);
 }
-.awsui_toggle_gfwv3_bhz29_128:not(#\9):focus {
+.awsui_toggle_gfwv3_sgio_128:not(#\9):focus {
   outline: none;
 }
-.awsui_toggle_gfwv3_bhz29_128:not(#\9):active {
+.awsui_toggle_gfwv3_sgio_128:not(#\9):active {
   color: var(--color-text-link-hover-kololx, #033160);
 }
-.awsui_toggle_gfwv3_bhz29_128:not(#\9):active, .awsui_toggle_gfwv3_bhz29_128:not(#\9):focus, .awsui_toggle_gfwv3_bhz29_128:not(#\9):hover {
+.awsui_toggle_gfwv3_sgio_128:not(#\9):active, .awsui_toggle_gfwv3_sgio_128:not(#\9):focus, .awsui_toggle_gfwv3_sgio_128:not(#\9):hover {
   text-decoration: underline;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   text-decoration-color: currentColor;
 }
-.awsui_toggle_gfwv3_bhz29_128:not(#\9):active, .awsui_toggle_gfwv3_bhz29_128:not(#\9):focus, .awsui_toggle_gfwv3_bhz29_128:not(#\9):hover {
+.awsui_toggle_gfwv3_sgio_128:not(#\9):active, .awsui_toggle_gfwv3_sgio_128:not(#\9):focus, .awsui_toggle_gfwv3_sgio_128:not(#\9):hover {
   text-decoration: none;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   text-decoration-color: transparent;
 }
-.awsui_toggle_gfwv3_bhz29_128[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_sgio_128:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-focused-ap3b6s, #0972d3);
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_toggle_gfwv3_bhz29_128 > .awsui_description_gfwv3_bhz29_196:not(#\9) {
+.awsui_toggle_gfwv3_sgio_128 > .awsui_description_gfwv3_sgio_196:not(#\9) {
   margin-left: var(--space-xxs-ynfts5, 4px);
 }
 
-.awsui_separator_gfwv3_bhz29_200:not(#\9) {
+.awsui_separator_gfwv3_sgio_200:not(#\9) {
   margin: 0px var(--space-scaled-m-pv0fmt, 16px);
   width: var(--border-divider-section-width-4wm2it, 2px);
   background-color: var(--color-border-divider-default-7s2wjw, #e9ebed);

package/internal/components/token-list/styles.selectors.js

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_gfwv3_bhz29_93",
-  "horizontal": "awsui_horizontal_gfwv3_bhz29_98",
-  "vertical": "awsui_vertical_gfwv3_bhz29_102",
-  "list": "awsui_list_gfwv3_bhz29_106",
-  "list-item": "awsui_list-item_gfwv3_bhz29_124",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_bhz29_128",
-  "toggle": "awsui_toggle_gfwv3_bhz29_128",
-  "description": "awsui_description_gfwv3_bhz29_196",
-  "separator": "awsui_separator_gfwv3_bhz29_200"
+  "root": "awsui_root_gfwv3_sgio_93",
+  "horizontal": "awsui_horizontal_gfwv3_sgio_98",
+  "vertical": "awsui_vertical_gfwv3_sgio_102",
+  "list": "awsui_list_gfwv3_sgio_106",
+  "list-item": "awsui_list-item_gfwv3_sgio_124",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_sgio_128",
+  "toggle": "awsui_toggle_gfwv3_sgio_128",
+  "description": "awsui_description_gfwv3_sgio_196",
+  "separator": "awsui_separator_gfwv3_sgio_200"
 };
   

package/internal/components/token-list/token-focus-controller.js

@@ -16,7 +16,7 @@ export function useTokenFocusController({ removedItemIndex }) {
         const toggleButton = tokenListRef.current.querySelector(toggleButtonSelector);
         const activeItemIndices = [];
         for (let i = 0; i < tokenElements.length; i++) {
-            if (tokenElements[i].getAttribute('aria-disabled') !== 'true') {
+            if (!tokenElements[i].querySelector('[aria-disabled="true"]')) {
                 activeItemIndices.push(i);
             }
         }

package/internal/components/token-list/token-focus-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-focus-controller.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-focus-controller.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;AAChD,MAAM,oBAAoB,GAAG,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;AAEjD,MAAM,UAAU,uBAAuB,CAAC,EAAE,gBAAgB,EAAwC;IAChG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,IAAI,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;YAChG,OAAO;SACR;QAED,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC3E,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAE9E,MAAM,iBAAiB,GAAa,EAAE,CAAC;QACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC7C,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,EAAE;gBAC7D,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aAC3B;SACF;QAED,IAAI,gBAAgB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAChD,IAAI,gBAAgB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAEhD,KAAK,MAAM,WAAW,IAAI,iBAAiB,EAAE;YAC3C,IAAI,WAAW,GAAG,gBAAgB,EAAE;gBAClC,gBAAgB;oBACd,gBAAgB,GAAG,WAAW,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC;aACzG;iBAAM;gBACL,gBAAgB;oBACd,WAAW,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC;aACzG;SACF;QAED,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEpD,IAAI,WAAW,YAAY,WAAW,EAAE;YACtC,MAAA,iBAAiB,CAAC,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;aAAM,IAAI,WAAW,YAAY,WAAW,EAAE;YAC7C,MAAA,iBAAiB,CAAC,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;aAAM,IAAI,YAAY,YAAY,WAAW,EAAE;YAC9C,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\nimport { getFirstFocusable } from '../focus-lock/utils.js';\nimport styles from './styles.css.js';\n\nconst tokenSelector = `.${styles['list-item']}`;\nconst toggleButtonSelector = `.${styles.toggle}`;\n\nexport function useTokenFocusController({ removedItemIndex }: { removedItemIndex?: null | number }) {\n  const tokenListRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (removedItemIndex === undefined || removedItemIndex === null || tokenListRef.current === null) {\n      return;\n    }\n\n    const tokenElements = tokenListRef.current.querySelectorAll(tokenSelector);\n    const toggleButton = tokenListRef.current.querySelector(toggleButtonSelector);\n\n    const activeItemIndices: number[] = [];\n    for (let i = 0; i < tokenElements.length; i++) {\n      if (tokenElements[i].getAttribute('aria-disabled') !== 'true') {\n        activeItemIndices.push(i);\n      }\n    }\n\n    let closestPrevIndex = Number.NEGATIVE_INFINITY;\n    let closestNextIndex = Number.POSITIVE_INFINITY;\n\n    for (const activeIndex of activeItemIndices) {\n      if (activeIndex < removedItemIndex) {\n        closestPrevIndex =\n          removedItemIndex - activeIndex < removedItemIndex - closestPrevIndex ? activeIndex : closestPrevIndex;\n      } else {\n        closestNextIndex =\n          activeIndex - removedItemIndex < closestNextIndex - removedItemIndex ? activeIndex : closestNextIndex;\n      }\n    }\n\n    const nextElement = tokenElements[closestNextIndex];\n    const prevElement = tokenElements[closestPrevIndex];\n\n    if (nextElement instanceof HTMLElement) {\n      getFirstFocusable(nextElement)?.focus();\n    } else if (prevElement instanceof HTMLElement) {\n      getFirstFocusable(prevElement)?.focus();\n    } else if (toggleButton instanceof HTMLElement) {\n      toggleButton.focus();\n    }\n  }, [removedItemIndex]);\n\n  return tokenListRef;\n}\n"]}
+{"version":3,"file":"token-focus-controller.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-focus-controller.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;AAChD,MAAM,oBAAoB,GAAG,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;AAEjD,MAAM,UAAU,uBAAuB,CAAC,EAAE,gBAAgB,EAAwC;IAChG,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,IAAI,IAAI,YAAY,CAAC,OAAO,KAAK,IAAI,EAAE;YAChG,OAAO;SACR;QAED,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC3E,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAE9E,MAAM,iBAAiB,GAAa,EAAE,CAAC;QACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC7C,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,wBAAwB,CAAC,EAAE;gBAC7D,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aAC3B;SACF;QAED,IAAI,gBAAgB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAChD,IAAI,gBAAgB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAEhD,KAAK,MAAM,WAAW,IAAI,iBAAiB,EAAE;YAC3C,IAAI,WAAW,GAAG,gBAAgB,EAAE;gBAClC,gBAAgB;oBACd,gBAAgB,GAAG,WAAW,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC;aACzG;iBAAM;gBACL,gBAAgB;oBACd,WAAW,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC;aACzG;SACF;QAED,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEpD,IAAI,WAAW,YAAY,WAAW,EAAE;YACtC,MAAA,iBAAiB,CAAC,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;aAAM,IAAI,WAAW,YAAY,WAAW,EAAE;YAC7C,MAAA,iBAAiB,CAAC,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;aAAM,IAAI,YAAY,YAAY,WAAW,EAAE;YAC9C,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\nimport { getFirstFocusable } from '../focus-lock/utils.js';\nimport styles from './styles.css.js';\n\nconst tokenSelector = `.${styles['list-item']}`;\nconst toggleButtonSelector = `.${styles.toggle}`;\n\nexport function useTokenFocusController({ removedItemIndex }: { removedItemIndex?: null | number }) {\n  const tokenListRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (removedItemIndex === undefined || removedItemIndex === null || tokenListRef.current === null) {\n      return;\n    }\n\n    const tokenElements = tokenListRef.current.querySelectorAll(tokenSelector);\n    const toggleButton = tokenListRef.current.querySelector(toggleButtonSelector);\n\n    const activeItemIndices: number[] = [];\n    for (let i = 0; i < tokenElements.length; i++) {\n      if (!tokenElements[i].querySelector('[aria-disabled=\"true\"]')) {\n        activeItemIndices.push(i);\n      }\n    }\n\n    let closestPrevIndex = Number.NEGATIVE_INFINITY;\n    let closestNextIndex = Number.POSITIVE_INFINITY;\n\n    for (const activeIndex of activeItemIndices) {\n      if (activeIndex < removedItemIndex) {\n        closestPrevIndex =\n          removedItemIndex - activeIndex < removedItemIndex - closestPrevIndex ? activeIndex : closestPrevIndex;\n      } else {\n        closestNextIndex =\n          activeIndex - removedItemIndex < closestNextIndex - removedItemIndex ? activeIndex : closestNextIndex;\n      }\n    }\n\n    const nextElement = tokenElements[closestNextIndex];\n    const prevElement = tokenElements[closestPrevIndex];\n\n    if (nextElement instanceof HTMLElement) {\n      getFirstFocusable(nextElement)?.focus();\n    } else if (prevElement instanceof HTMLElement) {\n      getFirstFocusable(prevElement)?.focus();\n    } else if (toggleButton instanceof HTMLElement) {\n      toggleButton.focus();\n    }\n  }, [removedItemIndex]);\n\n  return tokenListRef;\n}\n"]}

package/internal/components/token-list/token-limit-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-limit-toggle.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":";AAKA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEjF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAgB,GACjB,EAAE,qBAAqB,eAwBvB"}
+{"version":3,"file":"token-limit-toggle.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":";AAKA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAgB,GACjB,EAAE,qBAAqB,eAsBvB"}

package/internal/components/token-list/token-limit-toggle.js

@@ -3,10 +3,8 @@
 import React, { useCallback } from 'react';
 import InternalIcon from '../../../icon/internal';
 import { fireNonCancelableEvent } from '../../events';
-import useFocusVisible from '../../hooks/focus-visible';
 import styles from './styles.css.js';
 export default function TokenLimitToggle({ controlId, allHidden, expanded, numberOfHiddenOptions, onClick, i18nStrings = {}, }) {
-    const focusVisible = useFocusVisible();
     const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;
     const description = expanded
         ? i18nStrings.limitShowFewer
@@ -14,7 +12,7 @@ export default function TokenLimitToggle({ controlId, allHidden, expanded, numbe
     const handleClick = useCallback(() => {
         fireNonCancelableEvent(onClick, null);
     }, [onClick]);
-    return (React.createElement("button", Object.assign({ type: "button", className: styles.toggle, onClick: handleClick, "aria-controls": controlId, "aria-expanded": expanded }, focusVisible),
+    return (React.createElement("button", { type: "button", className: styles.toggle, onClick: handleClick, "aria-controls": controlId, "aria-expanded": expanded },
         React.createElement(InternalIcon, { name: expanded ? 'treeview-collapse' : 'treeview-expand' }),
         React.createElement("span", { className: styles.description }, description)));
 }

package/internal/components/token-list/token-limit-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-limit-toggle.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AACjF,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAGxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,GAAG,EAAE,GACM;IACtB,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,yBAAyB,GAAG,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,qBAAqB,EAAE,CAAC;IAClG,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,WAAW,CAAC,cAAc;QAC5B,CAAC,CAAC,GAAG,WAAW,CAAC,aAAa,IAAI,EAAE,KAAK,yBAAyB,GAAG,CAAC;IAExE,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE,WAAW,mBACL,SAAS,mBACT,QAAQ,IACnB,YAAY;QAEhB,oBAAC,YAAY,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,GAAI;QAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClD,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback } from 'react';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport { I18nStrings } from './interfaces';\n\nimport styles from './styles.css.js';\ninterface TokenLimitToggleProps {\n  controlId?: string;\n  allHidden: boolean;\n  expanded: boolean;\n  numberOfHiddenOptions: number;\n  onClick?: NonCancelableEventHandler<null>;\n  i18nStrings?: I18nStrings;\n}\n\nexport default function TokenLimitToggle({\n  controlId,\n  allHidden,\n  expanded,\n  numberOfHiddenOptions,\n  onClick,\n  i18nStrings = {},\n}: TokenLimitToggleProps) {\n  const focusVisible = useFocusVisible();\n  const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;\n  const description = expanded\n    ? i18nStrings.limitShowFewer\n    : `${i18nStrings.limitShowMore || ''} (${numberOfHiddenOptionLabel})`;\n\n  const handleClick = useCallback(() => {\n    fireNonCancelableEvent(onClick, null);\n  }, [onClick]);\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.toggle}\n      onClick={handleClick}\n      aria-controls={controlId}\n      aria-expanded={expanded}\n      {...focusVisible}\n    >\n      <InternalIcon name={expanded ? 'treeview-collapse' : 'treeview-expand'} />\n      <span className={styles.description}>{description}</span>\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"token-limit-toggle.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AAGjF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,GAAG,EAAE,GACM;IACtB,MAAM,yBAAyB,GAAG,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,qBAAqB,EAAE,CAAC;IAClG,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,WAAW,CAAC,cAAc;QAC5B,CAAC,CAAC,GAAG,WAAW,CAAC,aAAa,IAAI,EAAE,KAAK,yBAAyB,GAAG,CAAC;IAExE,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE,WAAW,mBACL,SAAS,mBACT,QAAQ;QAEvB,oBAAC,YAAY,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,GAAI;QAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClD,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback } from 'react';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { I18nStrings } from './interfaces';\n\nimport styles from './styles.css.js';\ninterface TokenLimitToggleProps {\n  controlId?: string;\n  allHidden: boolean;\n  expanded: boolean;\n  numberOfHiddenOptions: number;\n  onClick?: NonCancelableEventHandler<null>;\n  i18nStrings?: I18nStrings;\n}\n\nexport default function TokenLimitToggle({\n  controlId,\n  allHidden,\n  expanded,\n  numberOfHiddenOptions,\n  onClick,\n  i18nStrings = {},\n}: TokenLimitToggleProps) {\n  const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;\n  const description = expanded\n    ? i18nStrings.limitShowFewer\n    : `${i18nStrings.limitShowMore || ''} (${numberOfHiddenOptionLabel})`;\n\n  const handleClick = useCallback(() => {\n    fireNonCancelableEvent(onClick, null);\n  }, [onClick]);\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.toggle}\n      onClick={handleClick}\n      aria-controls={controlId}\n      aria-expanded={expanded}\n    >\n      <InternalIcon name={expanded ? 'treeview-collapse' : 'treeview-expand'} />\n      <span className={styles.description}>{description}</span>\n    </button>\n  );\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (7ed751a)';
+    export var PACKAGE_VERSION = '3.0.0 (20210ce)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/hooks/focus-visible/index.d.ts

@@ -1,6 +1,3 @@
-export default function useFocusVisible(): {
-    'data-awsui-focus-visible': true;
-} | {
-    'data-awsui-focus-visible'?: undefined;
-};
+export declare function isModifierKey(event: KeyboardEvent): boolean;
+export default function useFocusVisible(): void;
 //# sourceMappingURL=index.d.ts.map

package/internal/hooks/focus-visible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,eAAe;;;;EAGtC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,WAIjD;AAgCD,MAAM,CAAC,OAAO,UAAU,eAAe,SAatC"}

package/internal/hooks/focus-visible/index.js

@@ -1,29 +1,49 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { useEffect } from 'react';
 import { KeyCode } from '../../keycode';
-import { createSingletonState } from '../use-singleton-handler';
-const useFocusSingleton = createSingletonState({
-    initialState: false,
-    factory: setIsKeyboard => {
-        const handleMousedown = () => setIsKeyboard(false);
-        const handleKeydown = (event) => {
-            // we do not want to highlight focused element
-            // when special keys are pressed
-            const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
-            if (!isSpecialKey) {
-                setIsKeyboard(true);
-            }
-        };
-        document.addEventListener('mousedown', handleMousedown);
-        document.addEventListener('keydown', handleKeydown);
+export function isModifierKey(event) {
+    // we do not want to highlight focused element
+    // when special keys are pressed
+    return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
+}
+function setIsKeyboard(active) {
+    if (active) {
+        document.body.setAttribute('data-awsui-focus-visible', 'true');
+    }
+    else {
+        document.body.removeAttribute('data-awsui-focus-visible');
+    }
+}
+function handleMousedown() {
+    return setIsKeyboard(false);
+}
+function handleKeydown(event) {
+    if (!isModifierKey(event)) {
+        setIsKeyboard(true);
+    }
+}
+let componentsCount = 0;
+function addListeners() {
+    document.addEventListener('mousedown', handleMousedown);
+    document.addEventListener('keydown', handleKeydown);
+}
+function removeListeners() {
+    document.removeEventListener('mousedown', handleMousedown);
+    document.removeEventListener('keydown', handleKeydown);
+}
+export default function useFocusVisible() {
+    useEffect(() => {
+        if (componentsCount === 0) {
+            addListeners();
+        }
+        componentsCount++;
         return () => {
-            document.removeEventListener('mousedown', handleMousedown);
-            document.removeEventListener('keydown', handleKeydown);
+            componentsCount--;
+            if (componentsCount === 0) {
+                removeListeners();
+            }
         };
-    },
-});
-export default function useFocusVisible() {
-    const visible = useFocusSingleton();
-    return visible ? { 'data-awsui-focus-visible': visible } : {};
+    }, []);
 }
 //# sourceMappingURL=index.js.map

package/internal/hooks/focus-visible/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,iBAAiB,GAAG,oBAAoB,CAAU;IACtD,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,aAAa,CAAC,EAAE;QACvB,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,8CAA8C;YAC9C,gCAAgC;YAChC,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YAE7G,IAAI,CAAC,YAAY,EAAE;gBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,0BAA0B,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { KeyCode } from '../../keycode';\nimport { createSingletonState } from '../use-singleton-handler';\n\nconst useFocusSingleton = createSingletonState<boolean>({\n  initialState: false,\n  factory: setIsKeyboard => {\n    const handleMousedown = () => setIsKeyboard(false);\n    const handleKeydown = (event: KeyboardEvent) => {\n      // we do not want to highlight focused element\n      // when special keys are pressed\n      const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n\n      if (!isSpecialKey) {\n        setIsKeyboard(true);\n      }\n    };\n    document.addEventListener('mousedown', handleMousedown);\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('mousedown', handleMousedown);\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  },\n});\n\nexport default function useFocusVisible() {\n  const visible = useFocusSingleton();\n  return visible ? { 'data-awsui-focus-visible': visible } : {};\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,8CAA8C;IAC9C,gCAAgC;IAChC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AACjG,CAAC;AAED,SAAS,aAAa,CAAC,MAAe;IACpC,IAAI,MAAM,EAAE;QACV,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;KAChE;SAAM;QACL,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,0BAA0B,CAAC,CAAC;KAC3D;AACH,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC;AAED,SAAS,aAAa,CAAC,KAAoB;IACzC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;QACzB,aAAa,CAAC,IAAI,CAAC,CAAC;KACrB;AACH,CAAC;AAED,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB,SAAS,YAAY;IACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,eAAe;IACtB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,CAAC,EAAE;YACzB,YAAY,EAAE,CAAC;SAChB;QACD,eAAe,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC;YAClB,IAAI,eAAe,KAAK,CAAC,EAAE;gBACzB,eAAe,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect } from 'react';\nimport { KeyCode } from '../../keycode';\n\nexport function isModifierKey(event: KeyboardEvent) {\n  // we do not want to highlight focused element\n  // when special keys are pressed\n  return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n}\n\nfunction setIsKeyboard(active: boolean) {\n  if (active) {\n    document.body.setAttribute('data-awsui-focus-visible', 'true');\n  } else {\n    document.body.removeAttribute('data-awsui-focus-visible');\n  }\n}\n\nfunction handleMousedown() {\n  return setIsKeyboard(false);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (!isModifierKey(event)) {\n    setIsKeyboard(true);\n  }\n}\n\nlet componentsCount = 0;\n\nfunction addListeners() {\n  document.addEventListener('mousedown', handleMousedown);\n  document.addEventListener('keydown', handleKeydown);\n}\n\nfunction removeListeners() {\n  document.removeEventListener('mousedown', handleMousedown);\n  document.removeEventListener('keydown', handleKeydown);\n}\n\nexport default function useFocusVisible() {\n  useEffect(() => {\n    if (componentsCount === 0) {\n      addListeners();\n    }\n    componentsCount++;\n    return () => {\n      componentsCount--;\n      if (componentsCount === 0) {\n        removeListeners();\n      }\n    };\n  }, []);\n}\n"]}

package/internal/hooks/use-base-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,aAAa,EAAE,MAAM;;EAItE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAMzC,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,aAAa,EAAE,MAAM;;EAKtE"}

package/internal/hooks/use-base-component/index.js

@@ -1,6 +1,7 @@
 import { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';
 import { useTelemetry } from '../use-telemetry';
 import { PACKAGE_VERSION } from '../../environment';
+import useFocusVisible from '../focus-visible';
 /**
  * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be
  * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
@@ -8,6 +9,7 @@ import { PACKAGE_VERSION } from '../../environment';
  */
 export default function useBaseComponent(componentName) {
     useTelemetry(componentName);
+    useFocusVisible();
     const elementRef = useComponentMetadata(componentName, PACKAGE_VERSION);
     return { __internalRootRef: elementRef };
 }

package/internal/hooks/use-base-component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG,oBAAoB,CAAI,aAAa,EAAE,eAAe,CAAC,CAAC;IAC3E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject } from 'react';\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\nimport { useTelemetry } from '../use-telemetry';\nimport { PACKAGE_VERSION } from '../../environment';\n\nexport interface InternalBaseComponentProps {\n  __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string) {\n  useTelemetry(componentName);\n  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);\n  return { __internalRootRef: elementRef };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAM/C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,eAAe,EAAE,CAAC;IAClB,MAAM,UAAU,GAAG,oBAAoB,CAAI,aAAa,EAAE,eAAe,CAAC,CAAC;IAC3E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject } from 'react';\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\nimport { useTelemetry } from '../use-telemetry';\nimport { PACKAGE_VERSION } from '../../environment';\nimport useFocusVisible from '../focus-visible';\n\nexport interface InternalBaseComponentProps {\n  __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string) {\n  useTelemetry(componentName);\n  useFocusVisible();\n  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);\n  return { __internalRootRef: elementRef };\n}\n"]}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "7ed751a10e2ecf63cec865877bf8a6f75b6f1e54"
+  "commit": "20210cee4f66d92a45cbc56cab80f6af7a2e48f3"
 }

package/link/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA+G1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA6G1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}