From b9e46baa5b29b14f05cffb0a1acdff02cacc55e8 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 18 Sep 2023 16:54:17 -0400 Subject: [PATCH 1/4] fix(popper): improve flip behavior in RTL --- packages/react-core/src/helpers/Popper/Popper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index bda6a65a496..a5147d72b79 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -436,7 +436,7 @@ export const Popper: React.FunctionComponent = ({ }, { name: 'preventOverflow', - enabled: false + enabled: true }, { // adds attribute [data-popper-reference-hidden] to the popper element which can be used to hide it using CSS From 6e0ec882706f93502564f0bee65f027ac57ccd21 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 17 Oct 2023 13:20:47 -0400 Subject: [PATCH 2/4] feat(Popper): added prop for the preventOverflow modifier --- packages/react-core/src/helpers/Popper/Popper.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index a5147d72b79..4528d79733c 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -186,6 +186,8 @@ export interface PopperProps { * Lifecycle function invoked when the popper has fully transitioned in. */ onShown?: () => void; + /** Enable to prevent the popper from overflowing its container and becoming partially obscured. */ + preventOverflow?: boolean; } export const Popper: React.FunctionComponent = ({ @@ -224,7 +226,8 @@ export const Popper: React.FunctionComponent = ({ onHide = () => {}, onMount = () => {}, onShow = () => {}, - onShown = () => {} + onShown = () => {}, + preventOverflow = false }) => { const [triggerElement, setTriggerElement] = React.useState(null); const [refElement, setRefElement] = React.useState(null); @@ -436,7 +439,7 @@ export const Popper: React.FunctionComponent = ({ }, { name: 'preventOverflow', - enabled: true + enabled: preventOverflow }, { // adds attribute [data-popper-reference-hidden] to the popper element which can be used to hide it using CSS From d01b2926223b6638d370c6a1b259bc6cb003149e Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 24 Oct 2023 16:44:27 -0400 Subject: [PATCH 3/4] Update packages/react-core/src/helpers/Popper/Popper.tsx Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- packages/react-core/src/helpers/Popper/Popper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 4528d79733c..29cf3261dc4 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -186,7 +186,7 @@ export interface PopperProps { * Lifecycle function invoked when the popper has fully transitioned in. */ onShown?: () => void; - /** Enable to prevent the popper from overflowing its container and becoming partially obscured. */ + /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ preventOverflow?: boolean; } From 9dd2db301a5bebcb3c711c9a7472c0027e57d350 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 25 Oct 2023 09:23:03 -0400 Subject: [PATCH 4/4] chore(popper): expose preventOverflow option in popperProps interfaces --- packages/react-core/src/components/Dropdown/Dropdown.tsx | 2 ++ packages/react-core/src/components/Menu/MenuContainer.tsx | 2 ++ packages/react-core/src/components/Select/Select.tsx | 2 ++ 3 files changed, 6 insertions(+) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 5fed1c51552..a35ad8b4b4d 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -19,6 +19,8 @@ export interface DropdownPopperProps { enableFlip?: boolean; /** The container to append the popper to. Defaults to 'inline'. */ appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; + /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ + preventOverflow?: boolean; } export interface DropdownToggleProps { diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx index f1bceac4eff..027201f688b 100644 --- a/packages/react-core/src/components/Menu/MenuContainer.tsx +++ b/packages/react-core/src/components/Menu/MenuContainer.tsx @@ -14,6 +14,8 @@ export interface MenuPopperProps { maxWidth?: string | 'trigger'; /** Enable to flip the popper when it reaches the boundary */ enableFlip?: boolean; + /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ + preventOverflow?: boolean; } export interface MenuContainerProps { /** Menu to be rendered */ diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index 5b902df64af..92df78cf996 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -25,6 +25,8 @@ export interface SelectPopperProps { * appendTo={document.getElementById('target')} */ appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; + /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ + preventOverflow?: boolean; } export interface SelectToggleProps {