@patternfly/react-core 4.225.2 → 4.225.5

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 (90) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/Alert/Alert.d.ts.map +1 -1
  3. package/dist/esm/components/Alert/Alert.js +2 -2
  4. package/dist/esm/components/Alert/Alert.js.map +1 -1
  5. package/dist/esm/components/Menu/MenuGroup.d.ts +3 -1
  6. package/dist/esm/components/Menu/MenuGroup.d.ts.map +1 -1
  7. package/dist/esm/components/Menu/MenuGroup.js +2 -2
  8. package/dist/esm/components/Menu/MenuGroup.js.map +1 -1
  9. package/dist/esm/components/Nav/Nav.d.ts +1 -1
  10. package/dist/esm/components/Nav/Nav.d.ts.map +1 -1
  11. package/dist/esm/components/OptionsMenu/OptionsMenuItemGroup.js +2 -2
  12. package/dist/esm/components/OptionsMenu/OptionsMenuItemGroup.js.map +1 -1
  13. package/dist/esm/components/OptionsMenu/OptionsMenuToggleWithText.d.ts.map +1 -1
  14. package/dist/esm/components/OptionsMenu/OptionsMenuToggleWithText.js +4 -3
  15. package/dist/esm/components/OptionsMenu/OptionsMenuToggleWithText.js.map +1 -1
  16. package/dist/esm/components/Page/PageHeader.d.ts +2 -0
  17. package/dist/esm/components/Page/PageHeader.d.ts.map +1 -1
  18. package/dist/esm/components/Page/PageHeader.js +2 -2
  19. package/dist/esm/components/Page/PageHeader.js.map +1 -1
  20. package/dist/esm/components/Page/PageSidebar.d.ts +2 -0
  21. package/dist/esm/components/Page/PageSidebar.d.ts.map +1 -1
  22. package/dist/esm/components/Page/PageSidebar.js +3 -3
  23. package/dist/esm/components/Page/PageSidebar.js.map +1 -1
  24. package/dist/esm/components/Page/PageToggleButton.d.ts +2 -0
  25. package/dist/esm/components/Page/PageToggleButton.d.ts.map +1 -1
  26. package/dist/esm/components/Page/PageToggleButton.js +2 -2
  27. package/dist/esm/components/Page/PageToggleButton.js.map +1 -1
  28. package/dist/esm/components/Tabs/TabContent.d.ts.map +1 -1
  29. package/dist/esm/components/Tabs/TabContent.js +4 -2
  30. package/dist/esm/components/Tabs/TabContent.js.map +1 -1
  31. package/dist/js/components/Alert/Alert.d.ts.map +1 -1
  32. package/dist/js/components/Alert/Alert.js +2 -2
  33. package/dist/js/components/Alert/Alert.js.map +1 -1
  34. package/dist/js/components/Menu/MenuGroup.d.ts +3 -1
  35. package/dist/js/components/Menu/MenuGroup.d.ts.map +1 -1
  36. package/dist/js/components/Menu/MenuGroup.js +2 -2
  37. package/dist/js/components/Menu/MenuGroup.js.map +1 -1
  38. package/dist/js/components/Nav/Nav.d.ts +1 -1
  39. package/dist/js/components/Nav/Nav.d.ts.map +1 -1
  40. package/dist/js/components/OptionsMenu/OptionsMenuItemGroup.js +2 -2
  41. package/dist/js/components/OptionsMenu/OptionsMenuItemGroup.js.map +1 -1
  42. package/dist/js/components/OptionsMenu/OptionsMenuToggleWithText.d.ts.map +1 -1
  43. package/dist/js/components/OptionsMenu/OptionsMenuToggleWithText.js +4 -3
  44. package/dist/js/components/OptionsMenu/OptionsMenuToggleWithText.js.map +1 -1
  45. package/dist/js/components/Page/PageHeader.d.ts +2 -0
  46. package/dist/js/components/Page/PageHeader.d.ts.map +1 -1
  47. package/dist/js/components/Page/PageHeader.js +2 -2
  48. package/dist/js/components/Page/PageHeader.js.map +1 -1
  49. package/dist/js/components/Page/PageSidebar.d.ts +2 -0
  50. package/dist/js/components/Page/PageSidebar.d.ts.map +1 -1
  51. package/dist/js/components/Page/PageSidebar.js +3 -3
  52. package/dist/js/components/Page/PageSidebar.js.map +1 -1
  53. package/dist/js/components/Page/PageToggleButton.d.ts +2 -0
  54. package/dist/js/components/Page/PageToggleButton.d.ts.map +1 -1
  55. package/dist/js/components/Page/PageToggleButton.js +2 -2
  56. package/dist/js/components/Page/PageToggleButton.js.map +1 -1
  57. package/dist/js/components/Tabs/TabContent.d.ts.map +1 -1
  58. package/dist/js/components/Tabs/TabContent.js +4 -2
  59. package/dist/js/components/Tabs/TabContent.js.map +1 -1
  60. package/dist/umd/react-core.css +227 -227
  61. package/dist/umd/react-core.js +20 -18
  62. package/dist/umd/react-core.min.js +2 -2
  63. package/package.json +5 -5
  64. package/src/components/Alert/Alert.tsx +0 -2
  65. package/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +0 -35
  66. package/src/components/Masthead/examples/Masthead.md +3 -3
  67. package/src/components/Menu/MenuGroup.tsx +5 -2
  68. package/src/components/Menu/examples/Menu.md +25 -25
  69. package/src/components/Menu/examples/MenuDrilldown.tsx +9 -9
  70. package/src/components/Menu/examples/MenuDrilldownInitialState.tsx +15 -12
  71. package/src/components/Menu/examples/MenuDrilldownSubmenuFunctions.tsx +9 -9
  72. package/src/components/Nav/Nav.tsx +1 -1
  73. package/src/components/Nav/examples/Nav.md +57 -57
  74. package/src/components/Nav/examples/NavDrilldown.tsx +1 -1
  75. package/src/components/OptionsMenu/OptionsMenuItemGroup.tsx +2 -2
  76. package/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx +29 -24
  77. package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap +2 -0
  78. package/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap +5 -1
  79. package/src/components/OptionsMenu/examples/OptionsMenu.md +11 -11
  80. package/src/components/Page/PageHeader.tsx +4 -1
  81. package/src/components/Page/PageSidebar.tsx +5 -2
  82. package/src/components/Page/PageToggleButton.tsx +4 -1
  83. package/src/components/Page/examples/Page.md +23 -17
  84. package/src/components/Page/examples/page.css +3 -0
  85. package/src/components/Select/examples/Select.md +10 -10
  86. package/src/components/Tabs/TabContent.tsx +2 -1
  87. package/src/components/Tabs/examples/Tabs.md +139 -143
  88. package/src/components/Tabs/examples/TabsDynamic.tsx +1 -0
  89. package/src/components/ToggleGroup/examples/ToggleGroup.md +16 -16
  90. package/src/components/TreeView/examples/TreeView.md +165 -165
@@ -3381,89 +3381,6 @@ label.pf-c-check, .pf-c-check__label,
3381
3381
  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3382
3382
  }
3383
3383
 
3384
- .pf-c-chip-group {
3385
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3386
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3387
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3388
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3389
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3390
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3391
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3392
- }
3393
-
3394
- .pf-c-chip-group {
3395
- color: var(--pf-global--Color--100);
3396
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3397
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3398
- --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3399
- --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3400
- --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3401
- --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3402
- --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3403
- --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3404
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3405
- --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3406
- --pf-c-chip-group__label--MaxWidth: 18ch;
3407
- --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3408
- --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3409
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3410
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3411
- max-width: 100%;
3412
- }
3413
-
3414
- .pf-c-chip-group.pf-m-category {
3415
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3416
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3417
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3418
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3419
- background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3420
- border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3421
- }
3422
-
3423
- .pf-c-chip-group__main {
3424
- display: flex;
3425
- flex: 1;
3426
- flex-wrap: wrap;
3427
- align-items: baseline;
3428
- min-width: 0;
3429
- }
3430
-
3431
- .pf-c-chip-group__list {
3432
- margin-right: var(--pf-c-chip-group__list--MarginRight);
3433
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3434
- }
3435
-
3436
- .pf-c-chip-group,
3437
- .pf-c-chip-group__list {
3438
- display: inline-flex;
3439
- flex-wrap: wrap;
3440
- align-items: center;
3441
- min-width: 0;
3442
- }
3443
-
3444
- .pf-c-chip-group__list-item {
3445
- display: inline-flex;
3446
- min-width: 0;
3447
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3448
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3449
- }
3450
-
3451
- .pf-c-chip-group__label {
3452
- overflow: hidden;
3453
- text-overflow: ellipsis;
3454
- white-space: nowrap;
3455
- max-width: var(--pf-c-chip-group__label--MaxWidth);
3456
- margin-right: var(--pf-c-chip-group__label--MarginRight);
3457
- font-size: var(--pf-c-chip-group__label--FontSize);
3458
- }
3459
-
3460
- .pf-c-chip-group__close {
3461
- display: flex;
3462
- align-self: flex-start;
3463
- margin-top: var(--pf-c-chip-group__close--MarginTop);
3464
- margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3465
- }
3466
-
3467
3384
  .pf-c-clipboard-copy {
3468
3385
  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3469
3386
  --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -3574,6 +3491,89 @@ label.pf-c-check, .pf-c-check__label,
3574
3491
  border: 0;
3575
3492
  }
3576
3493
 
3494
+ .pf-c-chip-group {
3495
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3496
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3497
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3498
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3499
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3500
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3501
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3502
+ }
3503
+
3504
+ .pf-c-chip-group {
3505
+ color: var(--pf-global--Color--100);
3506
+ --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3507
+ --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3508
+ --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3509
+ --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3510
+ --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3511
+ --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3512
+ --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3513
+ --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3514
+ --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3515
+ --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3516
+ --pf-c-chip-group__label--MaxWidth: 18ch;
3517
+ --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3518
+ --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3519
+ --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3520
+ --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3521
+ max-width: 100%;
3522
+ }
3523
+
3524
+ .pf-c-chip-group.pf-m-category {
3525
+ padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3526
+ padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3527
+ padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3528
+ padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3529
+ background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3530
+ border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3531
+ }
3532
+
3533
+ .pf-c-chip-group__main {
3534
+ display: flex;
3535
+ flex: 1;
3536
+ flex-wrap: wrap;
3537
+ align-items: baseline;
3538
+ min-width: 0;
3539
+ }
3540
+
3541
+ .pf-c-chip-group__list {
3542
+ margin-right: var(--pf-c-chip-group__list--MarginRight);
3543
+ margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3544
+ }
3545
+
3546
+ .pf-c-chip-group,
3547
+ .pf-c-chip-group__list {
3548
+ display: inline-flex;
3549
+ flex-wrap: wrap;
3550
+ align-items: center;
3551
+ min-width: 0;
3552
+ }
3553
+
3554
+ .pf-c-chip-group__list-item {
3555
+ display: inline-flex;
3556
+ min-width: 0;
3557
+ margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3558
+ margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3559
+ }
3560
+
3561
+ .pf-c-chip-group__label {
3562
+ overflow: hidden;
3563
+ text-overflow: ellipsis;
3564
+ white-space: nowrap;
3565
+ max-width: var(--pf-c-chip-group__label--MaxWidth);
3566
+ margin-right: var(--pf-c-chip-group__label--MarginRight);
3567
+ font-size: var(--pf-c-chip-group__label--FontSize);
3568
+ }
3569
+
3570
+ .pf-c-chip-group__close {
3571
+ display: flex;
3572
+ align-self: flex-start;
3573
+ margin-top: var(--pf-c-chip-group__close--MarginTop);
3574
+ margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3575
+ }
3576
+
3577
3577
  .pf-c-code-block {
3578
3578
  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
3579
3579
  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -10081,6 +10081,150 @@ label.pf-c-input-group__text {
10081
10081
  --pf-c-sidebar__panel--FlexBasis: 100%;
10082
10082
  }
10083
10083
  }
10084
+ .pf-c-label-group {
10085
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10086
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10087
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10088
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10089
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10090
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10091
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10092
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10093
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10094
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10095
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10096
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10097
+ --pf-c-label-group__label--MarginBottom: 0;
10098
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10099
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10100
+ --pf-c-label-group__label--MaxWidth: 18ch;
10101
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10102
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10103
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10104
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10105
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10106
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10107
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10108
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10109
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10110
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
10111
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10112
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10113
+ --pf-c-label-group__textarea--PaddingBottom: 0;
10114
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10115
+ display: inline-flex;
10116
+ align-items: center;
10117
+ }
10118
+
10119
+ .pf-c-label-group.pf-m-category {
10120
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10121
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10122
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10123
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10124
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10125
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10126
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10127
+ }
10128
+
10129
+ .pf-c-label-group.pf-m-vertical {
10130
+ --pf-c-label-group__list--MarginRight: 0;
10131
+ --pf-c-label-group__list--MarginBottom: 0;
10132
+ --pf-c-label-group__list-item--MarginRight: 0;
10133
+ --pf-c-label-group__label--MarginRight: 0;
10134
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10135
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10136
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10137
+ --pf-c-label-group__close--MarginBottom: 0;
10138
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10139
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10140
+ }
10141
+
10142
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10143
+ align-items: flex-start;
10144
+ }
10145
+
10146
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10147
+ flex-direction: column;
10148
+ align-items: flex-start;
10149
+ }
10150
+
10151
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10152
+ flex-direction: column;
10153
+ }
10154
+
10155
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10156
+ --pf-c-label-group__list-item--MarginBottom: 0;
10157
+ }
10158
+
10159
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10160
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10161
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10162
+ }
10163
+
10164
+ .pf-c-label-group.pf-m-editable,
10165
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10166
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10167
+ display: flex;
10168
+ }
10169
+
10170
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10171
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10172
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10173
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10174
+ flex: 1;
10175
+ }
10176
+
10177
+ .pf-c-label-group__main {
10178
+ display: flex;
10179
+ flex: 1;
10180
+ flex-wrap: wrap;
10181
+ align-items: baseline;
10182
+ }
10183
+
10184
+ .pf-c-label-group__list {
10185
+ display: inline-flex;
10186
+ flex-wrap: wrap;
10187
+ margin-right: var(--pf-c-label-group__list--MarginRight);
10188
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10189
+ }
10190
+
10191
+ .pf-c-label-group__list-item {
10192
+ display: inline-flex;
10193
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
10194
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10195
+ }
10196
+
10197
+ .pf-c-label-group__label {
10198
+ overflow: hidden;
10199
+ text-overflow: ellipsis;
10200
+ white-space: nowrap;
10201
+ max-width: var(--pf-c-label-group__label--MaxWidth);
10202
+ margin-right: var(--pf-c-label-group__label--MarginRight);
10203
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10204
+ font-size: var(--pf-c-label-group__label--FontSize);
10205
+ }
10206
+
10207
+ .pf-c-label-group__close {
10208
+ margin-top: var(--pf-c-label-group__close--MarginTop);
10209
+ margin-right: var(--pf-c-label-group__close--MarginRight);
10210
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10211
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
10212
+ }
10213
+
10214
+ .pf-c-label-group__textarea {
10215
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
10216
+ padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10217
+ white-space: nowrap;
10218
+ resize: none;
10219
+ border: 0;
10220
+ -ms-overflow-style: none;
10221
+ scrollbar-width: none;
10222
+ }
10223
+
10224
+ .pf-c-label-group__textarea::-webkit-scrollbar {
10225
+ display: none;
10226
+ }
10227
+
10084
10228
  .pf-c-label {
10085
10229
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10086
10230
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -10544,150 +10688,6 @@ button.pf-c-label__content:focus {
10544
10688
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10545
10689
  }
10546
10690
 
10547
- .pf-c-label-group {
10548
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10549
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
10550
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
10551
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
10552
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
10553
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
10554
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
10555
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
10556
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
10557
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
10558
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
10559
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
10560
- --pf-c-label-group__label--MarginBottom: 0;
10561
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
10562
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
10563
- --pf-c-label-group__label--MaxWidth: 18ch;
10564
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
10565
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
10566
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10567
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
10568
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
10569
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
10570
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
10571
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
10572
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
10573
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
10574
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
10575
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
10576
- --pf-c-label-group__textarea--PaddingBottom: 0;
10577
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
10578
- display: inline-flex;
10579
- align-items: center;
10580
- }
10581
-
10582
- .pf-c-label-group.pf-m-category {
10583
- padding-top: var(--pf-c-label-group--m-category--PaddingTop);
10584
- padding-right: var(--pf-c-label-group--m-category--PaddingRight);
10585
- padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
10586
- padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
10587
- background-color: var(--pf-c-label-group--m-category--BackgroundColor);
10588
- border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
10589
- border-radius: var(--pf-c-label-group--m-category--BorderRadius);
10590
- }
10591
-
10592
- .pf-c-label-group.pf-m-vertical {
10593
- --pf-c-label-group__list--MarginRight: 0;
10594
- --pf-c-label-group__list--MarginBottom: 0;
10595
- --pf-c-label-group__list-item--MarginRight: 0;
10596
- --pf-c-label-group__label--MarginRight: 0;
10597
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
10598
- --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
10599
- --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
10600
- --pf-c-label-group__close--MarginBottom: 0;
10601
- --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
10602
- --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
10603
- }
10604
-
10605
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
10606
- align-items: flex-start;
10607
- }
10608
-
10609
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
10610
- flex-direction: column;
10611
- align-items: flex-start;
10612
- }
10613
-
10614
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
10615
- flex-direction: column;
10616
- }
10617
-
10618
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
10619
- --pf-c-label-group__list-item--MarginBottom: 0;
10620
- }
10621
-
10622
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
10623
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
10624
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
10625
- }
10626
-
10627
- .pf-c-label-group.pf-m-editable,
10628
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10629
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
10630
- display: flex;
10631
- }
10632
-
10633
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
10634
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
10635
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
10636
- .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
10637
- flex: 1;
10638
- }
10639
-
10640
- .pf-c-label-group__main {
10641
- display: flex;
10642
- flex: 1;
10643
- flex-wrap: wrap;
10644
- align-items: baseline;
10645
- }
10646
-
10647
- .pf-c-label-group__list {
10648
- display: inline-flex;
10649
- flex-wrap: wrap;
10650
- margin-right: var(--pf-c-label-group__list--MarginRight);
10651
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
10652
- }
10653
-
10654
- .pf-c-label-group__list-item {
10655
- display: inline-flex;
10656
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
10657
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
10658
- }
10659
-
10660
- .pf-c-label-group__label {
10661
- overflow: hidden;
10662
- text-overflow: ellipsis;
10663
- white-space: nowrap;
10664
- max-width: var(--pf-c-label-group__label--MaxWidth);
10665
- margin-right: var(--pf-c-label-group__label--MarginRight);
10666
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
10667
- font-size: var(--pf-c-label-group__label--FontSize);
10668
- }
10669
-
10670
- .pf-c-label-group__close {
10671
- margin-top: var(--pf-c-label-group__close--MarginTop);
10672
- margin-right: var(--pf-c-label-group__close--MarginRight);
10673
- margin-bottom: var(--pf-c-label-group__close--MarginBottom);
10674
- margin-left: var(--pf-c-label-group__close--MarginLeft);
10675
- }
10676
-
10677
- .pf-c-label-group__textarea {
10678
- min-width: var(--pf-c-label-group__textarea--MinWidth);
10679
- padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
10680
- white-space: nowrap;
10681
- resize: none;
10682
- border: 0;
10683
- -ms-overflow-style: none;
10684
- scrollbar-width: none;
10685
- }
10686
-
10687
- .pf-c-label-group__textarea::-webkit-scrollbar {
10688
- display: none;
10689
- }
10690
-
10691
10691
  .pf-c-list {
10692
10692
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
10693
10693
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);
@@ -4961,7 +4961,7 @@
4961
4961
  AlertVariant["default"] = "default";
4962
4962
  })(exports.AlertVariant || (exports.AlertVariant = {}));
4963
4963
  const Alert = (_a) => {
4964
- var { variant = exports.AlertVariant.default, isInline = false, isPlain = false, isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, actionClose, actionLinks, title, titleHeadingLevel: TitleHeadingLevel = 'h4', children = '', className = '', ouiaId, ouiaSafe = true, timeout = false, timeoutAnimation = 3000, onTimeout = () => { }, truncateTitle = 0, tooltipPosition, customIcon, isExpandable = false, toggleAriaLabel = `${capitalize(variant)} alert details`, onMouseEnter = () => { }, onMouseLeave = () => { } } = _a, props = __rest$1(_a, ["variant", "isInline", "isPlain", "isLiveRegion", "variantLabel", 'aria-label', "actionClose", "actionLinks", "title", "titleHeadingLevel", "children", "className", "ouiaId", "ouiaSafe", "timeout", "timeoutAnimation", "onTimeout", "truncateTitle", "tooltipPosition", "customIcon", "isExpandable", "toggleAriaLabel", "onMouseEnter", "onMouseLeave"]);
4964
+ var { variant = exports.AlertVariant.default, isInline = false, isPlain = false, isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, actionClose, actionLinks, title, titleHeadingLevel: TitleHeadingLevel = 'h4', children = '', className = '', ouiaId, ouiaSafe = true, timeout = false, timeoutAnimation = 3000, onTimeout = () => { }, truncateTitle = 0, tooltipPosition, customIcon, isExpandable = false, toggleAriaLabel = `${capitalize(variant)} alert details`, onMouseEnter = () => { }, onMouseLeave = () => { } } = _a, props = __rest$1(_a, ["variant", "isInline", "isPlain", "isLiveRegion", "variantLabel", "actionClose", "actionLinks", "title", "titleHeadingLevel", "children", "className", "ouiaId", "ouiaSafe", "timeout", "timeoutAnimation", "onTimeout", "truncateTitle", "tooltipPosition", "customIcon", "isExpandable", "toggleAriaLabel", "onMouseEnter", "onMouseLeave"]);
4965
4965
  const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
4966
4966
  const getHeadingContent = (React__namespace.createElement(React__namespace.Fragment, null,
4967
4967
  React__namespace.createElement("span", { className: css(a11yStyles.screenReader) }, variantLabel),
@@ -5032,7 +5032,7 @@
5032
5032
  return null;
5033
5033
  }
5034
5034
  const Title = (React__namespace.createElement(TitleHeadingLevel, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles$19.alertTitle, truncateTitle && styles$19.modifiers.truncate) }), getHeadingContent));
5035
- return (React__namespace.createElement("div", Object.assign({ ref: divRef, className: css(styles$19.alert, isInline && styles$19.modifiers.inline, isPlain && styles$19.modifiers.plain, isExpandable && styles$19.modifiers.expandable, isExpanded && styles$19.modifiers.expanded, styles$19.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
5035
+ return (React__namespace.createElement("div", Object.assign({ ref: divRef, className: css(styles$19.alert, isInline && styles$19.modifiers.inline, isPlain && styles$19.modifiers.plain, isExpandable && styles$19.modifiers.expandable, isExpanded && styles$19.modifiers.expanded, styles$19.modifiers[variant], className) }, ouiaProps, (isLiveRegion && {
5036
5036
  'aria-live': 'polite',
5037
5037
  'aria-atomic': 'false'
5038
5038
  }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, props),
@@ -15624,9 +15624,9 @@
15624
15624
  MenuInput.displayName = 'MenuInput';
15625
15625
 
15626
15626
  const MenuGroupBase = (_a) => {
15627
- var { children, className = '', label = '', titleId = '', innerRef } = _a, props = __rest$1(_a, ["children", "className", "label", "titleId", "innerRef"]);
15627
+ var { children, className = '', label = '', titleId = '', innerRef, labelHeadingLevel: HeadingLevel = 'h1' } = _a, props = __rest$1(_a, ["children", "className", "label", "titleId", "innerRef", "labelHeadingLevel"]);
15628
15628
  return (React__namespace.createElement("section", Object.assign({}, props, { className: css('pf-c-menu__group', className), ref: innerRef }),
15629
- label && (React__namespace.createElement("h1", { className: css(menuStyles.menuGroupTitle), id: titleId }, label)),
15629
+ label && (React__namespace.createElement(HeadingLevel, { className: css(menuStyles.menuGroupTitle), id: titleId }, label)),
15630
15630
  children));
15631
15631
  };
15632
15632
  const MenuGroup = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(MenuGroupBase, Object.assign({}, props, { innerRef: ref }))));
@@ -16679,11 +16679,11 @@
16679
16679
  };
16680
16680
  const PageSidebarContext = React__namespace.createContext(pageSidebarContextDefaults);
16681
16681
  const PageSidebar = (_a) => {
16682
- var { className = '', nav, isNavOpen = true, theme = 'dark' } = _a, props = __rest$1(_a, ["className", "nav", "isNavOpen", "theme"]);
16682
+ var { className = '', nav, isNavOpen = true, theme = 'dark', id = 'page-sidebar' } = _a, props = __rest$1(_a, ["className", "nav", "isNavOpen", "theme", "id"]);
16683
16683
  return (React__namespace.createElement(PageContextConsumer, null, ({ isManagedSidebar, isNavOpen: managedIsNavOpen }) => {
16684
16684
  const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
16685
- return (React__namespace.createElement("div", Object.assign({ id: "page-sidebar", className: css(styles$y.pageSidebar, theme === 'light' && styles$y.modifiers.light, navOpen && styles$y.modifiers.expanded, !navOpen && styles$y.modifiers.collapsed, className), "aria-hidden": !navOpen }, props),
16686
- React__namespace.createElement("div", { className: styles$y.pageSidebarBody },
16685
+ return (React__namespace.createElement("div", Object.assign({ id: id, className: css(styles$y.pageSidebar, theme === 'light' && styles$y.modifiers.light, navOpen && styles$y.modifiers.expanded, !navOpen && styles$y.modifiers.collapsed, className), "aria-hidden": !navOpen }, props),
16686
+ React__namespace.createElement("div", { className: css(styles$y.pageSidebarBody) },
16687
16687
  React__namespace.createElement(PageSidebarContext.Provider, { value: { isNavOpen: navOpen } }, nav))));
16688
16688
  }));
16689
16689
  };
@@ -17326,9 +17326,9 @@
17326
17326
 
17327
17327
  const OptionsMenuItemGroup = (_a) => {
17328
17328
  var { className = '', 'aria-label': ariaLabel = '', groupTitle = '', children = null, hasSeparator = false } = _a, props = __rest$1(_a, ["className", 'aria-label', "groupTitle", "children", "hasSeparator"]);
17329
- return (React__namespace.createElement("section", Object.assign({}, props, { className: css(styles$r.optionsMenuGroup) }),
17329
+ return (React__namespace.createElement("section", Object.assign({}, props, { className: css(styles$r.optionsMenuGroup), role: "none" }),
17330
17330
  groupTitle && React__namespace.createElement("h1", { className: css(styles$r.optionsMenuGroupTitle) }, groupTitle),
17331
- React__namespace.createElement("ul", { className: className, "aria-label": ariaLabel },
17331
+ React__namespace.createElement("ul", { className: className, "aria-label": ariaLabel, role: "group" },
17332
17332
  children,
17333
17333
  hasSeparator && React__namespace.createElement(Divider, { component: "li", role: "separator" }))));
17334
17334
  };
@@ -17400,10 +17400,10 @@
17400
17400
  buttonRef.current.focus();
17401
17401
  }
17402
17402
  };
17403
- return (React__namespace.createElement("div", Object.assign({ className: css(styles$r.optionsMenuToggle, styles$r.modifiers.text, isPlain && styles$r.modifiers.plain, isDisabled && styles$r.modifiers.disabled, isActive && styles$r.modifiers.active) }, props),
17403
+ return (React__namespace.createElement(DropdownContext.Consumer, null, ({ id: contextId }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$r.optionsMenuToggle, styles$r.modifiers.text, isPlain && styles$r.modifiers.plain, isDisabled && styles$r.modifiers.disabled, isActive && styles$r.modifiers.active) }, props),
17404
17404
  React__namespace.createElement("span", { className: css(styles$r.optionsMenuToggleText, toggleTextClassName) }, toggleText),
17405
- React__namespace.createElement("button", { className: css(styles$r.optionsMenuToggleButton, toggleButtonContentsClassName), id: `${parentId}-toggle`, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-expanded": isOpen, ref: buttonRef, disabled: isDisabled, onClick: () => onToggle(!isOpen), onKeyDown: onKeyDown },
17406
- React__namespace.createElement("span", { className: css(styles$r.optionsMenuToggleButtonIcon) }, toggleButtonContents))));
17405
+ React__namespace.createElement("button", { className: css(styles$r.optionsMenuToggleButton, toggleButtonContentsClassName), id: parentId ? `${parentId}-toggle` : `${contextId}-toggle`, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-expanded": isOpen, ref: buttonRef, disabled: isDisabled, onClick: () => onToggle(!isOpen), onKeyDown: onKeyDown },
17406
+ React__namespace.createElement("span", { className: css(styles$r.optionsMenuToggleButtonIcon) }, toggleButtonContents))))));
17407
17407
  };
17408
17408
  OptionsMenuToggleWithText.displayName = 'OptionsMenuToggleWithText';
17409
17409
 
@@ -17544,7 +17544,7 @@
17544
17544
  var BarsIcon$1 = BarsIcon;
17545
17545
 
17546
17546
  const PageHeader = (_a) => {
17547
- var { className = '', logo = null, logoProps = null, logoComponent = 'a', headerTools = null, topNav = null, isNavOpen = true, isManagedSidebar: deprecatedIsManagedSidebar = undefined, role = undefined, showNavToggle = false, onNavToggle = () => undefined, 'aria-label': ariaLabel = 'Global navigation', 'aria-controls': ariaControls = null } = _a, props = __rest$1(_a, ["className", "logo", "logoProps", "logoComponent", "headerTools", "topNav", "isNavOpen", "isManagedSidebar", "role", "showNavToggle", "onNavToggle", 'aria-label', 'aria-controls']);
17547
+ var { className = '', logo = null, logoProps = null, logoComponent = 'a', headerTools = null, topNav = null, isNavOpen = true, isManagedSidebar: deprecatedIsManagedSidebar = undefined, role = undefined, showNavToggle = false, navToggleId = 'nav-toggle', onNavToggle = () => undefined, 'aria-label': ariaLabel = 'Global navigation', 'aria-controls': ariaControls = null } = _a, props = __rest$1(_a, ["className", "logo", "logoProps", "logoComponent", "headerTools", "topNav", "isNavOpen", "isManagedSidebar", "role", "showNavToggle", "navToggleId", "onNavToggle", 'aria-label', 'aria-controls']);
17548
17548
  const LogoComponent = logoComponent;
17549
17549
  if ([false, true].includes(deprecatedIsManagedSidebar)) {
17550
17550
  console.warn('isManagedSidebar is deprecated in the PageHeader component. To make the sidebar toggle uncontrolled, pass this prop in the Page component');
@@ -17555,7 +17555,7 @@
17555
17555
  return (React__namespace.createElement("header", Object.assign({ role: role, className: css(styles$y.pageHeader, className) }, props),
17556
17556
  (showNavToggle || logo) && (React__namespace.createElement("div", { className: css(styles$y.pageHeaderBrand) },
17557
17557
  showNavToggle && (React__namespace.createElement("div", { className: css(styles$y.pageHeaderBrandToggle) },
17558
- React__namespace.createElement(Button, { id: "nav-toggle", onClick: navToggle, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": navOpen ? 'true' : 'false', variant: exports.ButtonVariant.plain },
17558
+ React__namespace.createElement(Button, { id: navToggleId, onClick: navToggle, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": navOpen ? 'true' : 'false', variant: exports.ButtonVariant.plain },
17559
17559
  React__namespace.createElement(BarsIcon$1, null)))),
17560
17560
  logo && (React__namespace.createElement(LogoComponent, Object.assign({ className: css(styles$y.pageHeaderBrandLink) }, logoProps), logo)))),
17561
17561
  topNav && React__namespace.createElement("div", { className: css(styles$y.pageHeaderNav) }, topNav),
@@ -17631,11 +17631,11 @@
17631
17631
  PageNavigation.displayName = 'PageNavigation';
17632
17632
 
17633
17633
  const PageToggleButton = (_a) => {
17634
- var { children, isNavOpen = true, onNavToggle = () => undefined } = _a, props = __rest$1(_a, ["children", "isNavOpen", "onNavToggle"]);
17634
+ var { children, isNavOpen = true, onNavToggle = () => undefined, id = 'nav-toggle' } = _a, props = __rest$1(_a, ["children", "isNavOpen", "onNavToggle", "id"]);
17635
17635
  return (React__namespace.createElement(PageContextConsumer, null, ({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }) => {
17636
17636
  const navToggle = isManagedSidebar ? managedOnNavToggle : onNavToggle;
17637
17637
  const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
17638
- return (React__namespace.createElement(Button, Object.assign({ id: "nav-toggle", onClick: navToggle, "aria-label": "Side navigation toggle", "aria-expanded": navOpen ? 'true' : 'false', variant: exports.ButtonVariant.plain }, props), children));
17638
+ return (React__namespace.createElement(Button, Object.assign({ id: id, onClick: navToggle, "aria-label": "Side navigation toggle", "aria-expanded": navOpen ? 'true' : 'false', variant: exports.ButtonVariant.plain }, props), children));
17639
17639
  }));
17640
17640
  };
17641
17641
  PageToggleButton.displayName = 'PageToggleButton';
@@ -19188,14 +19188,16 @@
19188
19188
  light300: styles$e.modifiers.light_300
19189
19189
  };
19190
19190
  const TabContentBase = (_a) => {
19191
- var { id, activeKey, 'aria-label': ariaLabel, child, children, className, eventKey, innerRef, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "activeKey", 'aria-label', "child", "children", "className", "eventKey", "innerRef", "ouiaId", "ouiaSafe"]);
19191
+ var { id, activeKey, 'aria-label': ariaLabel, child, children, className,
19192
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
19193
+ eventKey, innerRef, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "activeKey", 'aria-label', "child", "children", "className", "eventKey", "innerRef", "ouiaId", "ouiaSafe"]);
19192
19194
  if (children || child) {
19193
19195
  let labelledBy;
19194
19196
  if (ariaLabel) {
19195
19197
  labelledBy = null;
19196
19198
  }
19197
19199
  else {
19198
- labelledBy = children ? `pf-tab-${eventKey}-${id}` : `pf-tab-${child.props.eventKey}-${id}`;
19200
+ labelledBy = children ? `${id}` : `pf-tab-${child.props.eventKey}-${id}`;
19199
19201
  }
19200
19202
  return (React__namespace.createElement(TabsContextConsumer, null, ({ variant }) => (React__namespace.createElement("section", Object.assign({ ref: innerRef, hidden: children ? null : child.props.eventKey !== activeKey, className: children
19201
19203
  ? css('pf-c-tab-content', className, variantStyle$1[variant])