Refactor demo to avoid proptypes generation

Author: michaldudak

docs/data/material/components/menus/UnstyledMenuPopup.js

@@ -79,10 +79,11 @@ const Popper = styled(PopperUnstyled)`
 `;
 
 function MenuWrapper(props) {
-  const { children, contentRef, label } = props;
+  const { children, label } = props;
 
   const [isOpen, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
+  const contentRef = React.useRef(null);
 
   const close = () => setOpen(false);
 
@@ -106,7 +107,7 @@ function MenuWrapper(props) {
       >
         {isOpen && (
           <ClickAwayListener onClickAway={() => setOpen(false)}>
-            {children?.(close)}
+            {children?.(close, contentRef)}
           </ClickAwayListener>
         )}
       </Popper>
@@ -116,27 +117,13 @@ function MenuWrapper(props) {
 
 MenuWrapper.propTypes = {
   children: PropTypes.func.isRequired,
-  contentRef: PropTypes.shape({
-    current: function (props, propName) {
-      if (props[propName] == null) {
-        return null;
-      } else if (
-        typeof props[propName] !== 'object' ||
-        props[propName].nodeType !== 1
-      ) {
-        return new Error("Expected prop '" + propName + "' to be of type Element");
-      }
-    },
-  }).isRequired,
   label: PropTypes.string,
 };
 
 export default function UnstyledMenuPopup() {
-  const contentRef = React.useRef(null);
-
   return (
-    <MenuWrapper contentRef={contentRef} label="Language">
-      {(close) => (
+    <MenuWrapper label="Language">
+      {(close, contentRef) => (
         <StyledMenu ref={contentRef}>
           <StyledMenuItem onClick={() => close()}>English</StyledMenuItem>
           <StyledMenuItem onClick={() => close()}>中文</StyledMenuItem>

docs/data/material/components/menus/UnstyledMenuPopup.tsx

@@ -78,16 +78,19 @@ const Popper = styled(PopperUnstyled)`
 `;
 
 interface MenuWrapperProps {
-  contentRef: React.RefObject<HTMLElement>;
-  children: (close: () => void) => JSX.Element;
+  children: (
+    close: () => void,
+    contentRef: React.RefObject<HTMLElement>,
+  ) => JSX.Element;
   label?: string;
 }
 
 function MenuWrapper(props: MenuWrapperProps) {
-  const { children, contentRef, label } = props;
+  const { children, label } = props;
 
   const [isOpen, setOpen] = React.useState(false);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const contentRef = React.useRef<HTMLElement>(null);
 
   const close = () => setOpen(false);
 
@@ -111,7 +114,7 @@ function MenuWrapper(props: MenuWrapperProps) {
       >
         {isOpen && (
           <ClickAwayListener onClickAway={() => setOpen(false)}>
-            {children?.(close)}
+            {children?.(close, contentRef)}
           </ClickAwayListener>
         )}
       </Popper>
@@ -120,11 +123,9 @@ function MenuWrapper(props: MenuWrapperProps) {
 }
 
 export default function UnstyledMenuPopup() {
-  const contentRef = React.useRef<HTMLElement>(null);
-
   return (
-    <MenuWrapper contentRef={contentRef} label="Language">
-      {(close) => (
+    <MenuWrapper label="Language">
+      {(close, contentRef) => (
         <StyledMenu ref={contentRef}>
           <StyledMenuItem onClick={() => close()}>English</StyledMenuItem>
           <StyledMenuItem onClick={() => close()}>中文</StyledMenuItem>

docs/data/material/components/menus/UnstyledMenuPopup.tsx.preview

@@ -1,5 +1,5 @@
-<MenuWrapper contentRef={contentRef} label="Language">
-  {(close) => (
+<MenuWrapper label="Language">
+  {(close, contentRef) => (
     <StyledMenu ref={contentRef}>
       <StyledMenuItem onClick={() => close()}>English</StyledMenuItem>
       <StyledMenuItem onClick={() => close()}>中文</StyledMenuItem>