@patternfly/react-core 4.217.1 → 4.217.4
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/ApplicationLauncher/ApplicationLauncher.d.ts +9 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
- package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
- package/dist/esm/components/ContextSelector/ContextSelector.d.ts +14 -1
- package/dist/esm/components/ContextSelector/ContextSelector.d.ts.map +1 -1
- package/dist/esm/components/ContextSelector/ContextSelector.js +4 -3
- package/dist/esm/components/ContextSelector/ContextSelector.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.d.ts +14 -1
- package/dist/esm/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js +2 -2
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/Dropdown/DropdownWithContext.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/DropdownWithContext.js +7 -3
- package/dist/esm/components/Dropdown/DropdownWithContext.js.map +1 -1
- package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts +9 -1
- package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
- package/dist/esm/components/OptionsMenu/OptionsMenu.js.map +1 -1
- package/dist/esm/components/Select/Select.d.ts +14 -1
- package/dist/esm/components/Select/Select.d.ts.map +1 -1
- package/dist/esm/components/Select/Select.js +7 -3
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Switch/Switch.d.ts +9 -3
- package/dist/esm/components/Switch/Switch.d.ts.map +1 -1
- package/dist/esm/components/Switch/Switch.js +2 -2
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/helpers/Popper/Popper.d.ts +1 -0
- package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
- package/dist/esm/helpers/Popper/Popper.js.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts +9 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
- package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
- package/dist/js/components/ContextSelector/ContextSelector.d.ts +14 -1
- package/dist/js/components/ContextSelector/ContextSelector.d.ts.map +1 -1
- package/dist/js/components/ContextSelector/ContextSelector.js +4 -3
- package/dist/js/components/ContextSelector/ContextSelector.js.map +1 -1
- package/dist/js/components/Dropdown/Dropdown.d.ts +14 -1
- package/dist/js/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/js/components/Dropdown/Dropdown.js +2 -2
- package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/js/components/Dropdown/DropdownWithContext.d.ts.map +1 -1
- package/dist/js/components/Dropdown/DropdownWithContext.js +7 -3
- package/dist/js/components/Dropdown/DropdownWithContext.js.map +1 -1
- package/dist/js/components/OptionsMenu/OptionsMenu.d.ts +9 -1
- package/dist/js/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
- package/dist/js/components/OptionsMenu/OptionsMenu.js.map +1 -1
- package/dist/js/components/Select/Select.d.ts +14 -1
- package/dist/js/components/Select/Select.d.ts.map +1 -1
- package/dist/js/components/Select/Select.js +7 -3
- package/dist/js/components/Select/Select.js.map +1 -1
- package/dist/js/components/Switch/Switch.d.ts +9 -3
- package/dist/js/components/Switch/Switch.d.ts.map +1 -1
- package/dist/js/components/Switch/Switch.js +2 -2
- package/dist/js/components/Switch/Switch.js.map +1 -1
- package/dist/js/helpers/Popper/Popper.d.ts +1 -0
- package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
- package/dist/js/helpers/Popper/Popper.js.map +1 -1
- package/dist/umd/react-core.css +69 -69
- package/dist/umd/react-core.js +22 -13
- package/dist/umd/react-core.min.js +2 -2
- package/package.json +5 -5
- package/src/components/ApplicationLauncher/ApplicationLauncher.tsx +11 -1
- package/src/components/ContextSelector/ContextSelector.tsx +23 -3
- package/src/components/Dropdown/Dropdown.tsx +20 -2
- package/src/components/Dropdown/DropdownWithContext.tsx +6 -1
- package/src/components/OptionsMenu/OptionsMenu.tsx +12 -1
- package/src/components/Select/Select.tsx +20 -2
- package/src/components/Switch/Switch.tsx +12 -4
- package/src/components/Switch/examples/Switch.md +2 -18
- package/src/helpers/Popper/Popper.tsx +1 -0
package/dist/umd/react-core.css
CHANGED
|
@@ -22642,75 +22642,6 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
22642
22642
|
direction: ltr;
|
|
22643
22643
|
}
|
|
22644
22644
|
}
|
|
22645
|
-
.pf-l-gallery {
|
|
22646
|
-
--pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
|
|
22647
|
-
--pf-l-gallery--GridTemplateColumns--min: 250px;
|
|
22648
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
|
|
22649
|
-
--pf-l-gallery--GridTemplateColumns--max: 1fr;
|
|
22650
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
|
|
22651
|
-
--pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
|
|
22652
|
-
--pf-l-gallery--GridTemplateRows: auto;
|
|
22653
|
-
display: grid;
|
|
22654
|
-
grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
|
|
22655
|
-
grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
|
|
22656
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
|
|
22657
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
|
|
22658
|
-
}
|
|
22659
|
-
|
|
22660
|
-
.pf-l-gallery.pf-m-gutter {
|
|
22661
|
-
grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
|
|
22662
|
-
}
|
|
22663
|
-
|
|
22664
|
-
@media (min-width: 576px) {
|
|
22665
|
-
.pf-l-gallery {
|
|
22666
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
|
|
22667
|
-
}
|
|
22668
|
-
}
|
|
22669
|
-
@media (min-width: 768px) {
|
|
22670
|
-
.pf-l-gallery {
|
|
22671
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
|
|
22672
|
-
}
|
|
22673
|
-
}
|
|
22674
|
-
@media (min-width: 992px) {
|
|
22675
|
-
.pf-l-gallery {
|
|
22676
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
|
|
22677
|
-
}
|
|
22678
|
-
}
|
|
22679
|
-
@media (min-width: 1200px) {
|
|
22680
|
-
.pf-l-gallery {
|
|
22681
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
|
|
22682
|
-
}
|
|
22683
|
-
}
|
|
22684
|
-
@media (min-width: 1450px) {
|
|
22685
|
-
.pf-l-gallery {
|
|
22686
|
-
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
|
|
22687
|
-
}
|
|
22688
|
-
}
|
|
22689
|
-
@media (min-width: 576px) {
|
|
22690
|
-
.pf-l-gallery {
|
|
22691
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
|
|
22692
|
-
}
|
|
22693
|
-
}
|
|
22694
|
-
@media (min-width: 768px) {
|
|
22695
|
-
.pf-l-gallery {
|
|
22696
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
|
|
22697
|
-
}
|
|
22698
|
-
}
|
|
22699
|
-
@media (min-width: 992px) {
|
|
22700
|
-
.pf-l-gallery {
|
|
22701
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
|
|
22702
|
-
}
|
|
22703
|
-
}
|
|
22704
|
-
@media (min-width: 1200px) {
|
|
22705
|
-
.pf-l-gallery {
|
|
22706
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
|
|
22707
|
-
}
|
|
22708
|
-
}
|
|
22709
|
-
@media (min-width: 1450px) {
|
|
22710
|
-
.pf-l-gallery {
|
|
22711
|
-
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
|
|
22712
|
-
}
|
|
22713
|
-
}
|
|
22714
22645
|
.pf-l-flex {
|
|
22715
22646
|
--pf-l-flex--Display: flex;
|
|
22716
22647
|
--pf-l-flex--FlexWrap: wrap;
|
|
@@ -24787,6 +24718,75 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
24787
24718
|
--pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
|
|
24788
24719
|
}
|
|
24789
24720
|
}
|
|
24721
|
+
.pf-l-gallery {
|
|
24722
|
+
--pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
|
|
24723
|
+
--pf-l-gallery--GridTemplateColumns--min: 250px;
|
|
24724
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
|
|
24725
|
+
--pf-l-gallery--GridTemplateColumns--max: 1fr;
|
|
24726
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
|
|
24727
|
+
--pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
|
|
24728
|
+
--pf-l-gallery--GridTemplateRows: auto;
|
|
24729
|
+
display: grid;
|
|
24730
|
+
grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
|
|
24731
|
+
grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
|
|
24732
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
|
|
24733
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
|
|
24734
|
+
}
|
|
24735
|
+
|
|
24736
|
+
.pf-l-gallery.pf-m-gutter {
|
|
24737
|
+
grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
|
|
24738
|
+
}
|
|
24739
|
+
|
|
24740
|
+
@media (min-width: 576px) {
|
|
24741
|
+
.pf-l-gallery {
|
|
24742
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
|
|
24743
|
+
}
|
|
24744
|
+
}
|
|
24745
|
+
@media (min-width: 768px) {
|
|
24746
|
+
.pf-l-gallery {
|
|
24747
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
|
|
24748
|
+
}
|
|
24749
|
+
}
|
|
24750
|
+
@media (min-width: 992px) {
|
|
24751
|
+
.pf-l-gallery {
|
|
24752
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
|
|
24753
|
+
}
|
|
24754
|
+
}
|
|
24755
|
+
@media (min-width: 1200px) {
|
|
24756
|
+
.pf-l-gallery {
|
|
24757
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
|
|
24758
|
+
}
|
|
24759
|
+
}
|
|
24760
|
+
@media (min-width: 1450px) {
|
|
24761
|
+
.pf-l-gallery {
|
|
24762
|
+
--pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
|
|
24763
|
+
}
|
|
24764
|
+
}
|
|
24765
|
+
@media (min-width: 576px) {
|
|
24766
|
+
.pf-l-gallery {
|
|
24767
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
|
|
24768
|
+
}
|
|
24769
|
+
}
|
|
24770
|
+
@media (min-width: 768px) {
|
|
24771
|
+
.pf-l-gallery {
|
|
24772
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
|
|
24773
|
+
}
|
|
24774
|
+
}
|
|
24775
|
+
@media (min-width: 992px) {
|
|
24776
|
+
.pf-l-gallery {
|
|
24777
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
|
|
24778
|
+
}
|
|
24779
|
+
}
|
|
24780
|
+
@media (min-width: 1200px) {
|
|
24781
|
+
.pf-l-gallery {
|
|
24782
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
|
|
24783
|
+
}
|
|
24784
|
+
}
|
|
24785
|
+
@media (min-width: 1450px) {
|
|
24786
|
+
.pf-l-gallery {
|
|
24787
|
+
--pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
|
|
24788
|
+
}
|
|
24789
|
+
}
|
|
24790
24790
|
.pf-l-grid {
|
|
24791
24791
|
--pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
|
|
24792
24792
|
--pf-l-grid__item--GridColumnStart: auto;
|
package/dist/umd/react-core.js
CHANGED
|
@@ -4827,7 +4827,7 @@
|
|
|
4827
4827
|
render() {
|
|
4828
4828
|
const _a = this.props, { children, className, direction, dropdownItems, isOpen, isPlain, isText, isGrouped, isFullHeight,
|
|
4829
4829
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4830
|
-
onSelect, position, toggle, autoFocus, menuAppendTo } = _a, props = __rest$1(_a, ["children", "className", "direction", "dropdownItems", "isOpen", "isPlain", "isText", "isGrouped", "isFullHeight", "onSelect", "position", "toggle", "autoFocus", "menuAppendTo"]);
|
|
4830
|
+
onSelect, position, toggle, autoFocus, menuAppendTo, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "className", "direction", "dropdownItems", "isOpen", "isPlain", "isText", "isGrouped", "isFullHeight", "onSelect", "position", "toggle", "autoFocus", "menuAppendTo", "isFlipEnabled"]);
|
|
4831
4831
|
const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
|
|
4832
4832
|
let component;
|
|
4833
4833
|
let renderedContent;
|
|
@@ -4844,7 +4844,10 @@
|
|
|
4844
4844
|
const openedOnEnter = this.openedOnEnter;
|
|
4845
4845
|
return (React__namespace.createElement(DropdownContext.Consumer, null, ({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
|
|
4846
4846
|
const BaseComponent = baseComponent;
|
|
4847
|
-
const menuContainer = (React__namespace.createElement(DropdownMenu
|
|
4847
|
+
const menuContainer = (React__namespace.createElement(DropdownMenu
|
|
4848
|
+
// This removes the `position: absolute` styling from the `.pf-c-dropdown__menu`
|
|
4849
|
+
// allowing the menu to flip correctly
|
|
4850
|
+
, Object.assign({}, (isFlipEnabled && { style: { position: 'revert', minWidth: 'min-content' } }), { setMenuComponentRef: this.setMenuComponentRef, component: component, isOpen: isOpen, position: position, "aria-labelledby": contextId ? `${contextId}-toggle` : id, isGrouped: isGrouped, autoFocus: openedOnEnter && autoFocus, alignments: alignments }), renderedContent));
|
|
4848
4851
|
const popperContainer = (React__namespace.createElement("div", { className: css(baseClass, direction === exports.DropdownDirection.up && styles$16.modifiers.top, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, isOpen && styles$16.modifiers.expanded, className) }, isOpen && menuContainer));
|
|
4849
4852
|
const mainContainer = (React__namespace.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === exports.DropdownDirection.up && styles$16.modifiers.top, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, isOpen && styles$16.modifiers.expanded, isFullHeight && styles$16.modifiers.fullHeight, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
|
|
4850
4853
|
React__namespace.Children.map(toggle, oneToggle => React__namespace.cloneElement(oneToggle, {
|
|
@@ -4885,16 +4888,17 @@
|
|
|
4885
4888
|
direction: exports.DropdownDirection.down,
|
|
4886
4889
|
onSelect: () => undefined,
|
|
4887
4890
|
autoFocus: true,
|
|
4888
|
-
menuAppendTo: 'inline'
|
|
4891
|
+
menuAppendTo: 'inline',
|
|
4892
|
+
isFlipEnabled: false
|
|
4889
4893
|
};
|
|
4890
4894
|
|
|
4891
4895
|
const Dropdown = (_a) => {
|
|
4892
4896
|
var { onSelect,
|
|
4893
4897
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
4894
4898
|
ref, // Types of Ref are different for React.FunctionComponent vs React.Component
|
|
4895
|
-
ouiaId, ouiaSafe, alignments, contextProps } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps"]);
|
|
4899
|
+
ouiaId, ouiaSafe, alignments, contextProps, menuAppendTo = 'inline', isFlipEnabled = false } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps", "menuAppendTo", "isFlipEnabled"]);
|
|
4896
4900
|
return (React__namespace.createElement(DropdownContext.Provider, { value: Object.assign({ onSelect: event => onSelect && onSelect(event), toggleTextClass: styles$16.dropdownToggleText, toggleIconClass: styles$16.dropdownToggleImage, toggleIndicatorClass: styles$16.dropdownToggleIcon, menuClass: styles$16.dropdownMenu, itemClass: styles$16.dropdownMenuItem, toggleClass: styles$16.dropdownToggle, baseClass: styles$16.dropdown, baseComponent: 'div', sectionClass: styles$16.dropdownGroup, sectionTitleClass: styles$16.dropdownGroupTitle, sectionComponent: 'section', disabledClass: styles$16.modifiers.disabled, plainTextClass: styles$16.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
|
|
4897
|
-
React__namespace.createElement(DropdownWithContext, Object.assign({}, props))));
|
|
4901
|
+
React__namespace.createElement(DropdownWithContext, Object.assign({ menuAppendTo: menuAppendTo, isFlipEnabled: isFlipEnabled }, props))));
|
|
4898
4902
|
};
|
|
4899
4903
|
Dropdown.displayName = 'Dropdown';
|
|
4900
4904
|
|
|
@@ -7489,7 +7493,7 @@
|
|
|
7489
7493
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
7490
7494
|
menuAppendTo, favorites, onFavorite,
|
|
7491
7495
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
7492
|
-
favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect"]);
|
|
7496
|
+
favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect", "isFlipEnabled"]);
|
|
7493
7497
|
const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
|
|
7494
7498
|
const selectToggleId = toggleId || `pf-select-toggle-id-${currentId$1++}`;
|
|
7495
7499
|
const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
|
|
@@ -7655,7 +7659,10 @@
|
|
|
7655
7659
|
break;
|
|
7656
7660
|
}
|
|
7657
7661
|
}
|
|
7658
|
-
const innerMenu = (React__namespace.createElement(SelectMenu
|
|
7662
|
+
const innerMenu = (React__namespace.createElement(SelectMenu
|
|
7663
|
+
// This removes the `position: absolute` styling from the `.pf-c-select__menu`
|
|
7664
|
+
// allowing the menu to flip correctly
|
|
7665
|
+
, Object.assign({}, (isFlipEnabled && { style: { position: 'revert' } }), props, { isGrouped: isGrouped, selected: selections }, variantProps, { openedOnEnter: openedOnEnter, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, sendRef: this.sendRef, keyHandler: this.handleMenuKeys, maxHeight: maxHeight, ref: this.menuComponentRef, footer: footer, footerRef: this.footerRef, isLastOptionBeforeFooter: this.isLastOptionBeforeFooter }), variantChildren));
|
|
7659
7666
|
const menuContainer = footer ? React__namespace.createElement("div", { className: css(styles$_.selectMenu) },
|
|
7660
7667
|
" ",
|
|
7661
7668
|
innerMenu,
|
|
@@ -7761,7 +7768,8 @@
|
|
|
7761
7768
|
isInputValuePersisted: false,
|
|
7762
7769
|
isInputFilterPersisted: false,
|
|
7763
7770
|
isCreateSelectOptionObject: false,
|
|
7764
|
-
shouldResetOnSelect: true
|
|
7771
|
+
shouldResetOnSelect: true,
|
|
7772
|
+
isFlipEnabled: false
|
|
7765
7773
|
};
|
|
7766
7774
|
|
|
7767
7775
|
const ArrowLeftIconConfig = {
|
|
@@ -9053,8 +9061,8 @@
|
|
|
9053
9061
|
const toggleId = `pf-context-selector-toggle-id-${newId}`;
|
|
9054
9062
|
const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
|
|
9055
9063
|
const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
|
|
9056
|
-
const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap"]);
|
|
9057
|
-
const menuContainer = (React__namespace.createElement("div", { className: css(styles$Q.contextSelectorMenu) }, isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true } },
|
|
9064
|
+
const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap", "isFlipEnabled"]);
|
|
9065
|
+
const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } })), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true } },
|
|
9058
9066
|
React__namespace.createElement("div", { className: css(styles$Q.contextSelectorMenuSearch) },
|
|
9059
9067
|
React__namespace.createElement(InputGroup, null,
|
|
9060
9068
|
React__namespace.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-labelledby": searchButtonId }),
|
|
@@ -9096,7 +9104,8 @@
|
|
|
9096
9104
|
disableFocusTrap: false,
|
|
9097
9105
|
footer: null,
|
|
9098
9106
|
isPlain: false,
|
|
9099
|
-
isText: false
|
|
9107
|
+
isText: false,
|
|
9108
|
+
isFlipEnabled: false
|
|
9100
9109
|
};
|
|
9101
9110
|
|
|
9102
9111
|
class ContextSelectorItem extends React__namespace.Component {
|
|
@@ -18199,10 +18208,10 @@
|
|
|
18199
18208
|
render() {
|
|
18200
18209
|
const _a = this.props, {
|
|
18201
18210
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
18202
|
-
id, className, label, labelOff, isChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
18211
|
+
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"]);
|
|
18203
18212
|
const isAriaLabelledBy = props['aria-label'] === '';
|
|
18204
18213
|
return (React__namespace.createElement("label", Object.assign({ className: css(styles$i.switch, isReversed && styles$i.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
|
|
18205
|
-
React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$i.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event), checked: isChecked, disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
|
|
18214
|
+
React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$i.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)),
|
|
18206
18215
|
label !== undefined ? (React__namespace.createElement(React__namespace.Fragment, null,
|
|
18207
18216
|
React__namespace.createElement("span", { className: css(styles$i.switchToggle) }, hasCheckIcon && (React__namespace.createElement("span", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
|
|
18208
18217
|
React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true })))),
|