npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1106 → 3.0.1108 - Mend

@cloudscape-design/components-themeable 3.0.1106 → 3.0.1108

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "8c8796c091a69ffcf4d87245b60068b47f2b6f1a"
+  "commit": "eae5d559b55c956d908bc8e9874860a126ebb32a"
 }

package/lib/internal/scss/internal/components/expand-toggle-button/styles.scss CHANGED Viewed

@@ -40,8 +40,12 @@
   outline: 0;
   color: awsui.$color-text-interactive-default;
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  // focus highlight for tree-view is different and handled in tree-item/styles
+  // so we disable this one
+  &:not(.disable-focus-highlight) {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    }
   }
   &:hover {

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "8c8796c0";
+    $awsui-commit-hash: "eae5d559";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-y15yd5;
 $minContentWidth: --awsui-min-content-width-y15yd5;

package/lib/internal/scss/internal/styles/utils/styles-reset.scss CHANGED Viewed

@@ -39,6 +39,7 @@
 }
 @mixin styles-reset-ul {
+  list-style: none;
   margin-block: 0;
   margin-inline: 0;

package/lib/internal/scss/tree-view/tree-item/styles.scss CHANGED Viewed

@@ -4,42 +4,59 @@
 */
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 $item-toggle-column-width: 28px;
 .treeitem-group {
   @include styles.styles-reset-ul;
+  position: relative;
 }
 .treeitem {
   @include styles.styles-reset-ul;
-  align-items: baseline;
+  position: relative;
-  display: grid;
-  grid-template-columns: $item-toggle-column-width 1fr;
-  grid-template-rows: auto auto auto;
+  &.offset {
+    margin-inline-start: $item-toggle-column-width;
+  }
-  > .expand-toggle-wrapper {
-    grid-column: 1;
-    grid-row: 1;
-    margin-inline-end: awsui.$space-scaled-xxs;
+  > .treeitem-content-wrapper {
+    display: grid;
+    grid-template-columns: $item-toggle-column-width 1fr;
+    align-items: baseline;
-    > .toggle {
-      justify-self: center;
-      position: relative;
-      inset-block-start: 2px;
+    // When toggle is focused, show focus outline around the entire tree item
+    // stylelint-disable-next-line selector-combinator-disallowed-list
+    body[data-awsui-focus-visible='true'] &:has(.tree-item-focus-target:focus) {
+      @include styles.focus-highlight(0px);
     }
-  }
-  > .structured-item-wrapper {
-    grid-column: 2;
-    grid-row: 1 / span 2;
-    padding-block: awsui.$space-scaled-xxs;
-  }
+    > .expand-toggle-wrapper {
+      grid-column: 1;
+      grid-row: 1;
+      padding-inline-end: awsui.$space-scaled-xxs;
+      > .toggle {
+        justify-self: center;
+        position: relative;
+        inset-block-start: 2px;
+      }
+    }
+    > .structured-item-wrapper {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+      padding-block: awsui.$space-scaled-xxs;
-  > .treeitem-group {
-    grid-column: 2;
-    grid-row: 3;
+      position: relative;
+    }
   }
 }
+.tree-item-structured-item,
+.tree-item-focus-target {
+  /* used in keyboard navigation */
+}

package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED Viewed

@@ -3901,5 +3901,5 @@
   }
 }
 :root {
-  --awsui-version-info-8c8796c0: true;
+  --awsui-version-info-eae5d559: true;
 }

package/lib/internal/template/internal/components/expand-toggle-button/index.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 import React from 'react';
-export declare function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, }: {
+export declare function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }: {
     isExpanded?: boolean;
     onExpandableItemToggle?: () => void;
     expandButtonLabel?: string;
     collapseButtonLabel?: string;
     customIcon?: React.ReactNode;
+    className?: string;
+    disableFocusHighlight?: boolean;
 }): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/expand-toggle-button/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,~~GACX~~,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;~~CAC9B~~,~~eAsBA~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GACtB,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,eAuBA"}

package/lib/internal/template/internal/components/expand-toggle-button/index.js CHANGED Viewed

@@ -5,9 +5,9 @@ import clsx from 'clsx';
 import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import InternalIcon from '../../../icon/internal';
 import styles from './styles.css.js';
-export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, }) {
+export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }) {
     const buttonRef = useRef(null);
     const { tabIndex } = useSingleTabStopNavigation(buttonRef);
-    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: styles['expand-toggle'], onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: "small", name: "caret-down-filled", className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
+    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: "small", name: "caret-down-filled", className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/expand-toggle-button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,~~GAOX~~;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;~~IAC3D~~,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,~~EAClC~~,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n isExpanded,\n onExpandableItemToggle,\n expandButtonLabel,\n collapseButtonLabel,\n customIcon,\n}: {\n isExpanded?: boolean;\n onExpandableItemToggle?: () => void;\n expandButtonLabel?: string;\n collapseButtonLabel?: string;\n customIcon?: React.ReactNode;\n}) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n tabIndex={tabIndex}\n aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n aria-expanded={isExpanded}\n className={styles['expand-toggle']}\n onClick={onExpandableItemToggle}\n >\n {customIcon ?? (\n <InternalIcon\n size=\"small\"\n name=\"caret-down-filled\"\n className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n />\n )}\n </button>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n isExpanded,\n onExpandableItemToggle,\n expandButtonLabel,\n collapseButtonLabel,\n customIcon,\n className,\n disableFocusHighlight,\n}: {\n isExpanded?: boolean;\n onExpandableItemToggle?: () => void;\n expandButtonLabel?: string;\n collapseButtonLabel?: string;\n customIcon?: React.ReactNode;\n className?: string;\n disableFocusHighlight?: boolean;\n}) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n tabIndex={tabIndex}\n aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n aria-expanded={isExpanded}\n className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n onClick={onExpandableItemToggle}\n >\n {customIcon ?? (\n <InternalIcon\n size=\"small\"\n name=\"caret-down-filled\"\n className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n />\n )}\n </button>\n );\n}\n"]}

package/lib/internal/template/internal/components/expand-toggle-button/styles.css.js CHANGED Viewed

@@ -1,8 +1,9 @@
     import './styles.scoped.css';
     export default {
-  "expand-toggle-icon": "awsui_expand-toggle-icon_1xe88_sgtpp_153",
-  "expand-toggle-icon-expanded": "awsui_expand-toggle-icon-expanded_1xe88_sgtpp_174",
-  "expand-toggle": "awsui_expand-toggle_1xe88_sgtpp_153"
+  "expand-toggle-icon": "awsui_expand-toggle-icon_1xe88_1vxpr_153",
+  "expand-toggle-icon-expanded": "awsui_expand-toggle-icon-expanded_1xe88_1vxpr_174",
+  "expand-toggle": "awsui_expand-toggle_1xe88_1vxpr_153",
+  "disable-focus-highlight": "awsui_disable-focus-highlight_1xe88_1vxpr_225"
 };

package/lib/internal/template/internal/components/expand-toggle-button/styles.scoped.css CHANGED Viewed

@@ -150,36 +150,36 @@ 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_expand-toggle-icon_1xe88_sgtpp_153:not(#\9) {
+.awsui_expand-toggle-icon_1xe88_1vxpr_153:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-f1ulnu, 135ms) var(--motion-easing-rotate-90-jekue3, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_expand-toggle-icon_1xe88_sgtpp_153:not(#\9) {
+  .awsui_expand-toggle-icon_1xe88_1vxpr_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_expand-toggle-icon_1xe88_sgtpp_153:not(#\9), .awsui-mode-entering .awsui_expand-toggle-icon_1xe88_sgtpp_153:not(#\9) {
+.awsui-motion-disabled .awsui_expand-toggle-icon_1xe88_1vxpr_153:not(#\9), .awsui-mode-entering .awsui_expand-toggle-icon_1xe88_1vxpr_153:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_expand-toggle-icon_1xe88_sgtpp_153:not(#\9) {
+.awsui_expand-toggle-icon_1xe88_1vxpr_153:not(#\9) {
   transform: rotate(-90deg);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_expand-toggle-icon_1xe88_sgtpp_153:not(#\9):dir(rtl) {
+.awsui_expand-toggle-icon_1xe88_1vxpr_153:not(#\9):dir(rtl) {
   transform: rotate(90deg);
 }
-.awsui_expand-toggle-icon-expanded_1xe88_sgtpp_174:not(#\9) {
+.awsui_expand-toggle-icon-expanded_1xe88_1vxpr_174:not(#\9) {
   transform: rotate(0deg);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_expand-toggle-icon-expanded_1xe88_sgtpp_174:not(#\9):dir(rtl) {
+.awsui_expand-toggle-icon-expanded_1xe88_1vxpr_174:not(#\9):dir(rtl) {
   transform: rotate(0deg);
 }
-.awsui_expand-toggle_1xe88_sgtpp_153:not(#\9) {
+.awsui_expand-toggle_1xe88_1vxpr_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -222,14 +222,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   outline: 0;
   color: var(--color-text-interactive-default-qwoe3g, #545b64);
 }
-body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_sgtpp_153:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_1vxpr_153:not(#\9):not(.awsui_disable-focus-highlight_1xe88_1vxpr_225):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_sgtpp_153:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_1vxpr_153:not(#\9):not(.awsui_disable-focus-highlight_1xe88_1vxpr_225):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-focus-outline-gutter-vsdlzg, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_sgtpp_153:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_1vxpr_153:not(#\9):not(.awsui_disable-focus-highlight_1xe88_1vxpr_225):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -243,9 +243,9 @@ body[data-awsui-focus-visible=true] .awsui_expand-toggle_1xe88_sgtpp_153:not(#\9
   border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_expand-toggle_1xe88_sgtpp_153:not(#\9):hover {
+.awsui_expand-toggle_1xe88_1vxpr_153:not(#\9):hover {
   color: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_expand-toggle_1xe88_sgtpp_153:not(#\9):active {
+.awsui_expand-toggle_1xe88_1vxpr_153:not(#\9):active {
   color: var(--color-text-interactive-active-c44vdq, #16191f);
 }

package/lib/internal/template/internal/components/expand-toggle-button/styles.selectors.js CHANGED Viewed

@@ -2,8 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "expand-toggle-icon": "awsui_expand-toggle-icon_1xe88_sgtpp_153",
-  "expand-toggle-icon-expanded": "awsui_expand-toggle-icon-expanded_1xe88_sgtpp_174",
-  "expand-toggle": "awsui_expand-toggle_1xe88_sgtpp_153"
+  "expand-toggle-icon": "awsui_expand-toggle-icon_1xe88_1vxpr_153",
+  "expand-toggle-icon-expanded": "awsui_expand-toggle-icon-expanded_1xe88_1vxpr_174",
+  "expand-toggle": "awsui_expand-toggle_1xe88_1vxpr_153",
+  "disable-focus-highlight": "awsui_disable-focus-highlight_1xe88_1vxpr_225"
 };

package/lib/internal/template/internal/components/structured-item/index.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { StructuredItemProps } from './interfaces';
 export { StructuredItemProps };
-export default function InternalStructuredItem({ content, icon, actions, secondaryContent, disablePaddings, wrapActions, }: StructuredItemProps): JSX.Element;
+export default function InternalStructuredItem({ content, icon, actions, secondaryContent, disablePaddings, wrapActions, className, }: StructuredItemProps & {
+    className?: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/structured-item/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/structured-item/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,WAAkB,~~GACnB~~,EAAE,mBAAmB,~~eAarB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/structured-item/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,WAAkB,EAClB,SAAS,GACV,EAAE,mBAAmB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,eAa9C"}

package/lib/internal/template/internal/components/structured-item/index.js CHANGED Viewed

@@ -4,8 +4,8 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.css.js';
 import testClasses from './test-classes/styles.css.js';
-export default function InternalStructuredItem({ content, icon, actions, secondaryContent, disablePaddings, wrapActions = true, }) {
-    return (React.createElement("div", { className: clsx(styles.root, testClasses.root, disablePaddings && styles['disable-paddings']) },
+export default function InternalStructuredItem({ content, icon, actions, secondaryContent, disablePaddings, wrapActions = true, className, }) {
+    return (React.createElement("div", { className: clsx(styles.root, testClasses.root, disablePaddings && styles['disable-paddings'], className) },
         icon && React.createElement("div", { className: clsx(styles.icon, testClasses.icon) }, icon),
         React.createElement("div", { className: clsx(styles.main) },
             React.createElement("div", { className: clsx(styles['content-wrap'], wrapActions && styles['wrap-actions']) },

package/lib/internal/template/internal/components/structured-item/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/structured-item/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAIvD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,WAAW,GAAG,IAAI,~~GACE~~;~~IACpB~~,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC;~~QAC/F~~,IAAI,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,IAAI,CAAO;QAC1E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YAC/B,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,WAAW,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;gBACjF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,IAAG,OAAO,CAAO;gBACzE,OAAO,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,IAAG,OAAO,CAAO,CAClF;YACL,gBAAgB,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,IAAG,gBAAgB,CAAO,CACxG,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { StructuredItemProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testClasses from './test-classes/styles.css.js';\n\nexport { StructuredItemProps };\n\nexport default function InternalStructuredItem({\n content,\n icon,\n actions,\n secondaryContent,\n disablePaddings,\n wrapActions = true,\n}: StructuredItemProps) {\n return (\n <div className={clsx(styles.root, testClasses.root, disablePaddings && styles['disable-paddings'])}>\n {icon && <div className={clsx(styles.icon, testClasses.icon)}>{icon}</div>}\n <div className={clsx(styles.main)}>\n <div className={clsx(styles['content-wrap'], wrapActions && styles['wrap-actions'])}>\n <div className={clsx(styles.content, testClasses.content)}>{content}</div>\n {actions && <div className={clsx(styles.actions, testClasses.actions)}>{actions}</div>}\n </div>\n {secondaryContent && <div className={clsx(styles.secondary, testClasses.secondary)}>{secondaryContent}</div>}\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/structured-item/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAIvD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,WAAW,GAAG,IAAI,EAClB,SAAS,GACoC;IAC7C,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,kBAAkB,CAAC,EAAE,SAAS,CAAC;QAC1G,IAAI,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,IAAI,CAAO;QAC1E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YAC/B,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,WAAW,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;gBACjF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,IAAG,OAAO,CAAO;gBACzE,OAAO,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,IAAG,OAAO,CAAO,CAClF;YACL,gBAAgB,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,IAAG,gBAAgB,CAAO,CACxG,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { StructuredItemProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testClasses from './test-classes/styles.css.js';\n\nexport { StructuredItemProps };\n\nexport default function InternalStructuredItem({\n content,\n icon,\n actions,\n secondaryContent,\n disablePaddings,\n wrapActions = true,\n className,\n}: StructuredItemProps & { className?: string }) {\n return (\n <div className={clsx(styles.root, testClasses.root, disablePaddings && styles['disable-paddings'], className)}>\n {icon && <div className={clsx(styles.icon, testClasses.icon)}>{icon}</div>}\n <div className={clsx(styles.main)}>\n <div className={clsx(styles['content-wrap'], wrapActions && styles['wrap-actions'])}>\n <div className={clsx(styles.content, testClasses.content)}>{content}</div>\n {actions && <div className={clsx(styles.actions, testClasses.actions)}>{actions}</div>}\n </div>\n {secondaryContent && <div className={clsx(styles.secondary, testClasses.secondary)}>{secondaryContent}</div>}\n </div>\n </div>\n );\n}\n"]}

package/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (8c8796c0)";
-export var GIT_SHA = "8c8796c0";
+export var PACKAGE_VERSION = "3.0.0 (eae5d559)";
+export var GIT_SHA = "eae5d559";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "console";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (8c8796c0)",
-  "GIT_SHA": "8c8796c0",
+  "PACKAGE_VERSION": "3.0.0 (eae5d559)",
+  "GIT_SHA": "eae5d559",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/tree-view/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tree-view/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;~~AAM7C~~,KAAK,qBAAqB,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC;AAE9E,QAAA,MAAM,gBAAgB,~~kQA6DrB~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tree-view/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAQ7C,KAAK,qBAAqB,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC;AAE9E,QAAA,MAAM,gBAAgB,kQAqErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/internal/template/tree-view/internal.js CHANGED Viewed

@@ -1,12 +1,14 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useControllable } from '../internal/hooks/use-controllable';
+import { KeyboardNavigationProvider } from './keyboard-navigation';
 import InternalTreeItem from './tree-item';
+import { getAllVisibleItemsIndices } from './utils';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 const InternalTreeView = (_a) => {
@@ -17,6 +19,8 @@ const InternalTreeView = (_a) => {
         controlledProp: 'expandedItems',
         changeHandler: 'onItemToggle',
     });
+    const treeViewRefObject = useRef(null);
+    const allVisibleItemsIndices = getAllVisibleItemsIndices({ items, expandedItems, getItemId, getItemChildren });
     const onToggle = ({ id, item, expanded }) => {
         if (expanded) {
             setExpandedItems([...(expandedItems || []), id]);
@@ -27,9 +31,11 @@ const InternalTreeView = (_a) => {
         fireNonCancelableEvent(onItemToggle, { id, item, expanded });
     };
     return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root, testUtilStyles.root) }),
-        React.createElement("ul", { className: clsx(styles.tree, testUtilStyles.tree), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, items.map((item, index) => {
-            return (React.createElement(InternalTreeItem, { key: index, item: item, level: 1, index: index, expandedItems: expandedItems, i18nStrings: i18nStrings, onItemToggle: onToggle, renderItem: renderItem, getItemId: getItemId, getItemChildren: getItemChildren, renderItemToggleIcon: renderItemToggleIcon }));
-        }))));
+        React.createElement(KeyboardNavigationProvider, { getTreeView: () => treeViewRefObject.current },
+            React.createElement("ul", { role: "tree", ref: treeViewRefObject, className: clsx(styles.tree, testUtilStyles.tree), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, items.map((item, index) => {
+                const itemId = getItemId(item, index);
+                return (React.createElement(InternalTreeItem, { key: itemId, item: item, level: 1, index: index, expandedItems: expandedItems, i18nStrings: i18nStrings, onItemToggle: onToggle, renderItem: renderItem, getItemId: getItemId, getItemChildren: getItemChildren, renderItemToggleIcon: renderItemToggleIcon, allVisibleItemsIndices: allVisibleItemsIndices }));
+            })))));
 };
 export default InternalTreeView;
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/tree-view/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tree-view/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAC1B~~,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,OAAO,gBAAgB,MAAM,aAAa,CAAC;~~AAE3C~~,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAI1D,MAAM,gBAAgB,GAAG,CAAK,EAcH,EAAE,EAAE;QAdD,EAC5B,aAAa,EAAE,uBAAuB,EACtC,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,iBAAiB,OAEQ,EADtB,IAAI,cAbqB,sMAc7B,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,eAAe,CAAC,uBAAuB,EAAE,YAAY,EAAE,EAAE,EAAE;QACnG,aAAa,EAAE,UAAU;QACzB,cAAc,EAAE,eAAe;QAC/B,aAAa,EAAE,cAAc;KAC9B,CAAC,CAAC;~~IAEH~~,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAqC,EAAE,EAAE;QAC7E,IAAI,QAAQ,EAAE;YACZ,gBAAgB,CAAC,CAAC,GAAG,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;SAClD;aAAM;YACL,gBAAgB,CAAC,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC;SACjF;QACD,sBAAsB,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,6CAAS,SAAS,IAAE,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC;~~QAEhH~~,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,gBACrC,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;~~YACzB~~,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,~~KAAK~~,~~EACV~~,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,QAAQ,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,~~GAC1C~~,CACH,CAAC;~~QACJ~~,CAAC,CAAC,CACC,~~CACD~~,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { TreeViewProps } from './interfaces';\nimport InternalTreeItem from './tree-item';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTreeViewProps<T> = TreeViewProps<T> & InternalBaseComponentProps;\n\nconst InternalTreeView = <T,>({\n expandedItems: controlledExpandedItems,\n items,\n renderItem,\n getItemId,\n getItemChildren,\n onItemToggle,\n renderItemToggleIcon,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n i18nStrings,\n __internalRootRef,\n ...rest\n}: InternalTreeViewProps<T>) => {\n const baseProps = getBaseProps(rest);\n\n const [expandedItems, setExpandedItems] = useControllable(controlledExpandedItems, onItemToggle, [], {\n componentName: 'TreeView',\n controlledProp: 'expandedItems',\n changeHandler: 'onItemToggle',\n });\n\n const onToggle = ({ id, item, expanded }: TreeViewProps.ItemToggleDetail<T>) => {\n if (expanded) {\n setExpandedItems([...(expandedItems \|\| []), id]);\n } else {\n setExpandedItems((expandedItems \|\| []).filter(expandedId => expandedId !== id));\n }\n fireNonCancelableEvent(onItemToggle, { id, item, expanded });\n };\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testUtilStyles.root)}>\n {/* ~~Role~~ ~~`tree` isn't used in the initial release per discussion with A11Y team~~. ~~It requires focus management to be implemented so they will be added as a follow up together. */~~}\n <ul\n className={clsx(styles.tree, testUtilStyles.tree)}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {items.map((item, index) => {\n return (\n <InternalTreeItem\n key={~~index~~}\n item={item}\n level={1}\n index={index}\n expandedItems={expandedItems}\n i18nStrings={i18nStrings}\n onItemToggle={onToggle}\n renderItem={renderItem}\n getItemId={getItemId}\n getItemChildren={getItemChildren}\n renderItemToggleIcon={renderItemToggleIcon}\n />\n );\n })}\n </ul>\n </div>\n );\n};\n\nexport default InternalTreeView;\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tree-view/internal.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\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { TreeViewProps } from './interfaces';\nimport { KeyboardNavigationProvider } from './keyboard-navigation';\nimport InternalTreeItem from './tree-item';\nimport { getAllVisibleItemsIndices } from './utils';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalTreeViewProps<T> = TreeViewProps<T> & InternalBaseComponentProps;\n\nconst InternalTreeView = <T,>({\n expandedItems: controlledExpandedItems,\n items,\n renderItem,\n getItemId,\n getItemChildren,\n onItemToggle,\n renderItemToggleIcon,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n i18nStrings,\n __internalRootRef,\n ...rest\n}: InternalTreeViewProps<T>) => {\n const baseProps = getBaseProps(rest);\n\n const [expandedItems, setExpandedItems] = useControllable(controlledExpandedItems, onItemToggle, [], {\n componentName: 'TreeView',\n controlledProp: 'expandedItems',\n changeHandler: 'onItemToggle',\n });\n const treeViewRefObject = useRef(null);\n\n const allVisibleItemsIndices = getAllVisibleItemsIndices({ items, expandedItems, getItemId, getItemChildren });\n\n const onToggle = ({ id, item, expanded }: TreeViewProps.ItemToggleDetail<T>) => {\n if (expanded) {\n setExpandedItems([...(expandedItems \|\| []), id]);\n } else {\n setExpandedItems((expandedItems \|\| []).filter(expandedId => expandedId !== id));\n }\n fireNonCancelableEvent(onItemToggle, { id, item, expanded });\n };\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testUtilStyles.root)}>\n <KeyboardNavigationProvider getTreeView={() => treeViewRefObject.current}>\n <ul\n role=\"tree\"\n ref={treeViewRefObject}\n className={clsx(styles.tree, testUtilStyles.tree)}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {items.map((item, index) => {\n const itemId = getItemId(item, index);\n return (\n <InternalTreeItem<T>\n key={itemId}\n item={item}\n level={1}\n index={index}\n expandedItems={expandedItems}\n i18nStrings={i18nStrings}\n onItemToggle={onToggle}\n renderItem={renderItem}\n getItemId={getItemId}\n getItemChildren={getItemChildren}\n renderItemToggleIcon={renderItemToggleIcon}\n allVisibleItemsIndices={allVisibleItemsIndices}\n />\n );\n })}\n </ul>\n </KeyboardNavigationProvider>\n </div>\n );\n};\n\nexport default InternalTreeView;\n"]}

package/lib/internal/template/tree-view/keyboard-navigation/index.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SingleTabStopNavigationAPI } from '@cloudscape-design/component-toolkit/internal';
+export declare function KeyboardNavigationProvider({ getTreeView, children, }: {
+    getTreeView: () => null | HTMLUListElement;
+    children: React.ReactNode;
+}): JSX.Element;
+export declare class KeyboardNavigationProcessor {
+    private _treeView;
+    private _navigationAPI;
+    private focusedTreeItem;
+    constructor(navigationAPI: {
+        current: null | SingleTabStopNavigationAPI;
+    });
+    init(treeView: HTMLUListElement): void;
+    cleanup: () => void;
+    refresh(): void;
+    onUnregisterActive: () => void;
+    getNextFocusTarget: () => HTMLElement | null;
+    private get treeView();
+    private getFocusablesFrom;
+    private isRegistered;
+    private updateFocusedTreeItem;
+    private onFocusin;
+    private onKeydown;
+    private getNextFocusableTreeItem;
+    private moveFocusInsideTreeItem;
+    private moveFocusBetweenTreeItems;
+    private moveFocusToTheLastElementInsideTreeItem;
+    private getNextFocusableTreeItemContent;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/tree-view/keyboard-navigation/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tree-view/keyboard-navigation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EACL,0BAA0B,EAE3B,MAAM,+CAA+C,CAAC;AAiBvD,wBAAgB,0BAA0B,CAAC,EACzC,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,MAAM,IAAI,GAAG,gBAAgB,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eA+BA;AASD,qBAAa,2BAA2B;IAEtC,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,cAAc,CAAiD;IAGvE,OAAO,CAAC,eAAe,CAAgC;gBAE3C,aAAa,EAAE;QAAE,OAAO,EAAE,IAAI,GAAG,0BAA0B,CAAA;KAAE;IAIlE,IAAI,CAAC,QAAQ,EAAE,gBAAgB;IAY/B,OAAO,aAEZ;IAEK,OAAO;IAWP,kBAAkB,aAYvB;IAEK,kBAAkB,2BAkBvB;IAEF,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,SAAS,CAWf;IAEF,OAAO,CAAC,SAAS,CA0Cf;IAEF,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,yBAAyB;IAUjC,OAAO,CAAC,uCAAuC;IAiB/C,OAAO,CAAC,+BAA+B;CA0BxC"}