From adbe5d834222c4cb42726a2662c7c03882c69111 Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 3 Oct 2022 16:04:31 -0400 Subject: [PATCH 1/3] fix(Dropdown next): Add support for forward ref and updated docs. --- .../src/next/components/Dropdown/Dropdown.tsx | 11 +++++++++-- .../components/Dropdown/examples/DropdownBasic.tsx | 2 -- .../Dropdown/examples/DropdownWithDescriptions.tsx | 2 -- .../Dropdown/examples/DropdownWithGroups.tsx | 2 -- .../Dropdown/examples/DropdownWithKebabToggle.tsx | 2 -- 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx index f61e9c66672..38b14ba1b48 100644 --- a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx @@ -23,9 +23,11 @@ export interface DropdownProps extends MenuProps { isScrollable?: boolean; /** Min width of the menu. */ minWidth?: string; + /** Forwarded ref */ + innerRef?: React.Ref; } -export const Dropdown: React.FunctionComponent = ({ +const DropdownBase: React.FunctionComponent = ({ children, className, onSelect, @@ -35,13 +37,14 @@ export const Dropdown: React.FunctionComponent = ({ isPlain, isScrollable, minWidth, + innerRef, ...props }: DropdownProps) => { const localMenuRef = React.useRef(); const toggleRef = React.useRef(); const containerRef = React.useRef(); - const menuRef = (props.innerRef as React.RefObject) || localMenuRef; + const menuRef = (innerRef as React.RefObject) || localMenuRef; React.useEffect(() => { const handleMenuKeys = (event: KeyboardEvent) => { if (!isOpen && toggleRef.current?.contains(event.target as Node)) { @@ -112,4 +115,8 @@ export const Dropdown: React.FunctionComponent = ({ ); }; + +export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref) => ( + +)); Dropdown.displayName = 'Dropdown'; diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx index 4627344197f..d0dac9e1567 100644 --- a/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx @@ -4,7 +4,6 @@ import { Divider, MenuToggle } from '@patternfly/react-core'; export const DropdownBasic: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -18,7 +17,6 @@ export const DropdownBasic: React.FunctionComponent = () => { return ( setIsOpen(isOpen)} diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx index e675975046b..801381081eb 100644 --- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx +++ b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx @@ -4,7 +4,6 @@ import { MenuToggle } from '@patternfly/react-core'; export const DropdownWithDescriptions: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -18,7 +17,6 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => { return ( { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -18,7 +17,6 @@ export const DropdownWithGroups: React.FunctionComponent = () => { return ( setIsOpen(isOpen)} diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx index 22f0d584b40..153b3e706ec 100644 --- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx +++ b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx @@ -5,7 +5,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico export const DropdownWithKebab: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -19,7 +18,6 @@ export const DropdownWithKebab: React.FunctionComponent = () => { return ( Date: Tue, 4 Oct 2022 12:23:37 -0400 Subject: [PATCH 2/3] hide inner ref prop --- packages/react-core/src/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index e3013421b37..05ef5478b7f 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -76,7 +76,7 @@ export interface ButtonProps extends Omit, 'r isLarge?: boolean; /** Adds danger styling to secondary or link button variants */ isDanger?: boolean; - /** Forwarded ref */ + /** @hide Forwarded ref */ innerRef?: React.Ref; /** Adds count number to button */ countOptions?: BadgeCountObject; From 459a50e0f285fc739ac1d27396c35ff645cf842a Mon Sep 17 00:00:00 2001 From: Titani Date: Wed, 5 Oct 2022 08:19:41 -0400 Subject: [PATCH 3/3] hide innerRef --- packages/react-core/src/components/Button/Button.tsx | 2 +- packages/react-core/src/next/components/Dropdown/Dropdown.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 05ef5478b7f..e3013421b37 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -76,7 +76,7 @@ export interface ButtonProps extends Omit, 'r isLarge?: boolean; /** Adds danger styling to secondary or link button variants */ isDanger?: boolean; - /** @hide Forwarded ref */ + /** Forwarded ref */ innerRef?: React.Ref; /** Adds count number to button */ countOptions?: BadgeCountObject; diff --git a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx index 38b14ba1b48..7b26cfb63fb 100644 --- a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx @@ -23,7 +23,7 @@ export interface DropdownProps extends MenuProps { isScrollable?: boolean; /** Min width of the menu. */ minWidth?: string; - /** Forwarded ref */ + /** @hide Forwarded ref */ innerRef?: React.Ref; }