@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.
- package/CHANGELOG.md +27 -0
- package/dist/esm/components/Alert/Alert.d.ts.map +1 -1
- package/dist/esm/components/Alert/Alert.js +2 -2
- package/dist/esm/components/Alert/Alert.js.map +1 -1
- package/dist/esm/components/Menu/MenuGroup.d.ts +3 -1
- package/dist/esm/components/Menu/MenuGroup.d.ts.map +1 -1
- package/dist/esm/components/Menu/MenuGroup.js +2 -2
- package/dist/esm/components/Menu/MenuGroup.js.map +1 -1
- package/dist/esm/components/Nav/Nav.d.ts +1 -1
- package/dist/esm/components/Nav/Nav.d.ts.map +1 -1
- package/dist/esm/components/OptionsMenu/OptionsMenuItemGroup.js +2 -2
- package/dist/esm/components/OptionsMenu/OptionsMenuItemGroup.js.map +1 -1
- package/dist/esm/components/OptionsMenu/OptionsMenuToggleWithText.d.ts.map +1 -1
- package/dist/esm/components/OptionsMenu/OptionsMenuToggleWithText.js +4 -3
- package/dist/esm/components/OptionsMenu/OptionsMenuToggleWithText.js.map +1 -1
- package/dist/esm/components/Page/PageHeader.d.ts +2 -0
- package/dist/esm/components/Page/PageHeader.d.ts.map +1 -1
- package/dist/esm/components/Page/PageHeader.js +2 -2
- package/dist/esm/components/Page/PageHeader.js.map +1 -1
- package/dist/esm/components/Page/PageSidebar.d.ts +2 -0
- package/dist/esm/components/Page/PageSidebar.d.ts.map +1 -1
- package/dist/esm/components/Page/PageSidebar.js +3 -3
- package/dist/esm/components/Page/PageSidebar.js.map +1 -1
- package/dist/esm/components/Page/PageToggleButton.d.ts +2 -0
- package/dist/esm/components/Page/PageToggleButton.d.ts.map +1 -1
- package/dist/esm/components/Page/PageToggleButton.js +2 -2
- package/dist/esm/components/Page/PageToggleButton.js.map +1 -1
- package/dist/esm/components/Tabs/TabContent.d.ts.map +1 -1
- package/dist/esm/components/Tabs/TabContent.js +4 -2
- package/dist/esm/components/Tabs/TabContent.js.map +1 -1
- package/dist/js/components/Alert/Alert.d.ts.map +1 -1
- package/dist/js/components/Alert/Alert.js +2 -2
- package/dist/js/components/Alert/Alert.js.map +1 -1
- package/dist/js/components/Menu/MenuGroup.d.ts +3 -1
- package/dist/js/components/Menu/MenuGroup.d.ts.map +1 -1
- package/dist/js/components/Menu/MenuGroup.js +2 -2
- package/dist/js/components/Menu/MenuGroup.js.map +1 -1
- package/dist/js/components/Nav/Nav.d.ts +1 -1
- package/dist/js/components/Nav/Nav.d.ts.map +1 -1
- package/dist/js/components/OptionsMenu/OptionsMenuItemGroup.js +2 -2
- package/dist/js/components/OptionsMenu/OptionsMenuItemGroup.js.map +1 -1
- package/dist/js/components/OptionsMenu/OptionsMenuToggleWithText.d.ts.map +1 -1
- package/dist/js/components/OptionsMenu/OptionsMenuToggleWithText.js +4 -3
- package/dist/js/components/OptionsMenu/OptionsMenuToggleWithText.js.map +1 -1
- package/dist/js/components/Page/PageHeader.d.ts +2 -0
- package/dist/js/components/Page/PageHeader.d.ts.map +1 -1
- package/dist/js/components/Page/PageHeader.js +2 -2
- package/dist/js/components/Page/PageHeader.js.map +1 -1
- package/dist/js/components/Page/PageSidebar.d.ts +2 -0
- package/dist/js/components/Page/PageSidebar.d.ts.map +1 -1
- package/dist/js/components/Page/PageSidebar.js +3 -3
- package/dist/js/components/Page/PageSidebar.js.map +1 -1
- package/dist/js/components/Page/PageToggleButton.d.ts +2 -0
- package/dist/js/components/Page/PageToggleButton.d.ts.map +1 -1
- package/dist/js/components/Page/PageToggleButton.js +2 -2
- package/dist/js/components/Page/PageToggleButton.js.map +1 -1
- package/dist/js/components/Tabs/TabContent.d.ts.map +1 -1
- package/dist/js/components/Tabs/TabContent.js +4 -2
- package/dist/js/components/Tabs/TabContent.js.map +1 -1
- package/dist/umd/react-core.css +227 -227
- package/dist/umd/react-core.js +20 -18
- package/dist/umd/react-core.min.js +2 -2
- package/package.json +5 -5
- package/src/components/Alert/Alert.tsx +0 -2
- package/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +0 -35
- package/src/components/Masthead/examples/Masthead.md +3 -3
- package/src/components/Menu/MenuGroup.tsx +5 -2
- package/src/components/Menu/examples/Menu.md +25 -25
- package/src/components/Menu/examples/MenuDrilldown.tsx +9 -9
- package/src/components/Menu/examples/MenuDrilldownInitialState.tsx +15 -12
- package/src/components/Menu/examples/MenuDrilldownSubmenuFunctions.tsx +9 -9
- package/src/components/Nav/Nav.tsx +1 -1
- package/src/components/Nav/examples/Nav.md +57 -57
- package/src/components/Nav/examples/NavDrilldown.tsx +1 -1
- package/src/components/OptionsMenu/OptionsMenuItemGroup.tsx +2 -2
- package/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx +29 -24
- package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap +2 -0
- package/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap +5 -1
- package/src/components/OptionsMenu/examples/OptionsMenu.md +11 -11
- package/src/components/Page/PageHeader.tsx +4 -1
- package/src/components/Page/PageSidebar.tsx +5 -2
- package/src/components/Page/PageToggleButton.tsx +4 -1
- package/src/components/Page/examples/Page.md +23 -17
- package/src/components/Page/examples/page.css +3 -0
- package/src/components/Select/examples/Select.md +10 -10
- package/src/components/Tabs/TabContent.tsx +2 -1
- package/src/components/Tabs/examples/Tabs.md +139 -143
- package/src/components/Tabs/examples/TabsDynamic.tsx +1 -0
- package/src/components/ToggleGroup/examples/ToggleGroup.md +16 -16
- package/src/components/TreeView/examples/TreeView.md +165 -165
package/dist/umd/react-core.css
CHANGED
|
@@ -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);
|
package/dist/umd/react-core.js
CHANGED
|
@@ -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:`,
|
|
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)
|
|
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(
|
|
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:
|
|
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:
|
|
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:
|
|
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,
|
|
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 ?
|
|
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])
|