@cloudscape-design/components-themeable 3.0.1143 → 3.0.1144
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.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/tree-view/tree-item/styles.scss +2 -3
- package/lib/internal/scss/tree-view/vertical-connector/styles.scss +29 -0
- package/lib/internal/template/internal/base-component/styles.scoped.css +13 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +2 -0
- package/lib/internal/template/internal/generated/styles/tokens.js +2 -0
- package/lib/internal/template/internal/generated/theming/index.cjs +45 -0
- package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +9 -0
- package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
- package/lib/internal/template/internal/generated/theming/index.js +45 -0
- package/lib/internal/template/internal/hooks/use-mobile/index.d.ts.map +1 -1
- package/lib/internal/template/internal/hooks/use-mobile/index.js +3 -1
- package/lib/internal/template/internal/hooks/use-mobile/index.js.map +1 -1
- package/lib/internal/template/tree-view/index.d.ts +1 -1
- package/lib/internal/template/tree-view/index.d.ts.map +1 -1
- package/lib/internal/template/tree-view/index.js +5 -3
- package/lib/internal/template/tree-view/index.js.map +1 -1
- package/lib/internal/template/tree-view/interfaces.d.ts +5 -0
- package/lib/internal/template/tree-view/interfaces.d.ts.map +1 -1
- package/lib/internal/template/tree-view/interfaces.js.map +1 -1
- package/lib/internal/template/tree-view/internal.d.ts +1 -1
- package/lib/internal/template/tree-view/internal.d.ts.map +1 -1
- package/lib/internal/template/tree-view/internal.js +2 -2
- package/lib/internal/template/tree-view/internal.js.map +1 -1
- package/lib/internal/template/tree-view/tree-item/index.d.ts +2 -2
- package/lib/internal/template/tree-view/tree-item/index.d.ts.map +1 -1
- package/lib/internal/template/tree-view/tree-item/index.js +10 -5
- package/lib/internal/template/tree-view/tree-item/index.js.map +1 -1
- package/lib/internal/template/tree-view/tree-item/styles.css.js +9 -9
- package/lib/internal/template/tree-view/tree-item/styles.scoped.css +14 -15
- package/lib/internal/template/tree-view/tree-item/styles.selectors.js +9 -9
- package/lib/internal/template/tree-view/vertical-connector/index.d.ts +6 -0
- package/lib/internal/template/tree-view/vertical-connector/index.d.ts.map +1 -0
- package/lib/internal/template/tree-view/vertical-connector/index.js +11 -0
- package/lib/internal/template/tree-view/vertical-connector/index.js.map +1 -0
- package/lib/internal/template/tree-view/vertical-connector/styles.css.js +8 -0
- package/lib/internal/template/tree-view/vertical-connector/styles.scoped.css +25 -0
- package/lib/internal/template/tree-view/vertical-connector/styles.selectors.js +9 -0
- package/package.json +1 -1
|
@@ -2077,6 +2077,10 @@ export var preset = {
|
|
|
2077
2077
|
"light": "{colorNeutral250}",
|
|
2078
2078
|
"dark": "{colorNeutral950}"
|
|
2079
2079
|
},
|
|
2080
|
+
"colorTreeViewConnectorLine": {
|
|
2081
|
+
"light": "{colorNeutral500}",
|
|
2082
|
+
"dark": "{colorNeutral300}"
|
|
2083
|
+
},
|
|
2080
2084
|
"fontBoxValueLargeWeight": "700",
|
|
2081
2085
|
"fontButtonLetterSpacing": "0.005em",
|
|
2082
2086
|
"fontChartDetailSize": "{fontSizeBodyS}",
|
|
@@ -2605,6 +2609,10 @@ export var preset = {
|
|
|
2605
2609
|
"comfortable": "{spaceContainerHorizontal}",
|
|
2606
2610
|
"compact": "{spaceContainerHorizontal}"
|
|
2607
2611
|
},
|
|
2612
|
+
"spaceTreeViewIndentation": {
|
|
2613
|
+
"comfortable": "{spaceL}",
|
|
2614
|
+
"compact": "{spaceL}"
|
|
2615
|
+
},
|
|
2608
2616
|
"spaceTileGutter": {
|
|
2609
2617
|
"comfortable": "{spaceXl}",
|
|
2610
2618
|
"compact": "{spaceM}"
|
|
@@ -3071,6 +3079,10 @@ export var preset = {
|
|
|
3071
3079
|
"comfortable": "{spaceContainerHorizontal}",
|
|
3072
3080
|
"compact": "{spaceContainerHorizontal}"
|
|
3073
3081
|
},
|
|
3082
|
+
"spaceTreeViewIndentation": {
|
|
3083
|
+
"comfortable": "{spaceL}",
|
|
3084
|
+
"compact": "{spaceL}"
|
|
3085
|
+
},
|
|
3074
3086
|
"spaceTileGutter": {
|
|
3075
3087
|
"comfortable": "{spaceXl}",
|
|
3076
3088
|
"compact": "{spaceM}"
|
|
@@ -4344,6 +4356,10 @@ export var preset = {
|
|
|
4344
4356
|
"colorGapGlobalDrawer": {
|
|
4345
4357
|
"light": "{colorNeutral950}",
|
|
4346
4358
|
"dark": "{colorNeutral950}"
|
|
4359
|
+
},
|
|
4360
|
+
"colorTreeViewConnectorLine": {
|
|
4361
|
+
"light": "{colorNeutral300}",
|
|
4362
|
+
"dark": "{colorNeutral300}"
|
|
4347
4363
|
}
|
|
4348
4364
|
}
|
|
4349
4365
|
},
|
|
@@ -5518,6 +5534,10 @@ export var preset = {
|
|
|
5518
5534
|
"colorGapGlobalDrawer": {
|
|
5519
5535
|
"light": "{colorNeutral950}",
|
|
5520
5536
|
"dark": "{colorNeutral950}"
|
|
5537
|
+
},
|
|
5538
|
+
"colorTreeViewConnectorLine": {
|
|
5539
|
+
"light": "{colorNeutral300}",
|
|
5540
|
+
"dark": "{colorNeutral300}"
|
|
5521
5541
|
}
|
|
5522
5542
|
}
|
|
5523
5543
|
},
|
|
@@ -6628,6 +6648,10 @@ export var preset = {
|
|
|
6628
6648
|
"colorGapGlobalDrawer": {
|
|
6629
6649
|
"light": "{colorNeutral250}",
|
|
6630
6650
|
"dark": "{colorNeutral950}"
|
|
6651
|
+
},
|
|
6652
|
+
"colorTreeViewConnectorLine": {
|
|
6653
|
+
"light": "{colorNeutral500}",
|
|
6654
|
+
"dark": "{colorNeutral300}"
|
|
6631
6655
|
}
|
|
6632
6656
|
}
|
|
6633
6657
|
},
|
|
@@ -7738,6 +7762,10 @@ export var preset = {
|
|
|
7738
7762
|
"colorGapGlobalDrawer": {
|
|
7739
7763
|
"light": "{colorNeutral250}",
|
|
7740
7764
|
"dark": "{colorNeutral950}"
|
|
7765
|
+
},
|
|
7766
|
+
"colorTreeViewConnectorLine": {
|
|
7767
|
+
"light": "{colorNeutral500}",
|
|
7768
|
+
"dark": "{colorNeutral300}"
|
|
7741
7769
|
}
|
|
7742
7770
|
}
|
|
7743
7771
|
},
|
|
@@ -8849,6 +8877,10 @@ export var preset = {
|
|
|
8849
8877
|
"light": "{colorNeutral250}",
|
|
8850
8878
|
"dark": "{colorNeutral950}"
|
|
8851
8879
|
},
|
|
8880
|
+
"colorTreeViewConnectorLine": {
|
|
8881
|
+
"light": "{colorNeutral500}",
|
|
8882
|
+
"dark": "{colorNeutral300}"
|
|
8883
|
+
},
|
|
8852
8884
|
"fontExpandableHeadingSize": "14px",
|
|
8853
8885
|
"borderDividerSectionWidth": "1px"
|
|
8854
8886
|
}
|
|
@@ -9960,6 +9992,10 @@ export var preset = {
|
|
|
9960
9992
|
"colorGapGlobalDrawer": {
|
|
9961
9993
|
"light": "{colorNeutral950}",
|
|
9962
9994
|
"dark": "{colorNeutral950}"
|
|
9995
|
+
},
|
|
9996
|
+
"colorTreeViewConnectorLine": {
|
|
9997
|
+
"light": "{colorNeutral300}",
|
|
9998
|
+
"dark": "{colorNeutral300}"
|
|
9963
9999
|
}
|
|
9964
10000
|
}
|
|
9965
10001
|
},
|
|
@@ -10472,6 +10508,7 @@ export var preset = {
|
|
|
10472
10508
|
"colorDropzoneBorderDefault": "color",
|
|
10473
10509
|
"colorDropzoneBorderHover": "color",
|
|
10474
10510
|
"colorGapGlobalDrawer": "color",
|
|
10511
|
+
"colorTreeViewConnectorLine": "color",
|
|
10475
10512
|
"motionDurationExtraFast": "motion",
|
|
10476
10513
|
"motionDurationExtraSlow": "motion",
|
|
10477
10514
|
"motionDurationFast": "motion",
|
|
@@ -10581,6 +10618,7 @@ export var preset = {
|
|
|
10581
10618
|
"spaceTableHeaderToolsBottom": "density",
|
|
10582
10619
|
"spaceTableHeaderToolsFullPageBottom": "density",
|
|
10583
10620
|
"spaceTableHorizontal": "density",
|
|
10621
|
+
"spaceTreeViewIndentation": "density",
|
|
10584
10622
|
"spaceTileGutter": "density",
|
|
10585
10623
|
"spaceScaled2xNone": "density",
|
|
10586
10624
|
"spaceScaled2xXxxs": "density",
|
|
@@ -10925,6 +10963,7 @@ export var preset = {
|
|
|
10925
10963
|
"colorDropzoneTextHover",
|
|
10926
10964
|
"colorDropzoneBorderDefault",
|
|
10927
10965
|
"colorDropzoneBorderHover",
|
|
10966
|
+
"colorTreeViewConnectorLine",
|
|
10928
10967
|
"fontFamilyBase",
|
|
10929
10968
|
"fontFamilyMonospace",
|
|
10930
10969
|
"fontSizeBodyM",
|
|
@@ -11290,6 +11329,7 @@ export var preset = {
|
|
|
11290
11329
|
"colorDropzoneTextHover",
|
|
11291
11330
|
"colorDropzoneBorderDefault",
|
|
11292
11331
|
"colorDropzoneBorderHover",
|
|
11332
|
+
"colorTreeViewConnectorLine",
|
|
11293
11333
|
"fontFamilyBase",
|
|
11294
11334
|
"fontFamilyMonospace",
|
|
11295
11335
|
"fontSizeBodyM",
|
|
@@ -11353,6 +11393,7 @@ export var preset = {
|
|
|
11353
11393
|
"motionKeyframesScalePopup",
|
|
11354
11394
|
"spaceContainerHorizontal",
|
|
11355
11395
|
"spaceFieldHorizontal",
|
|
11396
|
+
"spaceTreeViewIndentation",
|
|
11356
11397
|
"spaceScaledXxxs",
|
|
11357
11398
|
"spaceScaledXxs",
|
|
11358
11399
|
"spaceScaledXs",
|
|
@@ -11921,6 +11962,7 @@ export var preset = {
|
|
|
11921
11962
|
"colorDropzoneBorderDefault": "color-dropzone-border-default",
|
|
11922
11963
|
"colorDropzoneBorderHover": "color-dropzone-border-hover",
|
|
11923
11964
|
"colorGapGlobalDrawer": "color-gap-global-drawer",
|
|
11965
|
+
"colorTreeViewConnectorLine": "color-tree-view-connector-line",
|
|
11924
11966
|
"fontBoxValueLargeWeight": "font-box-value-large-weight",
|
|
11925
11967
|
"fontButtonLetterSpacing": "font-button-letter-spacing",
|
|
11926
11968
|
"fontChartDetailSize": "font-chart-detail-size",
|
|
@@ -12122,6 +12164,7 @@ export var preset = {
|
|
|
12122
12164
|
"spaceTableHeaderToolsBottom": "space-table-header-tools-bottom",
|
|
12123
12165
|
"spaceTableHeaderToolsFullPageBottom": "space-table-header-tools-full-page-bottom",
|
|
12124
12166
|
"spaceTableHorizontal": "space-table-horizontal",
|
|
12167
|
+
"spaceTreeViewIndentation": "space-tree-view-indentation",
|
|
12125
12168
|
"spaceTileGutter": "space-tile-gutter",
|
|
12126
12169
|
"spaceScaled2xNone": "space-scaled-2x-none",
|
|
12127
12170
|
"spaceScaled2xXxxs": "space-scaled-2x-xxxs",
|
|
@@ -12727,6 +12770,7 @@ export var preset = {
|
|
|
12727
12770
|
"colorDropzoneBorderDefault": "--color-dropzone-border-default-k648ha",
|
|
12728
12771
|
"colorDropzoneBorderHover": "--color-dropzone-border-hover-otpag5",
|
|
12729
12772
|
"colorGapGlobalDrawer": "--color-gap-global-drawer-nh699a",
|
|
12773
|
+
"colorTreeViewConnectorLine": "--color-tree-view-connector-line-1usxvn",
|
|
12730
12774
|
"fontBoxValueLargeWeight": "--font-box-value-large-weight-wr00sw",
|
|
12731
12775
|
"fontButtonLetterSpacing": "--font-button-letter-spacing-ufowe3",
|
|
12732
12776
|
"fontChartDetailSize": "--font-chart-detail-size-9qr25q",
|
|
@@ -12928,6 +12972,7 @@ export var preset = {
|
|
|
12928
12972
|
"spaceTableHeaderToolsBottom": "--space-table-header-tools-bottom-d9u5kf",
|
|
12929
12973
|
"spaceTableHeaderToolsFullPageBottom": "--space-table-header-tools-full-page-bottom-9m47g6",
|
|
12930
12974
|
"spaceTableHorizontal": "--space-table-horizontal-suurzj",
|
|
12975
|
+
"spaceTreeViewIndentation": "--space-tree-view-indentation-gmy1k3",
|
|
12931
12976
|
"spaceTileGutter": "--space-tile-gutter-bi2bdv",
|
|
12932
12977
|
"spaceScaled2xNone": "--space-scaled-2x-none-987dp7",
|
|
12933
12978
|
"spaceScaled2xXxxs": "--space-scaled-2x-xxxs-reumxj",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-mobile/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,eAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-mobile/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,eAAwC,CAAC;AA6B3E,eAAO,MAAM,SAAS,eASpB,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { createSingletonState } from '@cloudscape-design/component-toolkit/inter
|
|
|
4
4
|
import { getMatchingBreakpoint, mobileBreakpoint } from '../../breakpoints';
|
|
5
5
|
export const forceMobileModeSymbol = Symbol.for('awsui-force-mobile-mode');
|
|
6
6
|
function getIsMobile() {
|
|
7
|
+
var _a;
|
|
7
8
|
// allow overriding the mobile mode in tests
|
|
8
9
|
// any is needed because of this https://github.com/microsoft/TypeScript/issues/36813
|
|
9
10
|
const forceMobileMode = globalThis[forceMobileModeSymbol];
|
|
@@ -22,7 +23,8 @@ function getIsMobile() {
|
|
|
22
23
|
* wouldn't know which one of them to use).
|
|
23
24
|
* Instead, we use the media query here in JS too.
|
|
24
25
|
*/
|
|
25
|
-
|
|
26
|
+
/* istanbul ignore next: matchMedia is not available in jsdom. */
|
|
27
|
+
return (_a = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`)) === null || _a === void 0 ? void 0 : _a.matches;
|
|
26
28
|
}
|
|
27
29
|
return getMatchingBreakpoint(window.innerWidth, ['xs']) !== 'xs';
|
|
28
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-mobile/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAErF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;AAE3E,SAAS,WAAW
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-mobile/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AAErF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;AAE3E,SAAS,WAAW;;IAClB,4CAA4C;IAC5C,qFAAqF;IACrF,MAAM,eAAe,GAAI,UAAkB,CAAC,qBAAqB,CAAC,CAAC;IACnE,IAAI,OAAO,eAAe,KAAK,WAAW,EAAE,CAAC;QAC3C,OAAO,eAAe,CAAC;IACzB,CAAC;IACD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,qCAAqC;QACrC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;QACtB;;;;;;WAMG;QACH,iEAAiE;QACjE,OAAO,MAAA,MAAM,CAAC,UAAU,CAAC,eAAe,gBAAgB,KAAK,CAAC,0CAAE,OAAO,CAAC;IAC1E,CAAC;IAED,OAAO,qBAAqB,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC;AACnE,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,oBAAoB,CAAU;IACrD,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE;IACjC,OAAO,EAAE,OAAO,CAAC,EAAE;QACjB,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createSingletonState } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getMatchingBreakpoint, mobileBreakpoint } from '../../breakpoints';\n\nexport const forceMobileModeSymbol = Symbol.for('awsui-force-mobile-mode');\n\nfunction getIsMobile() {\n // allow overriding the mobile mode in tests\n // any is needed because of this https://github.com/microsoft/TypeScript/issues/36813\n const forceMobileMode = (globalThis as any)[forceMobileModeSymbol];\n if (typeof forceMobileMode !== 'undefined') {\n return forceMobileMode;\n }\n if (typeof window === 'undefined') {\n // assume desktop in server-rendering\n return false;\n }\n\n if (window.matchMedia) {\n /**\n * Some browsers include the scrollbar width in their media query calculations, but\n * some browsers don't. Thus we can't use `window.innerWidth` or\n * `document.documentElement.clientWidth` to get a very accurate result (since we\n * wouldn't know which one of them to use).\n * Instead, we use the media query here in JS too.\n */\n /* istanbul ignore next: matchMedia is not available in jsdom. */\n return window.matchMedia(`(max-width: ${mobileBreakpoint}px)`)?.matches;\n }\n\n return getMatchingBreakpoint(window.innerWidth, ['xs']) !== 'xs';\n}\n\nexport const useMobile = createSingletonState<boolean>({\n initialState: () => getIsMobile(),\n factory: handler => {\n const listener = () => handler(getIsMobile());\n window.addEventListener('resize', listener);\n return () => {\n window.removeEventListener('resize', listener);\n };\n },\n});\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TreeViewProps } from './interfaces';
|
|
2
2
|
export { TreeViewProps };
|
|
3
|
-
declare const TreeView: <T>(props: TreeViewProps<T>) => JSX.Element;
|
|
3
|
+
declare const TreeView: <T>({ connectorLines, ...props }: TreeViewProps<T>) => JSX.Element;
|
|
4
4
|
export default TreeView;
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tree-view/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tree-view/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAG,8BAAuC,aAAa,CAAC,CAAC,CAAC,gBAgB5E,CAAC;AAGF,eAAe,QAAQ,CAAC"}
|
|
@@ -7,11 +7,13 @@ import useBaseComponent from '../internal/hooks/use-base-component';
|
|
|
7
7
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
8
|
import { getExternalProps } from '../internal/utils/external-props';
|
|
9
9
|
import InternalTreeView from './internal';
|
|
10
|
-
const TreeView = (props) => {
|
|
11
|
-
const baseComponentProps = useBaseComponent('TreeView'
|
|
10
|
+
const TreeView = ({ connectorLines = 'none', ...props }) => {
|
|
11
|
+
const baseComponentProps = useBaseComponent('TreeView', {
|
|
12
|
+
props: { connectorLines },
|
|
13
|
+
});
|
|
12
14
|
const baseProps = getBaseProps(props);
|
|
13
15
|
const externalProps = getExternalProps(props);
|
|
14
|
-
return React.createElement(InternalTreeView, { ...baseProps, ...baseComponentProps, ...externalProps, ...props });
|
|
16
|
+
return (React.createElement(InternalTreeView, { ...baseProps, ...baseComponentProps, ...externalProps, ...props, connectorLines: connectorLines }));
|
|
15
17
|
};
|
|
16
18
|
applyDisplayName(TreeView, 'TreeView');
|
|
17
19
|
export default TreeView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAI1C,MAAM,QAAQ,GAAG,CAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,gBAAgB,MAAM,YAAY,CAAC;AAI1C,MAAM,QAAQ,GAAG,CAAK,EAAE,cAAc,GAAG,MAAM,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAC/E,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,UAAU,EAAE;QACtD,KAAK,EAAE,EAAE,cAAc,EAAE;KAC1B,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,gBAAgB,OACX,SAAS,KACT,kBAAkB,KAClB,aAAa,KACb,KAAK,EACT,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AACvC,eAAe,QAAQ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { TreeViewProps } from './interfaces';\nimport InternalTreeView from './internal';\n\nexport { TreeViewProps };\n\nconst TreeView = <T,>({ connectorLines = 'none', ...props }: TreeViewProps<T>) => {\n const baseComponentProps = useBaseComponent('TreeView', {\n props: { connectorLines },\n });\n const baseProps = getBaseProps(props);\n const externalProps = getExternalProps(props);\n\n return (\n <InternalTreeView\n {...baseProps}\n {...baseComponentProps}\n {...externalProps}\n {...props}\n connectorLines={connectorLines}\n />\n );\n};\n\napplyDisplayName(TreeView, 'TreeView');\nexport default TreeView;\n"]}
|
|
@@ -42,6 +42,10 @@ export interface TreeViewProps<T = any> extends BaseComponentProps {
|
|
|
42
42
|
* Sets the `aria-describedby` property on the tree view.
|
|
43
43
|
*/
|
|
44
44
|
ariaDescribedby?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Shows connector lines highlighting hierarchy between parent and child items.
|
|
47
|
+
*/
|
|
48
|
+
connectorLines?: TreeViewProps.ConnectorLinesVariant;
|
|
45
49
|
/**
|
|
46
50
|
* Called when an item expands or collapses.
|
|
47
51
|
*/
|
|
@@ -72,6 +76,7 @@ export declare namespace TreeViewProps {
|
|
|
72
76
|
interface ItemToggleRenderIconData {
|
|
73
77
|
expanded: boolean;
|
|
74
78
|
}
|
|
79
|
+
type ConnectorLinesVariant = 'vertical' | 'none';
|
|
75
80
|
interface I18nStrings<T> {
|
|
76
81
|
collapseButtonLabel?: (item: T) => string;
|
|
77
82
|
expandButtonLabel?: (item: T) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tree-view/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAChE;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAExB;;;;;;;OAOG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,QAAQ,CAAC;IAE/D;;OAEG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE9C;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAE1E;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5E;;;OAGG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAE3C;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1F;AAED,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,QAAQ;QACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACnC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;IAED,UAAiB,gBAAgB,CAAC,CAAC;QACjC,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,CAAC,CAAC;QACR,QAAQ,EAAE,OAAO,CAAC;KACnB;IAED,UAAiB,wBAAwB;QACvC,QAAQ,EAAE,OAAO,CAAC;KACnB;IAED,UAAiB,WAAW,CAAC,CAAC;QAC5B,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;QAC1C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;KACzC;CACF"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tree-view/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAChE;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAExB;;;;;;;OAOG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,QAAQ,CAAC;IAE/D;;OAEG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE9C;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAE1E;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAErD;;OAEG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5E;;;OAGG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAE3C;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1F;AAED,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,QAAQ;QACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACnC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;IAED,UAAiB,gBAAgB,CAAC,CAAC;QACjC,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,CAAC,CAAC;QACR,QAAQ,EAAE,OAAO,CAAC;KACnB;IAED,UAAiB,wBAAwB;QACvC,QAAQ,EAAE,OAAO,CAAC;KACnB;IAED,KAAY,qBAAqB,GAAG,UAAU,GAAG,MAAM,CAAC;IAExD,UAAiB,WAAW,CAAC,CAAC;QAC5B,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;QAC1C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;KACzC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tree-view/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TreeViewProps<T = any> extends BaseComponentProps {\n /**\n * Specifies the top-level items to display in the tree view. Use `getItemChildren` to provide nested items.\n */\n items: ReadonlyArray<T>;\n\n /**\n * Use this property to map your data to tree view items. This property must return an object with the following properties:\n * * `content` (ReactNode) - The content of the item.\n * * `icon` (ReactNode) - (Optional) The icon of the item.\n * * `secondaryContent` (ReactNode) - (Optional) Secondary content of the item, such as a description of the item.\n * * `actions` (ReactNode) - (Optional) Actions related to the item. Use [button](/components/button/?tabId=playground&example=inline-icon-button) with inline-icon or inline-link variants. For items with multiple actions, use [button dropdown](/components/button-dropdown/?tabId=playground&example=inline-icon-button-dropdown) with the inline-icon variant.\n * * `announcementLabel` (string) - (Optional) An announcement label for the item, used for labeling the toggle button. By default, the `content` is used. Make sure to provide the `announcementLabel` if `content` is not a string.\n */\n renderItem: (item: T, index: number) => TreeViewProps.TreeItem;\n\n /**\n * Provides a unique identifier for each tree view item.\n */\n getItemId: (item: T, index: number) => string;\n\n /**\n * Specifies the nested items that are displayed when a tree view item gets expanded.\n */\n getItemChildren: (item: T, index: number) => ReadonlyArray<T> | undefined;\n\n /**\n * Provides the IDs of the expanded tree view items. It controls whether an item is expanded or collapsed.\n */\n expandedItems?: ReadonlyArray<string>;\n\n /**\n * Provides an `aria-label` to the tree view that screen readers can read (for accessibility).\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n\n /**\n * Sets the `aria-labelledby` property on the tree view.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n\n /**\n * Sets the `aria-describedby` property on the tree view.\n */\n ariaDescribedby?: string;\n\n /**\n * Called when an item expands or collapses.\n */\n onItemToggle?: NonCancelableEventHandler<TreeViewProps.ItemToggleDetail<T>>;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TreeViewProps.I18nStrings<T>;\n\n /**\n * Use this property to display a custom icon in the toggle button.\n */\n renderItemToggleIcon?: (data: TreeViewProps.ItemToggleRenderIconData) => React.ReactNode;\n}\n\nexport namespace TreeViewProps {\n export interface TreeItem {\n content: React.ReactNode;\n icon?: React.ReactNode;\n secondaryContent?: React.ReactNode;\n actions?: React.ReactNode;\n announcementLabel?: string;\n }\n\n export interface ItemToggleDetail<T> {\n id: string;\n item: T;\n expanded: boolean;\n }\n\n export interface ItemToggleRenderIconData {\n expanded: boolean;\n }\n\n export interface I18nStrings<T> {\n collapseButtonLabel?: (item: T) => string;\n expandButtonLabel?: (item: T) => string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tree-view/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TreeViewProps<T = any> extends BaseComponentProps {\n /**\n * Specifies the top-level items to display in the tree view. Use `getItemChildren` to provide nested items.\n */\n items: ReadonlyArray<T>;\n\n /**\n * Use this property to map your data to tree view items. This property must return an object with the following properties:\n * * `content` (ReactNode) - The content of the item.\n * * `icon` (ReactNode) - (Optional) The icon of the item.\n * * `secondaryContent` (ReactNode) - (Optional) Secondary content of the item, such as a description of the item.\n * * `actions` (ReactNode) - (Optional) Actions related to the item. Use [button](/components/button/?tabId=playground&example=inline-icon-button) with inline-icon or inline-link variants. For items with multiple actions, use [button dropdown](/components/button-dropdown/?tabId=playground&example=inline-icon-button-dropdown) with the inline-icon variant.\n * * `announcementLabel` (string) - (Optional) An announcement label for the item, used for labeling the toggle button. By default, the `content` is used. Make sure to provide the `announcementLabel` if `content` is not a string.\n */\n renderItem: (item: T, index: number) => TreeViewProps.TreeItem;\n\n /**\n * Provides a unique identifier for each tree view item.\n */\n getItemId: (item: T, index: number) => string;\n\n /**\n * Specifies the nested items that are displayed when a tree view item gets expanded.\n */\n getItemChildren: (item: T, index: number) => ReadonlyArray<T> | undefined;\n\n /**\n * Provides the IDs of the expanded tree view items. It controls whether an item is expanded or collapsed.\n */\n expandedItems?: ReadonlyArray<string>;\n\n /**\n * Provides an `aria-label` to the tree view that screen readers can read (for accessibility).\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n\n /**\n * Sets the `aria-labelledby` property on the tree view.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n\n /**\n * Sets the `aria-describedby` property on the tree view.\n */\n ariaDescribedby?: string;\n\n /**\n * Shows connector lines highlighting hierarchy between parent and child items.\n */\n connectorLines?: TreeViewProps.ConnectorLinesVariant;\n\n /**\n * Called when an item expands or collapses.\n */\n onItemToggle?: NonCancelableEventHandler<TreeViewProps.ItemToggleDetail<T>>;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TreeViewProps.I18nStrings<T>;\n\n /**\n * Use this property to display a custom icon in the toggle button.\n */\n renderItemToggleIcon?: (data: TreeViewProps.ItemToggleRenderIconData) => React.ReactNode;\n}\n\nexport namespace TreeViewProps {\n export interface TreeItem {\n content: React.ReactNode;\n icon?: React.ReactNode;\n secondaryContent?: React.ReactNode;\n actions?: React.ReactNode;\n announcementLabel?: string;\n }\n\n export interface ItemToggleDetail<T> {\n id: string;\n item: T;\n expanded: boolean;\n }\n\n export interface ItemToggleRenderIconData {\n expanded: boolean;\n }\n\n export type ConnectorLinesVariant = 'vertical' | 'none';\n\n export interface I18nStrings<T> {\n collapseButtonLabel?: (item: T) => string;\n expandButtonLabel?: (item: T) => string;\n }\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
2
2
|
import { TreeViewProps } from './interfaces';
|
|
3
3
|
type InternalTreeViewProps<T> = TreeViewProps<T> & InternalBaseComponentProps;
|
|
4
|
-
declare const InternalTreeView: <T>({ expandedItems: controlledExpandedItems, items, renderItem, getItemId, getItemChildren, onItemToggle, renderItemToggleIcon, ariaLabel, ariaLabelledby, ariaDescribedby, i18nStrings, __internalRootRef, ...rest }: InternalTreeViewProps<T>) => JSX.Element;
|
|
4
|
+
declare const InternalTreeView: <T>({ expandedItems: controlledExpandedItems, items, renderItem, getItemId, getItemChildren, onItemToggle, renderItemToggleIcon, ariaLabel, ariaLabelledby, ariaDescribedby, connectorLines, i18nStrings, __internalRootRef, ...rest }: InternalTreeViewProps<T>) => JSX.Element;
|
|
5
5
|
export default InternalTreeView;
|
|
6
6
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -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;AAQ7C,KAAK,qBAAqB,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC;AAE9E,QAAA,MAAM,gBAAgB,GAAI,CAAC,EAAG,
|
|
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,GAAI,CAAC,EAAG,oOAe3B,qBAAqB,CAAC,CAAC,CAAC,gBAwD1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -10,7 +10,7 @@ import InternalTreeItem from './tree-item';
|
|
|
10
10
|
import { getAllVisibleItemsIndices } from './utils';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
import testUtilStyles from './test-classes/styles.css.js';
|
|
13
|
-
const InternalTreeView = ({ expandedItems: controlledExpandedItems, items, renderItem, getItemId, getItemChildren, onItemToggle, renderItemToggleIcon, ariaLabel, ariaLabelledby, ariaDescribedby, i18nStrings, __internalRootRef, ...rest }) => {
|
|
13
|
+
const InternalTreeView = ({ expandedItems: controlledExpandedItems, items, renderItem, getItemId, getItemChildren, onItemToggle, renderItemToggleIcon, ariaLabel, ariaLabelledby, ariaDescribedby, connectorLines, i18nStrings, __internalRootRef, ...rest }) => {
|
|
14
14
|
const baseProps = getBaseProps(rest);
|
|
15
15
|
const [expandedItems, setExpandedItems] = useControllable(controlledExpandedItems, onItemToggle, [], {
|
|
16
16
|
componentName: 'TreeView',
|
|
@@ -32,7 +32,7 @@ const InternalTreeView = ({ expandedItems: controlledExpandedItems, items, rende
|
|
|
32
32
|
React.createElement(KeyboardNavigationProvider, { getTreeView: () => treeViewRefObject.current },
|
|
33
33
|
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) => {
|
|
34
34
|
const itemId = getItemId(item, index);
|
|
35
|
-
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 }));
|
|
35
|
+
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, connectorLines: connectorLines }));
|
|
36
36
|
})))));
|
|
37
37
|
};
|
|
38
38
|
export default InternalTreeView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tree-view/internal.tsx"],"names":[],"mappings":"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
|
|
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 connectorLines,\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 connectorLines={connectorLines}\n />\n );\n })}\n </ul>\n </KeyboardNavigationProvider>\n </div>\n );\n};\n\nexport default InternalTreeView;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TreeViewProps } from '../interfaces';
|
|
2
|
-
interface InternalTreeItemProps<T> extends Pick<TreeViewProps, 'expandedItems' | 'renderItem' | 'getItemId' | 'getItemChildren' | 'renderItemToggleIcon' | 'i18nStrings'> {
|
|
2
|
+
interface InternalTreeItemProps<T> extends Pick<TreeViewProps, 'expandedItems' | 'renderItem' | 'getItemId' | 'getItemChildren' | 'renderItemToggleIcon' | 'i18nStrings' | 'connectorLines'> {
|
|
3
3
|
item: T;
|
|
4
4
|
index: number;
|
|
5
5
|
level: number;
|
|
@@ -8,6 +8,6 @@ interface InternalTreeItemProps<T> extends Pick<TreeViewProps, 'expandedItems' |
|
|
|
8
8
|
[key: string]: number;
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
|
-
declare const InternalTreeItem: <T>({ item, index, level, i18nStrings, expandedItems, renderItemToggleIcon, renderItem, getItemId, getItemChildren, onItemToggle, allVisibleItemsIndices, }: InternalTreeItemProps<T>) => JSX.Element;
|
|
11
|
+
declare const InternalTreeItem: <T>({ item, index, level, i18nStrings, expandedItems, connectorLines, renderItemToggleIcon, renderItem, getItemId, getItemChildren, onItemToggle, allVisibleItemsIndices, }: InternalTreeItemProps<T>) => JSX.Element;
|
|
12
12
|
export default InternalTreeItem;
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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;
|
|
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"}
|
|
@@ -6,10 +6,11 @@ import { useInternalI18n } from '../../i18n/context';
|
|
|
6
6
|
import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
|
|
7
7
|
import InternalStructuredItem from '../../internal/components/structured-item';
|
|
8
8
|
import { joinStrings } from '../../internal/utils/strings';
|
|
9
|
+
import VerticalConnector from '../vertical-connector';
|
|
9
10
|
import FocusTarget from './focus-target';
|
|
10
11
|
import testUtilStyles from '../test-classes/styles.css.js';
|
|
11
12
|
import styles from './styles.css.js';
|
|
12
|
-
const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [], renderItemToggleIcon, renderItem, getItemId, getItemChildren, onItemToggle, allVisibleItemsIndices, }) => {
|
|
13
|
+
const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [], connectorLines, renderItemToggleIcon, renderItem, getItemId, getItemChildren, onItemToggle, allVisibleItemsIndices, }) => {
|
|
13
14
|
var _a, _b;
|
|
14
15
|
const i18n = useInternalI18n('tree-view');
|
|
15
16
|
const { icon, content, secondaryContent, actions, announcementLabel } = renderItem(item, index);
|
|
@@ -18,6 +19,7 @@ const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [],
|
|
|
18
19
|
const isExpandable = children.length > 0;
|
|
19
20
|
const isExpanded = isExpandable && expandedItems.includes(id);
|
|
20
21
|
const nextLevel = level + 1;
|
|
22
|
+
const showVerticalConnectorLines = connectorLines === 'vertical' && isExpanded;
|
|
21
23
|
let customIcon = undefined;
|
|
22
24
|
if (isExpandable && renderItemToggleIcon) {
|
|
23
25
|
customIcon = renderItemToggleIcon({ expanded: isExpanded });
|
|
@@ -31,12 +33,15 @@ const InternalTreeItem = ({ item, index, level, i18nStrings, expandedItems = [],
|
|
|
31
33
|
React.createElement("div", { className: styles['treeitem-content-wrapper'] },
|
|
32
34
|
React.createElement("div", { className: styles['expand-toggle-wrapper'] },
|
|
33
35
|
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
|
+
showVerticalConnectorLines && React.createElement(VerticalConnector, { variant: "grid" }),
|
|
34
37
|
React.createElement("div", { className: styles['structured-item-wrapper'] },
|
|
35
38
|
React.createElement(InternalStructuredItem, { icon: icon, content: content, secondaryContent: secondaryContent, actions: actions, wrapActions: false, className: styles['tree-item-structured-item'] }))),
|
|
36
|
-
isExpanded && children.length && (React.createElement("ul", { role: "group", className: styles['treeitem-group'] },
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
isExpanded && children.length && (React.createElement("ul", { role: "group", className: styles['treeitem-group'] },
|
|
40
|
+
children.map((child, index) => {
|
|
41
|
+
const itemId = getItemId(child, index);
|
|
42
|
+
return (React.createElement(InternalTreeItem, { item: child, index: index, key: itemId, level: nextLevel, expandedItems: expandedItems, i18nStrings: i18nStrings, onItemToggle: onItemToggle, renderItem: renderItem, getItemId: getItemId, getItemChildren: getItemChildren, renderItemToggleIcon: renderItemToggleIcon, allVisibleItemsIndices: allVisibleItemsIndices, connectorLines: connectorLines }));
|
|
43
|
+
}),
|
|
44
|
+
showVerticalConnectorLines && React.createElement(VerticalConnector, { variant: "absolute" })))));
|
|
40
45
|
};
|
|
41
46
|
export default InternalTreeItem;
|
|
42
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -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,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
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,14 +1,14 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"treeitem-group": "awsui_treeitem-
|
|
5
|
-
"treeitem": "
|
|
6
|
-
"offset": "
|
|
7
|
-
"treeitem-content-wrapper": "awsui_treeitem-content-
|
|
8
|
-
"tree-item-focus-target": "awsui_tree-item-focus-
|
|
9
|
-
"expand-toggle-wrapper": "awsui_expand-toggle-
|
|
10
|
-
"toggle": "
|
|
11
|
-
"structured-item-wrapper": "awsui_structured-item-
|
|
12
|
-
"tree-item-structured-item": "awsui_tree-item-structured-
|
|
4
|
+
"treeitem-group": "awsui_treeitem-group_1agpu_1lkhl_185",
|
|
5
|
+
"treeitem": "awsui_treeitem_1agpu_1lkhl_185",
|
|
6
|
+
"offset": "awsui_offset_1agpu_1lkhl_202",
|
|
7
|
+
"treeitem-content-wrapper": "awsui_treeitem-content-wrapper_1agpu_1lkhl_205",
|
|
8
|
+
"tree-item-focus-target": "awsui_tree-item-focus-target_1agpu_1lkhl_210",
|
|
9
|
+
"expand-toggle-wrapper": "awsui_expand-toggle-wrapper_1agpu_1lkhl_231",
|
|
10
|
+
"toggle": "awsui_toggle_1agpu_1lkhl_236",
|
|
11
|
+
"structured-item-wrapper": "awsui_structured-item-wrapper_1agpu_1lkhl_241",
|
|
12
|
+
"tree-item-structured-item": "awsui_tree-item-structured-item_1agpu_1lkhl_248"
|
|
13
13
|
};
|
|
14
14
|
|
|
@@ -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-
|
|
185
|
+
.awsui_treeitem-group_1agpu_1lkhl_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
|
-
.
|
|
194
|
+
.awsui_treeitem_1agpu_1lkhl_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
|
-
.
|
|
203
|
-
margin-inline-start:
|
|
202
|
+
.awsui_treeitem_1agpu_1lkhl_185.awsui_offset_1agpu_1lkhl_202:not(#\9) {
|
|
203
|
+
margin-inline-start: var(--space-tree-view-indentation-5cp0z1, 20px);
|
|
204
204
|
}
|
|
205
|
-
.
|
|
205
|
+
.awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_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] .
|
|
210
|
+
body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_1lkhl_210:focus) {
|
|
211
211
|
position: relative;
|
|
212
212
|
}
|
|
213
|
-
body[data-awsui-focus-visible=true] .
|
|
213
|
+
body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_1lkhl_210:focus) {
|
|
214
214
|
outline: 2px dotted transparent;
|
|
215
215
|
outline-offset: calc(0px - 1px);
|
|
216
216
|
}
|
|
217
|
-
body[data-awsui-focus-visible=true] .
|
|
217
|
+
body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_205:not(#\9):has(.awsui_tree-item-focus-target_1agpu_1lkhl_210:focus)::before {
|
|
218
218
|
content: " ";
|
|
219
219
|
display: block;
|
|
220
220
|
position: absolute;
|
|
@@ -228,28 +228,27 @@ body[data-awsui-focus-visible=true] .awsui_treeitem_1agpu_601dz_185 > .awsui_tre
|
|
|
228
228
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
|
|
229
229
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
|
|
230
230
|
}
|
|
231
|
-
.
|
|
231
|
+
.awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_205 > .awsui_expand-toggle-wrapper_1agpu_1lkhl_231:not(#\9) {
|
|
232
232
|
display: grid;
|
|
233
233
|
grid-column: 1;
|
|
234
234
|
grid-row: 1;
|
|
235
|
-
padding-inline-end: var(--space-scaled-xxs-jatbiv, 4px);
|
|
236
235
|
}
|
|
237
|
-
.
|
|
236
|
+
.awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_205 > .awsui_expand-toggle-wrapper_1agpu_1lkhl_231 > .awsui_toggle_1agpu_1lkhl_236:not(#\9) {
|
|
238
237
|
justify-self: center;
|
|
239
238
|
position: relative;
|
|
240
239
|
inset-block-start: 2px;
|
|
241
240
|
}
|
|
242
|
-
.
|
|
241
|
+
.awsui_treeitem_1agpu_1lkhl_185 > .awsui_treeitem-content-wrapper_1agpu_1lkhl_205 > .awsui_structured-item-wrapper_1agpu_1lkhl_241:not(#\9) {
|
|
243
242
|
grid-column: 2;
|
|
244
243
|
grid-row: 1/span 2;
|
|
245
|
-
padding-block: var(--space-scaled-
|
|
244
|
+
padding-block: var(--space-scaled-xxxs-prgw5k, 2px);
|
|
246
245
|
position: relative;
|
|
247
246
|
}
|
|
248
247
|
|
|
249
|
-
.awsui_tree-item-structured-
|
|
248
|
+
.awsui_tree-item-structured-item_1agpu_1lkhl_248:not(#\9) {
|
|
250
249
|
/* used in keyboard navigation */
|
|
251
250
|
}
|
|
252
251
|
|
|
253
|
-
.awsui_tree-item-focus-
|
|
252
|
+
.awsui_tree-item-focus-target_1agpu_1lkhl_210:not(#\9) {
|
|
254
253
|
outline: none;
|
|
255
254
|
}
|