@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.
Files changed (70) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts +9 -1
  3. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  4. package/dist/esm/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  5. package/dist/esm/components/ContextSelector/ContextSelector.d.ts +14 -1
  6. package/dist/esm/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  7. package/dist/esm/components/ContextSelector/ContextSelector.js +4 -3
  8. package/dist/esm/components/ContextSelector/ContextSelector.js.map +1 -1
  9. package/dist/esm/components/Dropdown/Dropdown.d.ts +14 -1
  10. package/dist/esm/components/Dropdown/Dropdown.d.ts.map +1 -1
  11. package/dist/esm/components/Dropdown/Dropdown.js +2 -2
  12. package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
  13. package/dist/esm/components/Dropdown/DropdownWithContext.d.ts.map +1 -1
  14. package/dist/esm/components/Dropdown/DropdownWithContext.js +7 -3
  15. package/dist/esm/components/Dropdown/DropdownWithContext.js.map +1 -1
  16. package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts +9 -1
  17. package/dist/esm/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
  18. package/dist/esm/components/OptionsMenu/OptionsMenu.js.map +1 -1
  19. package/dist/esm/components/Select/Select.d.ts +14 -1
  20. package/dist/esm/components/Select/Select.d.ts.map +1 -1
  21. package/dist/esm/components/Select/Select.js +7 -3
  22. package/dist/esm/components/Select/Select.js.map +1 -1
  23. package/dist/esm/components/Switch/Switch.d.ts +9 -3
  24. package/dist/esm/components/Switch/Switch.d.ts.map +1 -1
  25. package/dist/esm/components/Switch/Switch.js +2 -2
  26. package/dist/esm/components/Switch/Switch.js.map +1 -1
  27. package/dist/esm/helpers/Popper/Popper.d.ts +1 -0
  28. package/dist/esm/helpers/Popper/Popper.d.ts.map +1 -1
  29. package/dist/esm/helpers/Popper/Popper.js.map +1 -1
  30. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts +9 -1
  31. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.d.ts.map +1 -1
  32. package/dist/js/components/ApplicationLauncher/ApplicationLauncher.js.map +1 -1
  33. package/dist/js/components/ContextSelector/ContextSelector.d.ts +14 -1
  34. package/dist/js/components/ContextSelector/ContextSelector.d.ts.map +1 -1
  35. package/dist/js/components/ContextSelector/ContextSelector.js +4 -3
  36. package/dist/js/components/ContextSelector/ContextSelector.js.map +1 -1
  37. package/dist/js/components/Dropdown/Dropdown.d.ts +14 -1
  38. package/dist/js/components/Dropdown/Dropdown.d.ts.map +1 -1
  39. package/dist/js/components/Dropdown/Dropdown.js +2 -2
  40. package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
  41. package/dist/js/components/Dropdown/DropdownWithContext.d.ts.map +1 -1
  42. package/dist/js/components/Dropdown/DropdownWithContext.js +7 -3
  43. package/dist/js/components/Dropdown/DropdownWithContext.js.map +1 -1
  44. package/dist/js/components/OptionsMenu/OptionsMenu.d.ts +9 -1
  45. package/dist/js/components/OptionsMenu/OptionsMenu.d.ts.map +1 -1
  46. package/dist/js/components/OptionsMenu/OptionsMenu.js.map +1 -1
  47. package/dist/js/components/Select/Select.d.ts +14 -1
  48. package/dist/js/components/Select/Select.d.ts.map +1 -1
  49. package/dist/js/components/Select/Select.js +7 -3
  50. package/dist/js/components/Select/Select.js.map +1 -1
  51. package/dist/js/components/Switch/Switch.d.ts +9 -3
  52. package/dist/js/components/Switch/Switch.d.ts.map +1 -1
  53. package/dist/js/components/Switch/Switch.js +2 -2
  54. package/dist/js/components/Switch/Switch.js.map +1 -1
  55. package/dist/js/helpers/Popper/Popper.d.ts +1 -0
  56. package/dist/js/helpers/Popper/Popper.d.ts.map +1 -1
  57. package/dist/js/helpers/Popper/Popper.js.map +1 -1
  58. package/dist/umd/react-core.css +69 -69
  59. package/dist/umd/react-core.js +22 -13
  60. package/dist/umd/react-core.min.js +2 -2
  61. package/package.json +5 -5
  62. package/src/components/ApplicationLauncher/ApplicationLauncher.tsx +11 -1
  63. package/src/components/ContextSelector/ContextSelector.tsx +23 -3
  64. package/src/components/Dropdown/Dropdown.tsx +20 -2
  65. package/src/components/Dropdown/DropdownWithContext.tsx +6 -1
  66. package/src/components/OptionsMenu/OptionsMenu.tsx +12 -1
  67. package/src/components/Select/Select.tsx +20 -2
  68. package/src/components/Switch/Switch.tsx +12 -4
  69. package/src/components/Switch/examples/Switch.md +2 -18
  70. package/src/helpers/Popper/Popper.tsx +1 -0
@@ -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;
@@ -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, { setMenuComponentRef: this.setMenuComponentRef, component: component, isOpen: isOpen, position: position, "aria-labelledby": contextId ? `${contextId}-toggle` : id, isGrouped: isGrouped, autoFocus: openedOnEnter && autoFocus, alignments: alignments }, renderedContent));
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, Object.assign({}, 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));
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 })))),