@cloudscape-design/components-themeable 3.0.1143 → 3.0.1145

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 (52) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/internal/components/selectable-item/styles.scss +0 -54
  3. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  4. package/lib/internal/scss/tree-view/tree-item/styles.scss +2 -3
  5. package/lib/internal/scss/tree-view/vertical-connector/styles.scss +29 -0
  6. package/lib/internal/template/internal/base-component/styles.scoped.css +13 -1
  7. package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -22
  8. package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +42 -74
  9. package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -22
  10. package/lib/internal/template/internal/environment.js +2 -2
  11. package/lib/internal/template/internal/environment.json +2 -2
  12. package/lib/internal/template/internal/generated/styles/tokens.d.ts +2 -0
  13. package/lib/internal/template/internal/generated/styles/tokens.js +2 -0
  14. package/lib/internal/template/internal/generated/theming/index.cjs +45 -0
  15. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +9 -0
  16. package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
  17. package/lib/internal/template/internal/generated/theming/index.js +45 -0
  18. package/lib/internal/template/internal/hooks/use-mobile/index.d.ts.map +1 -1
  19. package/lib/internal/template/internal/hooks/use-mobile/index.js +3 -1
  20. package/lib/internal/template/internal/hooks/use-mobile/index.js.map +1 -1
  21. package/lib/internal/template/select/parts/virtual-list.d.ts.map +1 -1
  22. package/lib/internal/template/select/parts/virtual-list.js +1 -4
  23. package/lib/internal/template/select/parts/virtual-list.js.map +1 -1
  24. package/lib/internal/template/select/utils/render-options.d.ts.map +1 -1
  25. package/lib/internal/template/select/utils/render-options.js +1 -4
  26. package/lib/internal/template/select/utils/render-options.js.map +1 -1
  27. package/lib/internal/template/tree-view/index.d.ts +1 -1
  28. package/lib/internal/template/tree-view/index.d.ts.map +1 -1
  29. package/lib/internal/template/tree-view/index.js +5 -3
  30. package/lib/internal/template/tree-view/index.js.map +1 -1
  31. package/lib/internal/template/tree-view/interfaces.d.ts +5 -0
  32. package/lib/internal/template/tree-view/interfaces.d.ts.map +1 -1
  33. package/lib/internal/template/tree-view/interfaces.js.map +1 -1
  34. package/lib/internal/template/tree-view/internal.d.ts +1 -1
  35. package/lib/internal/template/tree-view/internal.d.ts.map +1 -1
  36. package/lib/internal/template/tree-view/internal.js +2 -2
  37. package/lib/internal/template/tree-view/internal.js.map +1 -1
  38. package/lib/internal/template/tree-view/tree-item/index.d.ts +2 -2
  39. package/lib/internal/template/tree-view/tree-item/index.d.ts.map +1 -1
  40. package/lib/internal/template/tree-view/tree-item/index.js +10 -5
  41. package/lib/internal/template/tree-view/tree-item/index.js.map +1 -1
  42. package/lib/internal/template/tree-view/tree-item/styles.css.js +9 -9
  43. package/lib/internal/template/tree-view/tree-item/styles.scoped.css +14 -15
  44. package/lib/internal/template/tree-view/tree-item/styles.selectors.js +9 -9
  45. package/lib/internal/template/tree-view/vertical-connector/index.d.ts +6 -0
  46. package/lib/internal/template/tree-view/vertical-connector/index.d.ts.map +1 -0
  47. package/lib/internal/template/tree-view/vertical-connector/index.js +11 -0
  48. package/lib/internal/template/tree-view/vertical-connector/index.js.map +1 -0
  49. package/lib/internal/template/tree-view/vertical-connector/styles.css.js +8 -0
  50. package/lib/internal/template/tree-view/vertical-connector/styles.scoped.css +25 -0
  51. package/lib/internal/template/tree-view/vertical-connector/styles.selectors.js +9 -0
  52. package/package.json +1 -1
package/lib/internal/template/internal/generated/styles/tokens.d.ts CHANGED
@@ -545,6 +545,7 @@ export const colorDropzoneTextHover: string;
545
545
  export const colorDropzoneBorderDefault: string;
546
546
  export const colorDropzoneBorderHover: string;
547
547
  export const colorGapGlobalDrawer: string;
548
+ export const colorTreeViewConnectorLine: string;
548
549
  export const fontBoxValueLargeWeight: string;
549
550
  export const fontButtonLetterSpacing: string;
550
551
  export const fontChartDetailSize: string;
@@ -746,6 +747,7 @@ export const spaceTableHeaderHorizontal: string;
746
747
  export const spaceTableHeaderToolsBottom: string;
747
748
  export const spaceTableHeaderToolsFullPageBottom: string;
748
749
  export const spaceTableHorizontal: string;
750
+ export const spaceTreeViewIndentation: string;
749
751
  export const spaceTileGutter: string;
750
752
  export const spaceScaled2xNone: string;
751
753
  export const spaceScaled2xXxxs: string;
package/lib/internal/template/internal/generated/styles/tokens.js CHANGED
@@ -545,6 +545,7 @@ export var colorDropzoneTextHover = "var(--color-dropzone-text-hover-asw3rt, #42
545
545
  export var colorDropzoneBorderDefault = "var(--color-dropzone-border-default-k648ha, #8c8c94)";
546
546
  export var colorDropzoneBorderHover = "var(--color-dropzone-border-hover-otpag5, #002b66)";
547
547
  export var colorGapGlobalDrawer = "var(--color-gap-global-drawer-nh699a, #ebebf0)";
548
+ export var colorTreeViewConnectorLine = "var(--color-tree-view-connector-line-1usxvn, #8c8c94)";
548
549
  export var fontBoxValueLargeWeight = "var(--font-box-value-large-weight-wr00sw, 700)";
549
550
  export var fontButtonLetterSpacing = "var(--font-button-letter-spacing-ufowe3, 0.005em)";
550
551
  export var fontChartDetailSize = "var(--font-chart-detail-size-9qr25q, 12px)";
@@ -746,6 +747,7 @@ export var spaceTableHeaderHorizontal = "var(--space-table-header-horizontal-kb5
746
747
  export var spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom-d9u5kf, 0px)";
747
748
  export var spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom-9m47g6, 4px)";
748
749
  export var spaceTableHorizontal = "var(--space-table-horizontal-suurzj, 20px)";
750
+ export var spaceTreeViewIndentation = "var(--space-tree-view-indentation-gmy1k3, 20px)";
749
751
  export var spaceTileGutter = "var(--space-tile-gutter-bi2bdv, 24px)";
750
752
  export var spaceScaled2xNone = "var(--space-scaled-2x-none-987dp7, 0px)";
751
753
  export var spaceScaled2xXxxs = "var(--space-scaled-2x-xxxs-reumxj, 2px)";
package/lib/internal/template/internal/generated/theming/index.cjs CHANGED
@@ -2077,6 +2077,10 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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 @@ module.exports.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",
package/lib/internal/template/internal/generated/theming/index.cjs.d.ts CHANGED
@@ -219,6 +219,7 @@ export declare interface TypedOverride {
219
219
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
220
220
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
221
221
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
222
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
222
223
  fontFamilyBase?: GlobalValue;
223
224
  fontFamilyMonospace?: GlobalValue;
224
225
  fontSizeBodyM?: GlobalValue;
@@ -488,6 +489,7 @@ export declare interface TypedOverride {
488
489
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
489
490
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
490
491
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
492
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
491
493
  fontFamilyBase?: GlobalValue;
492
494
  fontFamilyMonospace?: GlobalValue;
493
495
  fontSizeBodyM?: GlobalValue;
@@ -757,6 +759,7 @@ export declare interface TypedOverride {
757
759
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
758
760
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
759
761
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
762
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
760
763
  fontFamilyBase?: GlobalValue;
761
764
  fontFamilyMonospace?: GlobalValue;
762
765
  fontSizeBodyM?: GlobalValue;
@@ -1026,6 +1029,7 @@ export declare interface TypedOverride {
1026
1029
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1027
1030
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1028
1031
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1032
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1029
1033
  fontFamilyBase?: GlobalValue;
1030
1034
  fontFamilyMonospace?: GlobalValue;
1031
1035
  fontSizeBodyM?: GlobalValue;
@@ -1295,6 +1299,7 @@ export declare interface TypedOverride {
1295
1299
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1296
1300
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1297
1301
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1302
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1298
1303
  fontFamilyBase?: GlobalValue;
1299
1304
  fontFamilyMonospace?: GlobalValue;
1300
1305
  fontSizeBodyM?: GlobalValue;
@@ -1564,6 +1569,7 @@ export declare interface TypedOverride {
1564
1569
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1565
1570
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1566
1571
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1572
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1567
1573
  fontFamilyBase?: GlobalValue;
1568
1574
  fontFamilyMonospace?: GlobalValue;
1569
1575
  fontSizeBodyM?: GlobalValue;
@@ -1833,6 +1839,7 @@ export declare interface TypedOverride {
1833
1839
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1834
1840
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1835
1841
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1842
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1836
1843
  fontFamilyBase?: GlobalValue;
1837
1844
  fontFamilyMonospace?: GlobalValue;
1838
1845
  fontSizeBodyM?: GlobalValue;
@@ -2102,6 +2109,7 @@ export declare interface TypedOverride {
2102
2109
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2103
2110
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2104
2111
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2112
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2105
2113
  fontFamilyBase?: GlobalValue;
2106
2114
  fontFamilyMonospace?: GlobalValue;
2107
2115
  fontSizeBodyM?: GlobalValue;
@@ -2371,6 +2379,7 @@ export declare interface TypedOverride {
2371
2379
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2372
2380
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2373
2381
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2382
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2374
2383
  fontFamilyBase?: GlobalValue;
2375
2384
  fontFamilyMonospace?: GlobalValue;
2376
2385
  fontSizeBodyM?: GlobalValue;
package/lib/internal/template/internal/generated/theming/index.d.ts CHANGED
@@ -219,6 +219,7 @@ export declare interface TypedOverride {
219
219
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
220
220
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
221
221
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
222
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
222
223
  fontFamilyBase?: GlobalValue;
223
224
  fontFamilyMonospace?: GlobalValue;
224
225
  fontSizeBodyM?: GlobalValue;
@@ -488,6 +489,7 @@ export declare interface TypedOverride {
488
489
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
489
490
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
490
491
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
492
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
491
493
  fontFamilyBase?: GlobalValue;
492
494
  fontFamilyMonospace?: GlobalValue;
493
495
  fontSizeBodyM?: GlobalValue;
@@ -757,6 +759,7 @@ export declare interface TypedOverride {
757
759
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
758
760
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
759
761
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
762
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
760
763
  fontFamilyBase?: GlobalValue;
761
764
  fontFamilyMonospace?: GlobalValue;
762
765
  fontSizeBodyM?: GlobalValue;
@@ -1026,6 +1029,7 @@ export declare interface TypedOverride {
1026
1029
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1027
1030
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1028
1031
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1032
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1029
1033
  fontFamilyBase?: GlobalValue;
1030
1034
  fontFamilyMonospace?: GlobalValue;
1031
1035
  fontSizeBodyM?: GlobalValue;
@@ -1295,6 +1299,7 @@ export declare interface TypedOverride {
1295
1299
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1296
1300
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1297
1301
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1302
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1298
1303
  fontFamilyBase?: GlobalValue;
1299
1304
  fontFamilyMonospace?: GlobalValue;
1300
1305
  fontSizeBodyM?: GlobalValue;
@@ -1564,6 +1569,7 @@ export declare interface TypedOverride {
1564
1569
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1565
1570
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1566
1571
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1572
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1567
1573
  fontFamilyBase?: GlobalValue;
1568
1574
  fontFamilyMonospace?: GlobalValue;
1569
1575
  fontSizeBodyM?: GlobalValue;
@@ -1833,6 +1839,7 @@ export declare interface TypedOverride {
1833
1839
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1834
1840
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1835
1841
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1842
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
1836
1843
  fontFamilyBase?: GlobalValue;
1837
1844
  fontFamilyMonospace?: GlobalValue;
1838
1845
  fontSizeBodyM?: GlobalValue;
@@ -2102,6 +2109,7 @@ export declare interface TypedOverride {
2102
2109
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2103
2110
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2104
2111
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2112
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2105
2113
  fontFamilyBase?: GlobalValue;
2106
2114
  fontFamilyMonospace?: GlobalValue;
2107
2115
  fontSizeBodyM?: GlobalValue;
@@ -2371,6 +2379,7 @@ export declare interface TypedOverride {
2371
2379
  colorDropzoneTextHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2372
2380
  colorDropzoneBorderDefault?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2373
2381
  colorDropzoneBorderHover?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2382
+ colorTreeViewConnectorLine?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
2374
2383
  fontFamilyBase?: GlobalValue;
2375
2384
  fontFamilyMonospace?: GlobalValue;
2376
2385
  fontSizeBodyM?: GlobalValue;
package/lib/internal/template/internal/generated/theming/index.js CHANGED
@@ -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",
package/lib/internal/template/internal/hooks/use-mobile/index.d.ts.map CHANGED
@@ -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;AA4B3E,eAAO,MAAM,SAAS,eASpB,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"}
package/lib/internal/template/internal/hooks/use-mobile/index.js CHANGED
@@ -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
- return window.matchMedia(`(max-width: ${mobileBreakpoint}px)`).matches;
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
  }
package/lib/internal/template/internal/hooks/use-mobile/index.js.map CHANGED
@@ -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;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,OAAO,MAAM,CAAC,UAAU,CAAC,eAAe,gBAAgB,KAAK,CAAC,CAAC,OAAO,CAAC;IACzE,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 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
+ {"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"]}
package/lib/internal/template/select/parts/virtual-list.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAUpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AAgI/C,wBAAuC"}
1
+ {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAUpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AA4H/C,wBAAuC"}
package/lib/internal/template/select/parts/virtual-list.js CHANGED
@@ -67,12 +67,9 @@ const VirtualListOpen = forwardRef(({ menuProps, getOptionProps, filteredOptions
67
67
  firstOptionSticky,
68
68
  withScrollbar,
69
69
  });
70
- // Adjust totalSize to account for 1px overlap per item (matching the position adjustment in renderOptions)
71
- const overlapAdjustment = filteredOptions.length;
72
- const adjustedTotalSize = totalSize - overlapAdjustment;
73
70
  return (React.createElement(OptionsList, { ...menuProps, stickyItemBlockSize: stickySize, ref: menuRef },
74
71
  finalOptions,
75
- React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: adjustedTotalSize - stickySize } }),
72
+ React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: totalSize - stickySize } }),
76
73
  listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
77
74
  });
78
75
  const VirtualListClosed = forwardRef(({ menuProps, listBottom }, ref) => {
package/lib/internal/template/select/parts/virtual-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.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, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useVirtual } from '../../internal/hooks/use-virtual';\nimport { renderOptions } from '../utils/render-options';\nimport customScrollToIndex from '../utils/scroll-to-index';\nimport { fallbackItemHeight } from './common';\nimport { SelectListProps } from './plain-list';\n\nimport styles from './styles.css.js';\n\nconst VirtualList = (props: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n return props.menuProps.open ? <VirtualListOpen {...props} ref={ref} /> : <VirtualListClosed {...props} ref={ref} />;\n};\n\nconst VirtualListOpen = forwardRef(\n (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n ) => {\n // update component, when it gets wider or narrower to reposition items\n const [width, menuMeasureRef] = useContainerQuery(\n rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }),\n []\n );\n const menuRefObject = useRef(null);\n const menuRef = useMergeRefs(menuMeasureRef, menuRefObject, menuProps.ref);\n const previousHighlightedIndex = useRef<number>();\n const { virtualItems, totalSize, scrollToIndex } = useVirtual({\n items: filteredOptions,\n parentRef: menuRefObject,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (filteringValue property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => fallbackItemHeight, [width?.inner, filteringValue]),\n firstItemSticky: firstOptionSticky,\n });\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n if (highlightType.moveFocus) {\n const movingUp = previousHighlightedIndex.current !== undefined && index < previousHighlightedIndex.current;\n if (firstOptionSticky && movingUp && index !== 0 && menuRefObject.current) {\n // React-Virtual v2 does not offer a proper way to handle sticky elements when scrolling,\n // so until we upgrade to v3, use our own scroll implementation\n // to prevent newly highlighted element from being covered by the sticky element\n // when moving the highlight upwards in the list.\n\n // Scrolling behavior is covered by integration tests.\n // istanbul ignore next\n customScrollToIndex({\n index,\n menuEl: menuRefObject?.current,\n });\n } else {\n scrollToIndex(index);\n }\n }\n previousHighlightedIndex.current = index;\n },\n [firstOptionSticky, highlightType.moveFocus, scrollToIndex]\n );\n\n const stickySize = firstOptionSticky ? virtualItems[0].size : 0;\n const withScrollbar = !!width && width.inner < width.outer;\n\n const idPrefix = useUniqueId('select-list-');\n const finalOptions = renderOptions({\n options: virtualItems.map(({ index }) => filteredOptions[index]),\n getOptionProps,\n filteringValue,\n highlightType,\n idPrefix,\n checkboxes,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n withScrollbar,\n });\n\n // Adjust totalSize to account for 1px overlap per item (matching the position adjustment in renderOptions)\n const overlapAdjustment = filteredOptions.length;\n const adjustedTotalSize = totalSize - overlapAdjustment;\n\n return (\n <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef}>\n {finalOptions}\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: adjustedTotalSize - stickySize }}\n />\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nconst VirtualListClosed = forwardRef(\n ({ menuProps, listBottom }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n useImperativeHandle(ref, () => () => {}, []);\n return (\n <OptionsList {...menuProps} ref={menuProps.ref}>\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nexport default forwardRef(VirtualList);\n"]}
1
+ {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../../src/select/parts/virtual-list.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, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport OptionsList from '../../internal/components/options-list';\nimport { useVirtual } from '../../internal/hooks/use-virtual';\nimport { renderOptions } from '../utils/render-options';\nimport customScrollToIndex from '../utils/scroll-to-index';\nimport { fallbackItemHeight } from './common';\nimport { SelectListProps } from './plain-list';\n\nimport styles from './styles.css.js';\n\nconst VirtualList = (props: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n return props.menuProps.open ? <VirtualListOpen {...props} ref={ref} /> : <VirtualListClosed {...props} ref={ref} />;\n};\n\nconst VirtualListOpen = forwardRef(\n (\n {\n menuProps,\n getOptionProps,\n filteredOptions,\n filteringValue,\n highlightType,\n checkboxes,\n hasDropdownStatus,\n listBottom,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n }: SelectListProps,\n ref: React.Ref<SelectListProps.SelectListRef>\n ) => {\n // update component, when it gets wider or narrower to reposition items\n const [width, menuMeasureRef] = useContainerQuery(\n rect => ({ inner: rect.contentBoxWidth, outer: rect.borderBoxWidth }),\n []\n );\n const menuRefObject = useRef(null);\n const menuRef = useMergeRefs(menuMeasureRef, menuRefObject, menuProps.ref);\n const previousHighlightedIndex = useRef<number>();\n const { virtualItems, totalSize, scrollToIndex } = useVirtual({\n items: filteredOptions,\n parentRef: menuRefObject,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (filteringValue property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => fallbackItemHeight, [width?.inner, filteringValue]),\n firstItemSticky: firstOptionSticky,\n });\n\n useImperativeHandle(\n ref,\n () => (index: number) => {\n if (highlightType.moveFocus) {\n const movingUp = previousHighlightedIndex.current !== undefined && index < previousHighlightedIndex.current;\n if (firstOptionSticky && movingUp && index !== 0 && menuRefObject.current) {\n // React-Virtual v2 does not offer a proper way to handle sticky elements when scrolling,\n // so until we upgrade to v3, use our own scroll implementation\n // to prevent newly highlighted element from being covered by the sticky element\n // when moving the highlight upwards in the list.\n\n // Scrolling behavior is covered by integration tests.\n // istanbul ignore next\n customScrollToIndex({\n index,\n menuEl: menuRefObject?.current,\n });\n } else {\n scrollToIndex(index);\n }\n }\n previousHighlightedIndex.current = index;\n },\n [firstOptionSticky, highlightType.moveFocus, scrollToIndex]\n );\n\n const stickySize = firstOptionSticky ? virtualItems[0].size : 0;\n const withScrollbar = !!width && width.inner < width.outer;\n\n const idPrefix = useUniqueId('select-list-');\n const finalOptions = renderOptions({\n options: virtualItems.map(({ index }) => filteredOptions[index]),\n getOptionProps,\n filteringValue,\n highlightType,\n idPrefix,\n checkboxes,\n hasDropdownStatus,\n virtualItems,\n useInteractiveGroups,\n screenReaderContent,\n firstOptionSticky,\n withScrollbar,\n });\n\n return (\n <OptionsList {...menuProps} stickyItemBlockSize={stickySize} ref={menuRef}>\n {finalOptions}\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: totalSize - stickySize }}\n />\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nconst VirtualListClosed = forwardRef(\n ({ menuProps, listBottom }: SelectListProps, ref: React.Ref<SelectListProps.SelectListRef>) => {\n useImperativeHandle(ref, () => () => {}, []);\n return (\n <OptionsList {...menuProps} ref={menuProps.ref}>\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n }\n);\n\nexport default forwardRef(VirtualList);\n"]}
package/lib/internal/template/select/utils/render-options.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAMlE,UAAU,iBAAiB;IACzB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,GAAI,+NAe3B,iBAAiB,kBAoEnB,CAAC"}
1
+ {"version":3,"file":"render-options.d.ts","sourceRoot":"","sources":["../../../../src/select/utils/render-options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAMlE,UAAU,iBAAiB;IACzB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,GAAI,+NAe3B,iBAAiB,kBAgEnB,CAAC"}
package/lib/internal/template/select/utils/render-options.js CHANGED
@@ -25,10 +25,7 @@ export const renderOptions = ({ options, getOptionProps, filteringValue, highlig
25
25
  const padBottom = !hasDropdownStatus && isLastItem;
26
26
  const ListItem = useInteractiveGroups ? MultiselectItem : Item;
27
27
  const isSticky = firstOptionSticky && globalIndex === 0;
28
- // Adjust virtual position to create 1px overlap between items (matching non-virtual behavior)
29
- // Subtract globalIndex to shift each item up by 1px per item
30
- const adjustedVirtualPosition = virtualItem ? virtualItem.start - globalIndex : undefined;
31
- return (React.createElement(ListItem, { key: globalIndex, ...props, virtualPosition: adjustedVirtualPosition, ref: isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky }));
28
+ return (React.createElement(ListItem, { key: globalIndex, ...props, virtualPosition: virtualItem && virtualItem.start, ref: isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef, padBottom: padBottom, screenReaderContent: screenReaderContent, ariaPosinset: globalIndex + 1, ariaSetsize: ariaSetsize, highlightType: highlightType.type, withScrollbar: withScrollbar, sticky: isSticky }));
32
29
  };
33
30
  const unflattenedOptions = unflattenOptions(options);
34
31
  return unflattenedOptions.map(nestedDropdownOption => {