@patternfly/react-core 4.225.5 → 4.225.8

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 (50) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/Dropdown/DropdownItem.d.ts +1 -1
  3. package/dist/esm/components/Dropdown/DropdownItem.d.ts.map +1 -1
  4. package/dist/esm/components/Dropdown/DropdownItem.js +3 -3
  5. package/dist/esm/components/Dropdown/DropdownItem.js.map +1 -1
  6. package/dist/esm/components/Dropdown/InternalDropdownItem.d.ts +0 -2
  7. package/dist/esm/components/Dropdown/InternalDropdownItem.d.ts.map +1 -1
  8. package/dist/esm/components/Dropdown/InternalDropdownItem.js +1 -2
  9. package/dist/esm/components/Dropdown/InternalDropdownItem.js.map +1 -1
  10. package/dist/esm/components/Switch/Switch.d.ts.map +1 -1
  11. package/dist/esm/components/Switch/Switch.js +1 -1
  12. package/dist/esm/components/Switch/Switch.js.map +1 -1
  13. package/dist/esm/components/TreeView/TreeView.d.ts +1 -1
  14. package/dist/esm/components/TreeView/TreeView.d.ts.map +1 -1
  15. package/dist/esm/components/TreeView/TreeViewListItem.d.ts +1 -1
  16. package/dist/esm/components/TreeView/TreeViewListItem.d.ts.map +1 -1
  17. package/dist/esm/components/TreeView/TreeViewListItem.js +1 -1
  18. package/dist/esm/components/TreeView/TreeViewListItem.js.map +1 -1
  19. package/dist/js/components/Dropdown/DropdownItem.d.ts +1 -1
  20. package/dist/js/components/Dropdown/DropdownItem.d.ts.map +1 -1
  21. package/dist/js/components/Dropdown/DropdownItem.js +3 -3
  22. package/dist/js/components/Dropdown/DropdownItem.js.map +1 -1
  23. package/dist/js/components/Dropdown/InternalDropdownItem.d.ts +0 -2
  24. package/dist/js/components/Dropdown/InternalDropdownItem.d.ts.map +1 -1
  25. package/dist/js/components/Dropdown/InternalDropdownItem.js +1 -2
  26. package/dist/js/components/Dropdown/InternalDropdownItem.js.map +1 -1
  27. package/dist/js/components/Switch/Switch.d.ts.map +1 -1
  28. package/dist/js/components/Switch/Switch.js +1 -1
  29. package/dist/js/components/Switch/Switch.js.map +1 -1
  30. package/dist/js/components/TreeView/TreeView.d.ts +1 -1
  31. package/dist/js/components/TreeView/TreeView.d.ts.map +1 -1
  32. package/dist/js/components/TreeView/TreeViewListItem.d.ts +1 -1
  33. package/dist/js/components/TreeView/TreeViewListItem.d.ts.map +1 -1
  34. package/dist/js/components/TreeView/TreeViewListItem.js +1 -1
  35. package/dist/js/components/TreeView/TreeViewListItem.js.map +1 -1
  36. package/dist/styles/base-no-reset.css +1 -0
  37. package/dist/styles/base.css +1 -0
  38. package/dist/umd/react-core.css +253 -234
  39. package/dist/umd/react-core.js +9 -7
  40. package/dist/umd/react-core.min.css +26 -7
  41. package/dist/umd/react-core.min.js +2 -2
  42. package/package.json +6 -6
  43. package/src/components/Button/examples/ButtonProgress.tsx +11 -17
  44. package/src/components/Dropdown/DropdownItem.tsx +1 -3
  45. package/src/components/Dropdown/InternalDropdownItem.tsx +0 -4
  46. package/src/components/Switch/Switch.tsx +2 -3
  47. package/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap +1 -1
  48. package/src/components/Switch/examples/Switch.md +10 -2
  49. package/src/components/TreeView/TreeView.tsx +1 -1
  50. package/src/components/TreeView/TreeViewListItem.tsx +3 -3
@@ -3381,6 +3381,89 @@ 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
+
3384
3467
  .pf-c-clipboard-copy {
3385
3468
  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3386
3469
  --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -3491,89 +3574,6 @@ label.pf-c-check, .pf-c-check__label,
3491
3574
  border: 0;
3492
3575
  }
3493
3576
 
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);
@@ -6626,7 +6626,7 @@ label.pf-c-check, .pf-c-check__label,
6626
6626
  }
6627
6627
 
6628
6628
  .pf-c-drawer__body > .pf-c-page__main {
6629
- min-height: 100%;
6629
+ height: 100%;
6630
6630
  }
6631
6631
 
6632
6632
  .pf-c-drawer__splitter {
@@ -10081,150 +10081,6 @@ 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
-
10228
10084
  .pf-c-label {
10229
10085
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
10230
10086
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -10688,6 +10544,150 @@ button.pf-c-label__content:focus {
10688
10544
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
10689
10545
  }
10690
10546
 
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);
@@ -12205,6 +12205,7 @@ ul.pf-c-list {
12205
12205
  }
12206
12206
 
12207
12207
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
12208
+ display: none;
12208
12209
  visibility: hidden;
12209
12210
  }
12210
12211
 
@@ -15396,6 +15397,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15396
15397
  --pf-c-page__sidebar--Width: 18.125rem;
15397
15398
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
15398
15399
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
15400
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
15401
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
15399
15402
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
15400
15403
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
15401
15404
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -15683,16 +15686,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15683
15686
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
15684
15687
  }
15685
15688
 
15686
- @media screen and (min-width: 1200px) {
15687
- .pf-c-page__sidebar {
15688
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
15689
- }
15690
- }
15691
15689
  .pf-c-page__sidebar.pf-m-expanded {
15692
15690
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
15693
15691
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
15694
15692
  }
15695
15693
 
15694
+ @media screen and (min-width: 1200px) {
15695
+ .pf-c-page__sidebar.pf-m-expanded {
15696
+ --pf-c-page__sidebar--BoxShadow: none;
15697
+ }
15698
+ }
15696
15699
  .pf-c-page__sidebar.pf-m-collapsed {
15697
15700
  max-width: 0;
15698
15701
  overflow: hidden;
@@ -15701,6 +15704,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
15701
15704
  .pf-c-page__sidebar.pf-m-light {
15702
15705
  color: var(--pf-global--Color--100);
15703
15706
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
15707
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
15704
15708
  }
15705
15709
 
15706
15710
  .pf-c-page__sidebar-body {
@@ -16283,6 +16287,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
16283
16287
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
16284
16288
  }
16285
16289
 
16290
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
16291
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
16292
+ }
16293
+
16286
16294
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
16287
16295
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
16288
16296
  }
@@ -22437,12 +22445,23 @@ svg.pf-c-spinner.pf-m-xl {
22437
22445
  --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
22438
22446
  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
22439
22447
  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
22448
+ --pf-c-number-input--c-form-control--width-icon: 0px;
22449
+ --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
22440
22450
  --pf-c-number-input--c-form-control--width-chars: 4;
22441
- --pf-c-number-input--c-form-control--Width: calc(var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch);
22451
+ --pf-c-number-input--c-form-control--Width:
22452
+ calc(
22453
+ calc(
22454
+ var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
22455
+ ) + var(--pf-c-number-input--c-form-control--width-icon)
22456
+ );
22442
22457
  display: inline-flex;
22443
22458
  align-items: center;
22444
22459
  }
22445
22460
 
22461
+ .pf-c-number-input.pf-m-status {
22462
+ --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
22463
+ }
22464
+
22446
22465
  .pf-c-number-input .pf-c-form-control {
22447
22466
  display: inline-flex;
22448
22467
  width: var(--pf-c-number-input--c-form-control--Width);
@@ -5572,7 +5572,7 @@
5572
5572
  }
5573
5573
  render() {
5574
5574
  /* eslint-disable @typescript-eslint/no-unused-vars */
5575
- const _a = this.props, { className, children, isHovered, context, onClick, component, role, isDisabled, isAriaDisabled, isPlainText, index, href, tooltip, tooltipProps, id, componentID, listItemClassName, additionalChild, customChild, enterTriggersArrowDown, icon, autoFocus, styleChildren, description, inoperableEvents } = _a, additionalProps = __rest$1(_a, ["className", "children", "isHovered", "context", "onClick", "component", "role", "isDisabled", "isAriaDisabled", "isPlainText", "index", "href", "tooltip", "tooltipProps", "id", "componentID", "listItemClassName", "additionalChild", "customChild", "enterTriggersArrowDown", "icon", "autoFocus", "styleChildren", "description", "inoperableEvents"]);
5575
+ const _a = this.props, { className, children, context, onClick, component, role, isDisabled, isAriaDisabled, isPlainText, index, href, tooltip, tooltipProps, id, componentID, listItemClassName, additionalChild, customChild, enterTriggersArrowDown, icon, autoFocus, styleChildren, description, inoperableEvents } = _a, additionalProps = __rest$1(_a, ["className", "children", "context", "onClick", "component", "role", "isDisabled", "isAriaDisabled", "isPlainText", "index", "href", "tooltip", "tooltipProps", "id", "componentID", "listItemClassName", "additionalChild", "customChild", "enterTriggersArrowDown", "icon", "autoFocus", "styleChildren", "description", "inoperableEvents"]);
5576
5576
  /* eslint-enable @typescript-eslint/no-unused-vars */
5577
5577
  let classes = css(icon && styles$15.modifiers.icon, isAriaDisabled && styles$15.modifiers.ariaDisabled, className);
5578
5578
  if (component === 'a') {
@@ -5623,7 +5623,6 @@
5623
5623
  InternalDropdownItem.displayName = 'InternalDropdownItem';
5624
5624
  InternalDropdownItem.defaultProps = {
5625
5625
  className: '',
5626
- isHovered: false,
5627
5626
  component: 'a',
5628
5627
  role: 'none',
5629
5628
  isDisabled: false,
@@ -5644,12 +5643,12 @@
5644
5643
  };
5645
5644
 
5646
5645
  const DropdownItem = (_a) => {
5647
- var { children, className, component = 'a', isDisabled = false, isAriaDisabled = false, isPlainText = false, isHovered = false, href, tooltip, tooltipProps = {}, listItemClassName, onClick,
5646
+ var { children, className, component = 'a', isDisabled = false, isAriaDisabled = false, isPlainText = false, href, tooltip, tooltipProps = {}, listItemClassName, onClick,
5648
5647
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
5649
5648
  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
5650
- additionalChild, customChild, tabIndex = -1, icon = null, autoFocus, description = null, styleChildren, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "component", "isDisabled", "isAriaDisabled", "isPlainText", "isHovered", "href", "tooltip", "tooltipProps", "listItemClassName", "onClick", "ref", "additionalChild", "customChild", "tabIndex", "icon", "autoFocus", "description", "styleChildren", "ouiaId", "ouiaSafe"]);
5649
+ additionalChild, customChild, tabIndex = -1, icon = null, autoFocus, description = null, styleChildren, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "component", "isDisabled", "isAriaDisabled", "isPlainText", "href", "tooltip", "tooltipProps", "listItemClassName", "onClick", "ref", "additionalChild", "customChild", "tabIndex", "icon", "autoFocus", "description", "styleChildren", "ouiaId", "ouiaSafe"]);
5651
5650
  const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
5652
- return (React__namespace.createElement(DropdownArrowContext.Consumer, null, context => (React__namespace.createElement(InternalDropdownItem, Object.assign({ context: context, role: "menuitem", tabIndex: tabIndex, className: className, component: component, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, isPlainText: isPlainText, isHovered: isHovered, href: href, tooltip: tooltip, tooltipProps: tooltipProps, listItemClassName: listItemClassName, onClick: onClick, additionalChild: additionalChild, customChild: customChild, icon: icon, autoFocus: autoFocus, styleChildren: styleChildren, description: description }, ouiaProps, props), children))));
5651
+ return (React__namespace.createElement(DropdownArrowContext.Consumer, null, context => (React__namespace.createElement(InternalDropdownItem, Object.assign({ context: context, role: "menuitem", tabIndex: tabIndex, className: className, component: component, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, isPlainText: isPlainText, href: href, tooltip: tooltip, tooltipProps: tooltipProps, listItemClassName: listItemClassName, onClick: onClick, additionalChild: additionalChild, customChild: customChild, icon: icon, autoFocus: autoFocus, styleChildren: styleChildren, description: description }, ouiaProps, props), children))));
5653
5652
  };
5654
5653
  DropdownItem.displayName = 'DropdownItem';
5655
5654
 
@@ -19004,7 +19003,7 @@
19004
19003
  id, className, label, labelOff, isChecked, defaultChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "defaultChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
19005
19004
  const isAriaLabelledBy = props['aria-label'] === '';
19006
19005
  return (React__namespace.createElement("label", Object.assign({ className: css(styles$g.switch, isReversed && styles$g.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
19007
- React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$g.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event) }, ([true, false].includes(defaultChecked) && { defaultChecked }), (![true, false].includes(defaultChecked) && { checked: isChecked }), { disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
19006
+ React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$g.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event) }, (defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked }), { disabled: isDisabled, "aria-labelledby": !isAriaLabelledBy ? null : `${this.id}-${isChecked !== true ? 'off' : 'on'}` }, props)),
19008
19007
  label !== undefined ? (React__namespace.createElement(React__namespace.Fragment, null,
19009
19008
  React__namespace.createElement("span", { className: css(styles$g.switchToggle) }, hasCheckIcon && (React__namespace.createElement("span", { className: css(styles$g.switchToggleIcon), "aria-hidden": "true" },
19010
19009
  React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true })))),
@@ -20500,6 +20499,9 @@
20500
20499
  var styles$a = {
20501
20500
  "formControl": "pf-c-form-control",
20502
20501
  "inputGroup": "pf-c-input-group",
20502
+ "modifiers": {
20503
+ "status": "pf-m-status"
20504
+ },
20503
20505
  "numberInput": "pf-c-number-input",
20504
20506
  "numberInputIcon": "pf-c-number-input__icon",
20505
20507
  "numberInputUnit": "pf-c-number-input__unit"
@@ -20609,7 +20611,7 @@
20609
20611
  React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeToggleIcon) },
20610
20612
  React__default["default"].createElement(AngleRightIcon$1, { "aria-hidden": "true" }))));
20611
20613
  const renderCheck = (randomId) => (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeCheck) },
20612
- React__default["default"].createElement("input", Object.assign({ type: "checkbox", onChange: (evt) => onCheck && onCheck(evt, itemData, parentItem), onClick: (evt) => evt.stopPropagation(), ref: elem => elem && (elem.indeterminate = checkProps.checked === null) }, checkProps, { checked: checkProps.checked === null ? false : checkProps.checked, id: randomId, tabIndex: -1 }))));
20614
+ React__default["default"].createElement("input", Object.assign({ type: "checkbox", onChange: evt => onCheck && onCheck(evt, itemData, parentItem), onClick: evt => evt.stopPropagation(), ref: elem => elem && (elem.indeterminate = checkProps.checked === null) }, checkProps, { checked: checkProps.checked === null ? false : checkProps.checked, id: randomId, tabIndex: -1 }))));
20613
20615
  const iconRendered = (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeIcon) },
20614
20616
  !internalIsExpanded && icon,
20615
20617
  internalIsExpanded && (expandedIcon || icon)));