fix(Dropdown next): Add support for forward ref and updated docs. (#8142)

* fix(Dropdown next): Add support for forward ref and updated docs.

* hide inner ref prop

* hide innerRef

Co-authored-by: Titani <[email protected]>

Author: tlabaj

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;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
-export const Dropdown: React.FunctionComponent<DropdownProps> = ({
+const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   children,
   className,
   onSelect,
@@ -35,13 +37,14 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   isPlain,
   isScrollable,
   minWidth,
+  innerRef,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
   const containerRef = React.useRef<HTMLDivElement>();
 
-  const menuRef = (props.innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || 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<DropdownProps> = ({
     </div>
   );
 };
+
+export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref<any>) => (
+  <DropdownBase innerRef={ref} {...props} />
+));
 Dropdown.displayName = 'Dropdown';

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<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -18,7 +17,6 @@ export const DropdownBasic: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={isOpen => setIsOpen(isOpen)}

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<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -18,7 +17,6 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       minWidth="150px"

packages/react-core/src/next/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -4,7 +4,6 @@ import { MenuToggle, Divider } from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -18,7 +17,6 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={isOpen => setIsOpen(isOpen)}

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<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -19,7 +18,6 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
 
   return (
     <Dropdown
-      innerRef={menuRef}
       isOpen={isOpen}
       onSelect={onSelect}
       minWidth="150px"