@cloudscape-design/components 3.0.1310 → 3.0.1311

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 (127) hide show
  1. package/app-layout/runtime-drawer/index.js +1 -1
  2. package/app-layout/runtime-drawer/index.js.map +1 -1
  3. package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  4. package/app-layout/visual-refresh/drawers.js +3 -0
  5. package/app-layout/visual-refresh/drawers.js.map +1 -1
  6. package/app-layout/visual-refresh/styles.css.js +87 -86
  7. package/app-layout/visual-refresh/styles.scoped.css +176 -164
  8. package/app-layout/visual-refresh/styles.selectors.js +87 -86
  9. package/app-layout/visual-refresh/tools.d.ts.map +1 -1
  10. package/app-layout/visual-refresh/tools.js +2 -0
  11. package/app-layout/visual-refresh/tools.js.map +1 -1
  12. package/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  13. package/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
  14. package/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  15. package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  16. package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +6 -6
  17. package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  18. package/breadcrumb-group/implementation.d.ts.map +1 -1
  19. package/breadcrumb-group/implementation.js +2 -2
  20. package/breadcrumb-group/implementation.js.map +1 -1
  21. package/breadcrumb-group/item/item.d.ts.map +1 -1
  22. package/breadcrumb-group/item/item.js +2 -1
  23. package/breadcrumb-group/item/item.js.map +1 -1
  24. package/button/internal.d.ts +3 -0
  25. package/button/internal.d.ts.map +1 -1
  26. package/button/internal.js +2 -2
  27. package/button/internal.js.map +1 -1
  28. package/button-dropdown/internal.d.ts.map +1 -1
  29. package/button-dropdown/internal.js +4 -3
  30. package/button-dropdown/internal.js.map +1 -1
  31. package/button-dropdown/styles.css.js +22 -21
  32. package/button-dropdown/styles.scoped.css +33 -29
  33. package/button-dropdown/styles.selectors.js +22 -21
  34. package/button-group/icon-toggle-button-item.js +1 -1
  35. package/button-group/icon-toggle-button-item.js.map +1 -1
  36. package/dropdown/internal.d.ts.map +1 -1
  37. package/dropdown/internal.js +14 -2
  38. package/dropdown/internal.js.map +1 -1
  39. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  40. package/expandable-section/expandable-section-header.js +5 -5
  41. package/expandable-section/expandable-section-header.js.map +1 -1
  42. package/expandable-section/styles.css.js +36 -35
  43. package/expandable-section/styles.scoped.css +81 -66
  44. package/expandable-section/styles.selectors.js +36 -35
  45. package/icon/generated/icons.d.ts +1 -0
  46. package/icon/generated/icons.d.ts.map +1 -1
  47. package/icon/generated/icons.js +2 -0
  48. package/icon/generated/icons.js.map +1 -1
  49. package/icon-provider/interfaces.d.ts +1 -1
  50. package/icon-provider/interfaces.d.ts.map +1 -1
  51. package/icon-provider/interfaces.js.map +1 -1
  52. package/internal/base-component/styles.scoped.css +5 -1
  53. package/internal/components/button-trigger/index.d.ts.map +1 -1
  54. package/internal/components/button-trigger/index.js +3 -2
  55. package/internal/components/button-trigger/index.js.map +1 -1
  56. package/internal/components/button-trigger/styles.css.js +15 -14
  57. package/internal/components/button-trigger/styles.scoped.css +35 -29
  58. package/internal/components/button-trigger/styles.selectors.js +15 -14
  59. package/internal/components/drag-handle/styles.css.js +14 -14
  60. package/internal/components/drag-handle/styles.scoped.css +20 -19
  61. package/internal/components/drag-handle/styles.selectors.js +14 -14
  62. package/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  63. package/internal/components/drag-handle-wrapper/index.js +6 -3
  64. package/internal/components/drag-handle-wrapper/index.js.map +1 -1
  65. package/internal/components/drag-handle-wrapper/portal-overlay.d.ts +2 -0
  66. package/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map +1 -1
  67. package/internal/components/drag-handle-wrapper/portal-overlay.js +2 -2
  68. package/internal/components/drag-handle-wrapper/portal-overlay.js.map +1 -1
  69. package/internal/components/expand-toggle-button/index.js +2 -2
  70. package/internal/components/expand-toggle-button/index.js.map +1 -1
  71. package/internal/environment.js +2 -2
  72. package/internal/environment.json +2 -2
  73. package/internal/generated/styles/tokens.d.ts +1 -0
  74. package/internal/generated/styles/tokens.js +1 -0
  75. package/internal/generated/theming/index.cjs +33 -0
  76. package/internal/generated/theming/index.cjs.d.ts +9 -0
  77. package/internal/generated/theming/index.d.ts +9 -0
  78. package/internal/generated/theming/index.js +33 -0
  79. package/internal/hooks/use-mouse-down-target.js +2 -2
  80. package/internal/hooks/use-mouse-down-target.js.map +1 -1
  81. package/internal/hooks/use-portal-mode-classes/index.d.ts.map +1 -1
  82. package/internal/hooks/use-portal-mode-classes/index.js +4 -2
  83. package/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
  84. package/internal/hooks/use-visual-mode/index.d.ts +2 -1
  85. package/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
  86. package/internal/hooks/use-visual-mode/index.js +2 -1
  87. package/internal/hooks/use-visual-mode/index.js.map +1 -1
  88. package/internal/manifest.json +1 -1
  89. package/manifest.json +2 -2
  90. package/package.json +1 -1
  91. package/status-indicator/internal.d.ts.map +1 -1
  92. package/status-indicator/internal.js +4 -3
  93. package/status-indicator/internal.js.map +1 -1
  94. package/status-indicator/styles.css.js +25 -24
  95. package/status-indicator/styles.scoped.css +75 -40
  96. package/status-indicator/styles.selectors.js +25 -24
  97. package/table/header-cell/group-header-cell.d.ts.map +1 -1
  98. package/table/header-cell/group-header-cell.js +3 -15
  99. package/table/header-cell/group-header-cell.js.map +1 -1
  100. package/table/header-cell/styles.css.js +33 -33
  101. package/table/header-cell/styles.scoped.css +73 -73
  102. package/table/header-cell/styles.selectors.js +33 -33
  103. package/table/header-cell/th-element.d.ts +6 -6
  104. package/table/header-cell/th-element.d.ts.map +1 -1
  105. package/table/header-cell/th-element.js +4 -3
  106. package/table/header-cell/th-element.js.map +1 -1
  107. package/table/sticky-columns/use-sticky-columns.d.ts +3 -1
  108. package/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
  109. package/table/sticky-columns/use-sticky-columns.js +31 -7
  110. package/table/sticky-columns/use-sticky-columns.js.map +1 -1
  111. package/table/thead.d.ts.map +1 -1
  112. package/table/thead.js +1 -1
  113. package/table/thead.js.map +1 -1
  114. package/test-utils/dom/table/index.js +1 -1
  115. package/test-utils/dom/table/index.js.map +1 -1
  116. package/test-utils/selectors/table/index.js +1 -1
  117. package/test-utils/selectors/table/index.js.map +1 -1
  118. package/theming/index.d.ts +3 -1
  119. package/theming/index.d.ts.map +1 -1
  120. package/theming/index.js +55 -0
  121. package/theming/index.js.map +1 -1
  122. package/tree-view/tree-item/index.d.ts.map +1 -1
  123. package/tree-view/tree-item/index.js +2 -1
  124. package/tree-view/tree-item/index.js.map +1 -1
  125. package/tree-view/tree-item/styles.css.js +10 -9
  126. package/tree-view/tree-item/styles.scoped.css +19 -12
  127. package/tree-view/tree-item/styles.selectors.js +10 -9
package/theming/index.js CHANGED
@@ -17,4 +17,59 @@ export function generateThemeStylesheet({ theme, baseThemeId }) {
17
17
  baseThemeId,
18
18
  });
19
19
  }
20
+ const themeStorageKey = Symbol.for('awsui-global-theme');
21
+ const themeChangeEvent = 'awsui-global-theme-change';
22
+ function getTopWindow() {
23
+ try {
24
+ if (window.top && window.top.document) {
25
+ return window.top;
26
+ }
27
+ }
28
+ catch {
29
+ // Cross-origin access error — fall back to current window.
30
+ }
31
+ return window;
32
+ }
33
+ export function setGlobalTheme(theme) {
34
+ if (typeof window === 'undefined') {
35
+ return;
36
+ }
37
+ const topWindow = getTopWindow();
38
+ topWindow[themeStorageKey] = theme;
39
+ topWindow.dispatchEvent(new Event(themeChangeEvent));
40
+ }
41
+ function getGlobalTheme() {
42
+ const topWindow = getTopWindow();
43
+ return topWindow[themeStorageKey];
44
+ }
45
+ export function applyGlobalTheme() {
46
+ if (typeof window === 'undefined') {
47
+ return { reset: () => { } };
48
+ }
49
+ const topWindow = getTopWindow();
50
+ let currentReset;
51
+ function apply() {
52
+ currentReset === null || currentReset === void 0 ? void 0 : currentReset();
53
+ currentReset = undefined;
54
+ const theme = getGlobalTheme();
55
+ if (theme) {
56
+ const result = applyTheme({ theme });
57
+ currentReset = result.reset;
58
+ }
59
+ }
60
+ // Apply the current global theme immediately.
61
+ apply();
62
+ // Listen for future global theme changes.
63
+ const listener = () => {
64
+ apply();
65
+ };
66
+ topWindow.addEventListener(themeChangeEvent, listener);
67
+ return {
68
+ reset: () => {
69
+ currentReset === null || currentReset === void 0 ? void 0 : currentReset();
70
+ currentReset = undefined;
71
+ topWindow.removeEventListener(themeChangeEvent, listener);
72
+ },
73
+ };
74
+ }
20
75
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,uBAAuB,IAAI,2BAA2B,GACvD,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAiB,MAAM,+BAA+B,CAAC;AAYtE,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAoB;IACjE,OAAO,cAAc,CAAC;QACpB,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAOD,MAAM,UAAU,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAiC;IAC3F,OAAO,2BAA2B,CAAC;QACjC,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport {\n applyTheme as coreApplyTheme,\n generateThemeStylesheet as coreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-runtime';\n\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport interface ApplyThemeResult {\n reset: () => void;\n}\n\nexport function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult {\n return coreApplyTheme({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n\nexport interface GenerateThemeStylesheetParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeStylesheetParams): string {\n return coreGenerateThemeStylesheet({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,uBAAuB,IAAI,2BAA2B,GACvD,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAiB,MAAM,+BAA+B,CAAC;AAYtE,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAoB;IACjE,OAAO,cAAc,CAAC;QACpB,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAOD,MAAM,UAAU,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAiC;IAC3F,OAAO,2BAA2B,CAAC;QACjC,QAAQ,EAAE,KAAK;QACf,MAAM;QACN,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AACzD,MAAM,gBAAgB,GAAG,2BAA2B,CAAC;AAMrD,SAAS,YAAY;IACnB,IAAI,CAAC;QACH,IAAI,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO,MAAM,CAAC,GAAsB,CAAC;QACvC,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,2DAA2D;IAC7D,CAAC;IACD,OAAO,MAAyB,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAY;IACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO;IACT,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,SAAS,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,SAAS,cAAc;IACrB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,OAAO,SAAS,CAAC,eAAe,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,IAAI,YAAsC,CAAC;IAE3C,SAAS,KAAK;QACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACjB,YAAY,GAAG,SAAS,CAAC;QACzB,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;QAE/B,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,MAAM,GAAG,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACrC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,8CAA8C;IAC9C,KAAK,EAAE,CAAC;IAER,0CAA0C;IAC1C,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,KAAK,EAAE,CAAC;IACV,CAAC,CAAC;IACF,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAEvD,OAAO;QACL,KAAK,EAAE,GAAG,EAAE;YACV,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;YACjB,YAAY,GAAG,SAAS,CAAC;YACzB,SAAS,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport {\n applyTheme as coreApplyTheme,\n generateThemeStylesheet as coreGenerateThemeStylesheet,\n} from '@cloudscape-design/theming-runtime';\n\nimport { preset, TypedOverride } from '../internal/generated/theming';\n\nexport type Theme = TypedOverride;\nexport interface ApplyThemeParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport interface ApplyThemeResult {\n reset: () => void;\n}\n\nexport function applyTheme({ theme, baseThemeId }: ApplyThemeParams): ApplyThemeResult {\n return coreApplyTheme({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n\nexport interface GenerateThemeStylesheetParams {\n theme: Theme;\n baseThemeId?: string;\n}\n\nexport function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeStylesheetParams): string {\n return coreGenerateThemeStylesheet({\n override: theme,\n preset,\n baseThemeId,\n });\n}\n\nconst themeStorageKey = Symbol.for('awsui-global-theme');\nconst themeChangeEvent = 'awsui-global-theme-change';\n\ninterface WindowWithTheme extends Window {\n [themeStorageKey]?: Theme;\n}\n\nfunction getTopWindow(): WindowWithTheme {\n try {\n if (window.top && window.top.document) {\n return window.top as WindowWithTheme;\n }\n } catch {\n // Cross-origin access error — fall back to current window.\n }\n return window as WindowWithTheme;\n}\n\nexport function setGlobalTheme(theme: Theme): void {\n if (typeof window === 'undefined') {\n return;\n }\n const topWindow = getTopWindow();\n topWindow[themeStorageKey] = theme;\n topWindow.dispatchEvent(new Event(themeChangeEvent));\n}\n\nfunction getGlobalTheme(): Theme | undefined {\n const topWindow = getTopWindow();\n return topWindow[themeStorageKey];\n}\n\nexport function applyGlobalTheme(): ApplyThemeResult {\n if (typeof window === 'undefined') {\n return { reset: () => {} };\n }\n\n const topWindow = getTopWindow();\n let currentReset: (() => void) | undefined;\n\n function apply() {\n currentReset?.();\n currentReset = undefined;\n const theme = getGlobalTheme();\n\n if (theme) {\n const result = applyTheme({ theme });\n currentReset = result.reset;\n }\n }\n\n // Apply the current global theme immediately.\n apply();\n\n // Listen for future global theme changes.\n const listener = () => {\n apply();\n };\n topWindow.addEventListener(themeChangeEvent, listener);\n\n return {\n reset: () => {\n currentReset?.();\n currentReset = undefined;\n topWindow.removeEventListener(themeChangeEvent, listener);\n },\n };\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tree-view/tree-item/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,UAAU,qBAAqB,CAAC,CAAC,CAC/B,SAAQ,IAAI,CACV,aAAa,EACX,eAAe,GACf,YAAY,GACZ,WAAW,GACX,iBAAiB,GACjB,sBAAsB,GACtB,aAAa,GACb,gBAAgB,CACnB;IACD,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,sBAAsB,EAAE;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,QAAA,MAAM,gBAAgB,GAAI,CAAC,EAAG,yKAa3B,qBAAqB,CAAC,CAAC,CAAC,gBA0G1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tree-view/tree-item/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,UAAU,qBAAqB,CAAC,CAAC,CAC/B,SAAQ,IAAI,CACV,aAAa,EACX,eAAe,GACf,YAAY,GACZ,WAAW,GACX,iBAAiB,GACjB,sBAAsB,GACtB,aAAa,GACb,gBAAgB,CACnB;IACD,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,sBAAsB,EAAE;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,QAAA,MAAM,gBAAgB,GAAI,CAAC,EAAG,yKAa3B,qBAAqB,CAAC,CAAC,CAAC,gBA0G1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -2,6 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
+ import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
5
6
  import { useInternalI18n } from '../../i18n/context';
6
7
  import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
7
8
  import InternalStructuredItem from '../../internal/components/structured-item';
@@ -30,7 +31,7 @@ const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [],
30
31
  ? content
31
32
  : '';
32
33
  return (React.createElement("li", { role: "treeitem", id: id, className: clsx(styles.treeitem, testUtilStyles.treeitem, level > 1 && styles.offset, isExpandable && [testUtilStyles.expandable], isExpanded && [testUtilStyles.expanded]), "aria-expanded": isExpandable ? isExpanded : undefined, "aria-level": level, "data-testid": `awsui-treeitem-${id}`, "data-awsui-tree-item-index": allVisibleItemsIndices[id] },
33
- React.createElement("div", { className: styles['treeitem-content-wrapper'] },
34
+ React.createElement("div", { className: clsx(styles['treeitem-content-wrapper'], isThemeActive(Theme.OneTheme) && styles['one-theme']) },
34
35
  React.createElement("div", { className: styles['expand-toggle-wrapper'] },
35
36
  React.createElement("div", { className: styles.toggle }, isExpandable ? (React.createElement(ExpandToggleButton, { isExpanded: isExpanded, customIcon: customIcon, expandButtonLabel: joinStrings(i18n('i18nStrings.expandButtonLabel', (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.expandButtonLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, item)), itemLabelToAnnounce), collapseButtonLabel: joinStrings(i18n('i18nStrings.collapseButtonLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.collapseButtonLabel) === null || _b === void 0 ? void 0 : _b.call(i18nStrings, item)), itemLabelToAnnounce), onExpandableItemToggle: () => onItemToggle({ id, item, expanded: !isExpanded }), className: styles['tree-item-focus-target'], disableFocusHighlight: true })) : (React.createElement(FocusTarget, { ariaLabel: itemLabelToAnnounce })))),
36
37
  showVerticalConnectorLines && React.createElement(VerticalConnector, { variant: "grid" }),
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tree-view/tree-item/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACpF,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,MAAM,gBAAgB,GAAG,CAAK,EAC5B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,eAAe,EACf,YAAY,EACZ,sBAAsB,GACG,EAAE,EAAE;;IAC7B,MAAM,IAAI,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE1C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChG,MAAM,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IACpD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,YAAY,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;IAE5B,MAAM,0BAA0B,GAAG,cAAc,KAAK,UAAU,IAAI,UAAU,CAAC;IAE/E,IAAI,UAAU,GAAgC,SAAS,CAAC;IACxD,IAAI,YAAY,IAAI,oBAAoB,EAAE,CAAC;QACzC,UAAU,GAAG,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,mBAAmB,GAAG,iBAAiB;QAC3C,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,OAAO,OAAO,KAAK,QAAQ;YAC3B,CAAC,CAAE,OAAkB;YACrB,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,4BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,cAAc,CAAC,QAAQ,EACvB,KAAK,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,EAC1B,YAAY,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAC3C,UAAU,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CACxC,mBACc,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,gBACxC,KAAK,iBACJ,kBAAkB,EAAE,EAAE,gCACP,sBAAsB,CAAC,EAAE,CAAC;QAEtD,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;gBAC7C,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAC1B,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,kBAAkB,IACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,WAAW,CAC5B,IAAI,CAAC,+BAA+B,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,4DAAG,IAAI,CAAC,CAAC,EAC7E,mBAAmB,CACpB,EACD,mBAAmB,EAAE,WAAW,CAC9B,IAAI,CAAC,iCAAiC,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,4DAAG,IAAI,CAAC,CAAC,EACjF,mBAAmB,CACpB,EACD,sBAAsB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,UAAU,EAAE,CAAC,EAC/E,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,qBAAqB,EAAE,IAAI,GAC3B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,IAAC,SAAS,EAAE,mBAAmB,GAAI,CAChD,CACG,CACF;YAEL,0BAA0B,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAC,MAAM,GAAG;YAEnE,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC;gBAC/C,oBAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,GAC9C,CACE,CACF;QAEL,UAAU,IAAI,QAAQ,CAAC,MAAM,IAAI,CAChC,4BAAI,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACjD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACvC,OAAO,CACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,sBAAsB,EAAE,sBAAsB,EAC9C,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;YACJ,CAAC,CAAC;YAED,0BAA0B,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAC,UAAU,GAAG,CACpE,CACN,CACE,CACN,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 { useInternalI18n } from '../../i18n/context';\nimport { ExpandToggleButton } from '../../internal/components/expand-toggle-button';\nimport InternalStructuredItem from '../../internal/components/structured-item';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { TreeViewProps } from '../interfaces';\nimport VerticalConnector from '../vertical-connector';\nimport FocusTarget from './focus-target';\n\nimport testUtilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface InternalTreeItemProps<T>\n extends Pick<\n TreeViewProps,\n | 'expandedItems'\n | 'renderItem'\n | 'getItemId'\n | 'getItemChildren'\n | 'renderItemToggleIcon'\n | 'i18nStrings'\n | 'connectorLines'\n > {\n item: T;\n index: number;\n level: number;\n onItemToggle: (detail: TreeViewProps.ItemToggleDetail<T>) => void;\n allVisibleItemsIndices: {\n [key: string]: number;\n };\n}\n\nconst InternalTreeItem = <T,>({\n item,\n index,\n level,\n i18nStrings,\n expandedItems = [],\n connectorLines,\n renderItemToggleIcon,\n renderItem,\n getItemId,\n getItemChildren,\n onItemToggle,\n allVisibleItemsIndices,\n}: InternalTreeItemProps<T>) => {\n const i18n = useInternalI18n('tree-view');\n\n const { icon, content, secondaryContent, actions, announcementLabel } = renderItem(item, index);\n const id = getItemId(item, index);\n const children = getItemChildren(item, index) || [];\n const isExpandable = children.length > 0;\n const isExpanded = isExpandable && expandedItems.includes(id);\n const nextLevel = level + 1;\n\n const showVerticalConnectorLines = connectorLines === 'vertical' && isExpanded;\n\n let customIcon: React.ReactNode | undefined = undefined;\n if (isExpandable && renderItemToggleIcon) {\n customIcon = renderItemToggleIcon({ expanded: isExpanded });\n }\n\n const itemLabelToAnnounce = announcementLabel\n ? announcementLabel\n : typeof content === 'string'\n ? (content as string)\n : '';\n\n return (\n <li\n role=\"treeitem\"\n id={id}\n className={clsx(\n styles.treeitem,\n testUtilStyles.treeitem,\n level > 1 && styles.offset,\n isExpandable && [testUtilStyles.expandable],\n isExpanded && [testUtilStyles.expanded]\n )}\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-level={level}\n data-testid={`awsui-treeitem-${id}`}\n data-awsui-tree-item-index={allVisibleItemsIndices[id]}\n >\n <div className={styles['treeitem-content-wrapper']}>\n <div className={styles['expand-toggle-wrapper']}>\n <div className={styles.toggle}>\n {isExpandable ? (\n <ExpandToggleButton\n isExpanded={isExpanded}\n customIcon={customIcon}\n expandButtonLabel={joinStrings(\n i18n('i18nStrings.expandButtonLabel', i18nStrings?.expandButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n collapseButtonLabel={joinStrings(\n i18n('i18nStrings.collapseButtonLabel', i18nStrings?.collapseButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n onExpandableItemToggle={() => onItemToggle({ id, item, expanded: !isExpanded })}\n className={styles['tree-item-focus-target']}\n disableFocusHighlight={true}\n />\n ) : (\n <FocusTarget ariaLabel={itemLabelToAnnounce} />\n )}\n </div>\n </div>\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"grid\" />}\n\n <div className={styles['structured-item-wrapper']}>\n <InternalStructuredItem\n icon={icon}\n content={content}\n secondaryContent={secondaryContent}\n actions={actions}\n wrapActions={false}\n className={styles['tree-item-structured-item']}\n />\n </div>\n </div>\n\n {isExpanded && children.length && (\n <ul role=\"group\" className={styles['treeitem-group']}>\n {children.map((child, index) => {\n const itemId = getItemId(child, index);\n return (\n <InternalTreeItem<T>\n item={child}\n index={index}\n key={itemId}\n level={nextLevel}\n expandedItems={expandedItems}\n i18nStrings={i18nStrings}\n onItemToggle={onItemToggle}\n renderItem={renderItem}\n getItemId={getItemId}\n getItemChildren={getItemChildren}\n renderItemToggleIcon={renderItemToggleIcon}\n allVisibleItemsIndices={allVisibleItemsIndices}\n connectorLines={connectorLines}\n />\n );\n })}\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"absolute\" />}\n </ul>\n )}\n </li>\n );\n};\n\nexport default InternalTreeItem;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tree-view/tree-item/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,+CAA+C,CAAC;AAErF,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACpF,OAAO,sBAAsB,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,MAAM,gBAAgB,GAAG,CAAK,EAC5B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,eAAe,EACf,YAAY,EACZ,sBAAsB,GACG,EAAE,EAAE;;IAC7B,MAAM,IAAI,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE1C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChG,MAAM,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IACpD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,YAAY,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;IAE5B,MAAM,0BAA0B,GAAG,cAAc,KAAK,UAAU,IAAI,UAAU,CAAC;IAE/E,IAAI,UAAU,GAAgC,SAAS,CAAC;IACxD,IAAI,YAAY,IAAI,oBAAoB,EAAE,CAAC;QACzC,UAAU,GAAG,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,mBAAmB,GAAG,iBAAiB;QAC3C,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,OAAO,OAAO,KAAK,QAAQ;YAC3B,CAAC,CAAE,OAAkB;YACrB,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,4BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,cAAc,CAAC,QAAQ,EACvB,KAAK,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,EAC1B,YAAY,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAC3C,UAAU,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CACxC,mBACc,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,gBACxC,KAAK,iBACJ,kBAAkB,EAAE,EAAE,gCACP,sBAAsB,CAAC,EAAE,CAAC;QAEtD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,0BAA0B,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC;YAC5G,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;gBAC7C,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAC1B,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,kBAAkB,IACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,WAAW,CAC5B,IAAI,CAAC,+BAA+B,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,4DAAG,IAAI,CAAC,CAAC,EAC7E,mBAAmB,CACpB,EACD,mBAAmB,EAAE,WAAW,CAC9B,IAAI,CAAC,iCAAiC,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,4DAAG,IAAI,CAAC,CAAC,EACjF,mBAAmB,CACpB,EACD,sBAAsB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,UAAU,EAAE,CAAC,EAC/E,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,qBAAqB,EAAE,IAAI,GAC3B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,IAAC,SAAS,EAAE,mBAAmB,GAAI,CAChD,CACG,CACF;YAEL,0BAA0B,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAC,MAAM,GAAG;YAEnE,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC;gBAC/C,oBAAC,sBAAsB,IACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,GAC9C,CACE,CACF;QAEL,UAAU,IAAI,QAAQ,CAAC,MAAM,IAAI,CAChC,4BAAI,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACjD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACvC,OAAO,CACL,oBAAC,gBAAgB,IACf,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,sBAAsB,EAAE,sBAAsB,EAC9C,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;YACJ,CAAC,CAAC;YAED,0BAA0B,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAC,UAAU,GAAG,CACpE,CACN,CACE,CACN,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 { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport { ExpandToggleButton } from '../../internal/components/expand-toggle-button';\nimport InternalStructuredItem from '../../internal/components/structured-item';\nimport { joinStrings } from '../../internal/utils/strings';\nimport { TreeViewProps } from '../interfaces';\nimport VerticalConnector from '../vertical-connector';\nimport FocusTarget from './focus-target';\n\nimport testUtilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface InternalTreeItemProps<T>\n extends Pick<\n TreeViewProps,\n | 'expandedItems'\n | 'renderItem'\n | 'getItemId'\n | 'getItemChildren'\n | 'renderItemToggleIcon'\n | 'i18nStrings'\n | 'connectorLines'\n > {\n item: T;\n index: number;\n level: number;\n onItemToggle: (detail: TreeViewProps.ItemToggleDetail<T>) => void;\n allVisibleItemsIndices: {\n [key: string]: number;\n };\n}\n\nconst InternalTreeItem = <T,>({\n item,\n index,\n level,\n i18nStrings,\n expandedItems = [],\n connectorLines,\n renderItemToggleIcon,\n renderItem,\n getItemId,\n getItemChildren,\n onItemToggle,\n allVisibleItemsIndices,\n}: InternalTreeItemProps<T>) => {\n const i18n = useInternalI18n('tree-view');\n\n const { icon, content, secondaryContent, actions, announcementLabel } = renderItem(item, index);\n const id = getItemId(item, index);\n const children = getItemChildren(item, index) || [];\n const isExpandable = children.length > 0;\n const isExpanded = isExpandable && expandedItems.includes(id);\n const nextLevel = level + 1;\n\n const showVerticalConnectorLines = connectorLines === 'vertical' && isExpanded;\n\n let customIcon: React.ReactNode | undefined = undefined;\n if (isExpandable && renderItemToggleIcon) {\n customIcon = renderItemToggleIcon({ expanded: isExpanded });\n }\n\n const itemLabelToAnnounce = announcementLabel\n ? announcementLabel\n : typeof content === 'string'\n ? (content as string)\n : '';\n\n return (\n <li\n role=\"treeitem\"\n id={id}\n className={clsx(\n styles.treeitem,\n testUtilStyles.treeitem,\n level > 1 && styles.offset,\n isExpandable && [testUtilStyles.expandable],\n isExpanded && [testUtilStyles.expanded]\n )}\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-level={level}\n data-testid={`awsui-treeitem-${id}`}\n data-awsui-tree-item-index={allVisibleItemsIndices[id]}\n >\n <div className={clsx(styles['treeitem-content-wrapper'], isThemeActive(Theme.OneTheme) && styles['one-theme'])}>\n <div className={styles['expand-toggle-wrapper']}>\n <div className={styles.toggle}>\n {isExpandable ? (\n <ExpandToggleButton\n isExpanded={isExpanded}\n customIcon={customIcon}\n expandButtonLabel={joinStrings(\n i18n('i18nStrings.expandButtonLabel', i18nStrings?.expandButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n collapseButtonLabel={joinStrings(\n i18n('i18nStrings.collapseButtonLabel', i18nStrings?.collapseButtonLabel?.(item)),\n itemLabelToAnnounce\n )}\n onExpandableItemToggle={() => onItemToggle({ id, item, expanded: !isExpanded })}\n className={styles['tree-item-focus-target']}\n disableFocusHighlight={true}\n />\n ) : (\n <FocusTarget ariaLabel={itemLabelToAnnounce} />\n )}\n </div>\n </div>\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"grid\" />}\n\n <div className={styles['structured-item-wrapper']}>\n <InternalStructuredItem\n icon={icon}\n content={content}\n secondaryContent={secondaryContent}\n actions={actions}\n wrapActions={false}\n className={styles['tree-item-structured-item']}\n />\n </div>\n </div>\n\n {isExpanded && children.length && (\n <ul role=\"group\" className={styles['treeitem-group']}>\n {children.map((child, index) => {\n const itemId = getItemId(child, index);\n return (\n <InternalTreeItem<T>\n item={child}\n index={index}\n key={itemId}\n level={nextLevel}\n expandedItems={expandedItems}\n i18nStrings={i18nStrings}\n onItemToggle={onItemToggle}\n renderItem={renderItem}\n getItemId={getItemId}\n getItemChildren={getItemChildren}\n renderItemToggleIcon={renderItemToggleIcon}\n allVisibleItemsIndices={allVisibleItemsIndices}\n connectorLines={connectorLines}\n />\n );\n })}\n\n {showVerticalConnectorLines && <VerticalConnector variant=\"absolute\" />}\n </ul>\n )}\n </li>\n );\n};\n\nexport default InternalTreeItem;\n"]}
@@ -1,14 +1,15 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "treeitem-group": "awsui_treeitem-group_1agpu_c0a59_185",
5
- "treeitem": "awsui_treeitem_1agpu_c0a59_185",
6
- "offset": "awsui_offset_1agpu_c0a59_202",
7
- "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_c0a59_205",
8
- "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_c0a59_210",
9
- "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_c0a59_231",
10
- "toggle": "awsui_toggle_1agpu_c0a59_236",
11
- "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_c0a59_242",
12
- "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_c0a59_249"
4
+ "treeitem-group": "awsui_treeitem-group_1agpu_iha1j_185",
5
+ "treeitem": "awsui_treeitem_1agpu_iha1j_185",
6
+ "offset": "awsui_offset_1agpu_iha1j_202",
7
+ "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_iha1j_205",
8
+ "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_iha1j_210",
9
+ "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_iha1j_231",
10
+ "toggle": "awsui_toggle_1agpu_iha1j_236",
11
+ "one-theme": "awsui_one-theme_1agpu_iha1j_242",
12
+ "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_iha1j_249",
13
+ "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_iha1j_256"
13
14
  };
14
15
 
@@ -182,7 +182,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
182
182
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
183
183
  SPDX-License-Identifier: Apache-2.0
184
184
  */
185
- .awsui_treeitem-group_1agpu_c0a59_185:not(#\9) {
185
+ .awsui_treeitem-group_1agpu_iha1j_185:not(#\9) {
186
186
  list-style: none;
187
187
  margin-block: 0;
188
188
  margin-inline: 0;
@@ -191,7 +191,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
191
191
  position: relative;
192
192
  }
193
193
 
194
- .awsui_treeitem_1agpu_c0a59_185:not(#\9) {
194
+ .awsui_treeitem_1agpu_iha1j_185:not(#\9) {
195
195
  list-style: none;
196
196
  margin-block: 0;
197
197
  margin-inline: 0;
@@ -199,22 +199,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
199
199
  padding-inline: 0;
200
200
  position: relative;
201
201
  }
202
- .awsui_treeitem_1agpu_c0a59_185.awsui_offset_1agpu_c0a59_202:not(#\9) {
202
+ .awsui_treeitem_1agpu_iha1j_185.awsui_offset_1agpu_iha1j_202:not(#\9) {
203
203
  margin-inline-start: var(--space-tree-view-indentation-xh9kis, 24px);
204
204
  }
205
- .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9) {
205
+ .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205:not(#\9) {
206
206
  display: grid;
207
207
  grid-template-columns: 28px 1fr;
208
208
  align-items: baseline;
209
209
  }
210
- body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_c0a59_210:focus) {
210
+ body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_iha1j_210:focus) {
211
211
  position: relative;
212
212
  }
213
- body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_c0a59_210:focus) {
213
+ body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_iha1j_210:focus) {
214
214
  outline: 2px dotted transparent;
215
215
  outline-offset: calc(0px - 1px);
216
216
  }
217
- body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_c0a59_210:focus)::before {
217
+ body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_iha1j_210:focus)::before {
218
218
  content: " ";
219
219
  display: block;
220
220
  position: absolute;
@@ -228,28 +228,35 @@ body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_c0a59_185 > .awsui_tre
228
228
  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
229
229
  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
230
230
  }
231
- .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205 > .awsui_expand-toggle-wrapper_1agpu_c0a59_231:not(#\9) {
231
+ .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205 > .awsui_expand-toggle-wrapper_1agpu_iha1j_231:not(#\9) {
232
232
  display: grid;
233
233
  grid-column: 1;
234
234
  grid-row: 1;
235
235
  }
236
- .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205 > .awsui_expand-toggle-wrapper_1agpu_c0a59_231 > .awsui_toggle_1agpu_c0a59_236:not(#\9) {
236
+ .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205 > .awsui_expand-toggle-wrapper_1agpu_iha1j_231 > .awsui_toggle_1agpu_iha1j_236:not(#\9) {
237
237
  justify-self: center;
238
238
  position: relative;
239
239
  inset-block-start: 2px;
240
240
  inset-inline-start: -2px;
241
241
  }
242
- .awsui_treeitem_1agpu_c0a59_185 > .awsui_treeitem-content-wrapper_1agpu_c0a59_205 > .awsui_structured-item-wrapper_1agpu_c0a59_242:not(#\9) {
242
+ .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205.awsui_one-theme_1agpu_iha1j_242:not(#\9) {
243
+ align-items: center;
244
+ }
245
+ .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205.awsui_one-theme_1agpu_iha1j_242 > .awsui_expand-toggle-wrapper_1agpu_iha1j_231 > .awsui_toggle_1agpu_iha1j_236:not(#\9) {
246
+ inset-inline-start: 0px;
247
+ inset-block-start: 3px;
248
+ }
249
+ .awsui_treeitem_1agpu_iha1j_185 > .awsui_treeitem-content-wrapper_1agpu_iha1j_205 > .awsui_structured-item-wrapper_1agpu_iha1j_249:not(#\9) {
243
250
  grid-column: 2;
244
251
  grid-row: 1/span 2;
245
252
  padding-block: var(--space-scaled-xxxs-oo06c7, 2px);
246
253
  position: relative;
247
254
  }
248
255
 
249
- .awsui_tree-item-structured-item_1agpu_c0a59_249:not(#\9) {
256
+ .awsui_tree-item-structured-item_1agpu_iha1j_256:not(#\9) {
250
257
  /* used in keyboard navigation */
251
258
  }
252
259
 
253
- .awsui_tree-item-focus-target_1agpu_c0a59_210:not(#\9) {
260
+ .awsui_tree-item-focus-target_1agpu_iha1j_210:not(#\9) {
254
261
  outline: none;
255
262
  }
@@ -2,14 +2,15 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "treeitem-group": "awsui_treeitem-group_1agpu_c0a59_185",
6
- "treeitem": "awsui_treeitem_1agpu_c0a59_185",
7
- "offset": "awsui_offset_1agpu_c0a59_202",
8
- "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_c0a59_205",
9
- "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_c0a59_210",
10
- "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_c0a59_231",
11
- "toggle": "awsui_toggle_1agpu_c0a59_236",
12
- "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_c0a59_242",
13
- "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_c0a59_249"
5
+ "treeitem-group": "awsui_treeitem-group_1agpu_iha1j_185",
6
+ "treeitem": "awsui_treeitem_1agpu_iha1j_185",
7
+ "offset": "awsui_offset_1agpu_iha1j_202",
8
+ "treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_iha1j_205",
9
+ "tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_iha1j_210",
10
+ "expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_iha1j_231",
11
+ "toggle": "awsui_toggle_1agpu_iha1j_236",
12
+ "one-theme": "awsui_one-theme_1agpu_iha1j_242",
13
+ "structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_iha1j_249",
14
+ "tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_iha1j_256"
14
15
  };
15
16