From 37e1850eb5c572f7497fa348dd0351e8ec04f764 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Tue, 15 Aug 2023 12:38:01 +0200
Subject: [PATCH] props spread fix, proptypes nonsence fix, popper definition
 fix

---
 .../UnstyledSelectBasic/tailwind/index.js     | 163 +-------------
 .../UnstyledSelectBasic/tailwind/index.tsx    |  19 +-
 .../tailwind/index.tsx.preview                |   7 +-
 .../tailwind/index.js                         | 212 ++++--------------
 .../tailwind/index.tsx                        |  60 ++---
 .../tailwind/index.tsx.preview                |   7 +-
 docs/scripts/formattedTSDemos.js              |   2 +-
 7 files changed, 98 insertions(+), 372 deletions(-)

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
index 7a3ccd8c3543f4..39a4f1643d4982 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
@@ -50,12 +50,7 @@ export default function UnstyledSelectBasic() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <CustomSelect
-        slotProps={{
-          popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
-        }}
-        defaultValue={10}
-      >
+      <CustomSelect defaultValue={10}>
         <Option value={10}>Ten</Option>
         <Option value={20}>Twenty</Option>
         <Option value={30}>Thirty</Option>
@@ -67,9 +62,13 @@ export default function UnstyledSelectBasic() {
 const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
 
 const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Select
       ref={ref}
+      {...props}
       className={clsx('CustomSelect', props.className)}
       slotProps={{
         ...props.slotProps,
@@ -81,7 +80,7 @@ const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
+              `text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
                 ownerState.focusVisible
                   ? 'border-purple-400 shadow-outline-purple'
                   : ''
@@ -112,11 +111,13 @@ const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
           );
           return {
             ...resolvedSlotProps,
-            className: clsx(resolvedSlotProps?.className),
+            className: clsx(
+              `${isDarkMode ? 'dark' : ''} z-10`,
+              resolvedSlotProps?.className,
+            ),
           };
         },
       }}
-      {...props}
     />
   );
 });
@@ -129,149 +130,7 @@ CustomSelect.propTypes = {
    */
   slotProps: PropTypes.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    popper: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({
-        anchorEl: PropTypes.oneOfType([
-          function (props, propName) {
-            if (props[propName] == null) {
-              return new Error(
-                "Prop '" + propName + "' is required but wasn't specified",
-              );
-            } else if (
-              typeof props[propName] !== 'object' ||
-              props[propName].nodeType !== 1
-            ) {
-              return new Error(
-                "Expected prop '" + propName + "' to be of type Element",
-              );
-            }
-          },
-          PropTypes.func,
-          PropTypes.shape({
-            contextElement: 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",
-                );
-              }
-            },
-            getBoundingClientRect: PropTypes.func.isRequired,
-          }),
-        ]),
-        children: PropTypes.oneOfType([
-          PropTypes.element,
-          PropTypes.func,
-          PropTypes.number,
-          PropTypes.shape({
-            '__@iterator@62': PropTypes.func.isRequired,
-          }),
-          PropTypes.string,
-          PropTypes.bool,
-        ]),
-        container: PropTypes.oneOfType([
-          function (props, propName) {
-            if (props[propName] == null) {
-              return new Error(
-                "Prop '" + propName + "' is required but wasn't specified",
-              );
-            } else if (
-              typeof props[propName] !== 'object' ||
-              props[propName].nodeType !== 1
-            ) {
-              return new Error(
-                "Expected prop '" + propName + "' to be of type Element",
-              );
-            }
-          },
-          PropTypes.func,
-        ]),
-        direction: PropTypes.oneOf(['ltr', 'rtl']),
-        disablePortal: PropTypes.bool,
-        keepMounted: PropTypes.bool,
-        modifiers: PropTypes.arrayOf(
-          PropTypes.shape({
-            data: PropTypes.object,
-            effect: PropTypes.func,
-            enabled: PropTypes.bool,
-            fn: PropTypes.func,
-            name: PropTypes.any,
-            options: PropTypes.object,
-            phase: PropTypes.oneOf([
-              'afterMain',
-              'afterRead',
-              'afterWrite',
-              'beforeMain',
-              'beforeRead',
-              'beforeWrite',
-              'main',
-              'read',
-              'write',
-            ]),
-            requires: PropTypes.arrayOf(PropTypes.string),
-            requiresIfExists: PropTypes.arrayOf(PropTypes.string),
-          }),
-        ),
-        open: PropTypes.bool,
-        placement: PropTypes.oneOf([
-          'auto-end',
-          'auto-start',
-          'auto',
-          'bottom-end',
-          'bottom-start',
-          'bottom',
-          'left-end',
-          'left-start',
-          'left',
-          'right-end',
-          'right-start',
-          'right',
-          'top-end',
-          'top-start',
-          'top',
-        ]),
-        popperOptions: PropTypes.shape({
-          modifiers: PropTypes.array,
-          onFirstUpdate: PropTypes.func,
-          placement: PropTypes.oneOf([
-            'auto-end',
-            'auto-start',
-            'auto',
-            'bottom-end',
-            'bottom-start',
-            'bottom',
-            'left-end',
-            'left-start',
-            'left',
-            'right-end',
-            'right-start',
-            'right',
-            'top-end',
-            'top-start',
-            'top',
-          ]),
-          strategy: PropTypes.oneOf(['absolute', 'fixed']),
-        }),
-        popperRef: PropTypes.oneOfType([
-          PropTypes.func,
-          PropTypes.shape({
-            current: PropTypes.object,
-          }),
-        ]),
-        slotProps: PropTypes.shape({
-          root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-        }),
-        slots: PropTypes.shape({
-          root: PropTypes.elementType,
-        }),
-        transition: PropTypes.bool,
-      }),
-    ]),
+    popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
 };
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
index 6b5e1558575ec8..eb731fa3a0d50c 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
@@ -57,12 +57,7 @@ export default function UnstyledSelectBasic() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <CustomSelect
-        slotProps={{
-          popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
-        }}
-        defaultValue={10}
-      >
+      <CustomSelect defaultValue={10}>
         <Option value={10}>Ten</Option>
         <Option value={20}>Twenty</Option>
         <Option value={30}>Thirty</Option>
@@ -78,9 +73,13 @@ const CustomSelect = React.forwardRef(function CustomSelect<
   TValue extends {},
   Multiple extends boolean,
 >(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Select
       ref={ref}
+      {...props}
       className={clsx('CustomSelect', props.className)}
       slotProps={{
         ...props.slotProps,
@@ -92,7 +91,7 @@ const CustomSelect = React.forwardRef(function CustomSelect<
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
+              `text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
                 ownerState.focusVisible
                   ? 'border-purple-400 shadow-outline-purple'
                   : ''
@@ -123,11 +122,13 @@ const CustomSelect = React.forwardRef(function CustomSelect<
           );
           return {
             ...resolvedSlotProps,
-            className: clsx(resolvedSlotProps?.className),
+            className: clsx(
+              `${isDarkMode ? 'dark' : ''} z-10`,
+              resolvedSlotProps?.className,
+            ),
           };
         },
       }}
-      {...props}
     />
   );
 });
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview
index b466956d01a23a..d6695526fea9f9 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview
@@ -1,9 +1,4 @@
-<CustomSelect
-  slotProps={{
-    popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
-  }}
-  defaultValue={10}
->
+<CustomSelect defaultValue={10}>
   <Option value={10}>Ten</Option>
   <Option value={20}>Twenty</Option>
   <Option value={30}>Thirty</Option>
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
index 509bd3560825bd..51a74d90004ba1 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
@@ -6,6 +6,26 @@ import { useTheme } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledSelectIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''}>
+      <CustomSelect defaultValue={10}>
+        <Option value={10}>Documentation</Option>
+        <Option value={20}>Components</Option>
+        <Option value={30}>Features</Option>
+      </CustomSelect>
+    </div>
+  );
+}
+
 const getOptionColorClasses = ({ selected, highlighted, disabled }) => {
   let classes = '';
   if (disabled) {
@@ -55,39 +75,21 @@ Button.propTypes = {
   ownerState: PropTypes.object.isRequired,
 };
 
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
+const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
 
-export default function UnstyledSelectIntroduction() {
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
-  return (
-    <div className={isDarkMode ? 'dark' : ''}>
-      <CustomSelect
-        slotProps={{
-          popper: { className: `${isDarkMode ? '' : ''} z-20` },
-        }}
-        defaultValue={10}
-      >
-        <Option value={10}>Documentation</Option>
-        <Option value={20}>Components</Option>
-        <Option value={30}>Features</Option>
-      </CustomSelect>
-    </div>
-  );
-}
-
-const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
-
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
   return (
     <Select
       ref={ref}
+      {...props}
+      slots={{
+        root: Button,
+        ...props.slots,
+      }}
       className={clsx('CustomSelect', props.className)}
-      slots={{ root: Button }}
       slotProps={{
         ...props.slotProps,
         root: (ownerState) => {
@@ -127,11 +129,13 @@ const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
           );
           return {
             ...resolvedSlotProps,
-            className: clsx(resolvedSlotProps?.className),
+            className: clsx(
+              `${isDarkMode ? 'dark' : ''} z-10`,
+              resolvedSlotProps?.className,
+            ),
           };
         },
       }}
-      {...props}
     />
   );
 });
@@ -144,149 +148,17 @@ CustomSelect.propTypes = {
    */
   slotProps: PropTypes.shape({
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    popper: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({
-        anchorEl: PropTypes.oneOfType([
-          function (props, propName) {
-            if (props[propName] == null) {
-              return new Error(
-                "Prop '" + propName + "' is required but wasn't specified",
-              );
-            } else if (
-              typeof props[propName] !== 'object' ||
-              props[propName].nodeType !== 1
-            ) {
-              return new Error(
-                "Expected prop '" + propName + "' to be of type Element",
-              );
-            }
-          },
-          PropTypes.func,
-          PropTypes.shape({
-            contextElement: 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",
-                );
-              }
-            },
-            getBoundingClientRect: PropTypes.func.isRequired,
-          }),
-        ]),
-        children: PropTypes.oneOfType([
-          PropTypes.element,
-          PropTypes.func,
-          PropTypes.number,
-          PropTypes.shape({
-            '__@iterator@62': PropTypes.func.isRequired,
-          }),
-          PropTypes.string,
-          PropTypes.bool,
-        ]),
-        container: PropTypes.oneOfType([
-          function (props, propName) {
-            if (props[propName] == null) {
-              return new Error(
-                "Prop '" + propName + "' is required but wasn't specified",
-              );
-            } else if (
-              typeof props[propName] !== 'object' ||
-              props[propName].nodeType !== 1
-            ) {
-              return new Error(
-                "Expected prop '" + propName + "' to be of type Element",
-              );
-            }
-          },
-          PropTypes.func,
-        ]),
-        direction: PropTypes.oneOf(['ltr', 'rtl']),
-        disablePortal: PropTypes.bool,
-        keepMounted: PropTypes.bool,
-        modifiers: PropTypes.arrayOf(
-          PropTypes.shape({
-            data: PropTypes.object,
-            effect: PropTypes.func,
-            enabled: PropTypes.bool,
-            fn: PropTypes.func,
-            name: PropTypes.any,
-            options: PropTypes.object,
-            phase: PropTypes.oneOf([
-              'afterMain',
-              'afterRead',
-              'afterWrite',
-              'beforeMain',
-              'beforeRead',
-              'beforeWrite',
-              'main',
-              'read',
-              'write',
-            ]),
-            requires: PropTypes.arrayOf(PropTypes.string),
-            requiresIfExists: PropTypes.arrayOf(PropTypes.string),
-          }),
-        ),
-        open: PropTypes.bool,
-        placement: PropTypes.oneOf([
-          'auto-end',
-          'auto-start',
-          'auto',
-          'bottom-end',
-          'bottom-start',
-          'bottom',
-          'left-end',
-          'left-start',
-          'left',
-          'right-end',
-          'right-start',
-          'right',
-          'top-end',
-          'top-start',
-          'top',
-        ]),
-        popperOptions: PropTypes.shape({
-          modifiers: PropTypes.array,
-          onFirstUpdate: PropTypes.func,
-          placement: PropTypes.oneOf([
-            'auto-end',
-            'auto-start',
-            'auto',
-            'bottom-end',
-            'bottom-start',
-            'bottom',
-            'left-end',
-            'left-start',
-            'left',
-            'right-end',
-            'right-start',
-            'right',
-            'top-end',
-            'top-start',
-            'top',
-          ]),
-          strategy: PropTypes.oneOf(['absolute', 'fixed']),
-        }),
-        popperRef: PropTypes.oneOfType([
-          PropTypes.func,
-          PropTypes.shape({
-            current: PropTypes.object,
-          }),
-        ]),
-        slotProps: PropTypes.shape({
-          root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-        }),
-        slots: PropTypes.shape({
-          root: PropTypes.elementType,
-        }),
-        transition: PropTypes.bool,
-      }),
-    ]),
+    popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
+  /**
+   * The components used for each slot inside the Select.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    popper: PropTypes.func,
+    root: PropTypes.elementType,
+  }),
 };
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
index 4f076d33402c87..adea44669a23e6 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
@@ -9,6 +9,26 @@ import { useTheme } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export default function UnstyledSelectIntroduction() {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''}>
+      <CustomSelect defaultValue={10}>
+        <Option value={10}>Documentation</Option>
+        <Option value={20}>Components</Option>
+        <Option value={30}>Features</Option>
+      </CustomSelect>
+    </div>
+  );
+}
+
 const getOptionColorClasses = ({
   selected,
   highlighted,
@@ -63,31 +83,6 @@ const Button = React.forwardRef(function Button<
   );
 });
 
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-export default function UnstyledSelectIntroduction() {
-  // Replace this with your app logic for determining dark modes
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <div className={isDarkMode ? 'dark' : ''}>
-      <CustomSelect
-        slotProps={{
-          popper: { className: `${isDarkMode ? '' : ''} z-20` },
-        }}
-        defaultValue={10}
-      >
-        <Option value={10}>Documentation</Option>
-        <Option value={20}>Components</Option>
-        <Option value={30}>Features</Option>
-      </CustomSelect>
-    </div>
-  );
-}
-
 const resolveSlotProps = (fn: any, args: any) =>
   typeof fn === 'function' ? fn(args) : fn;
 
@@ -95,11 +90,18 @@ const CustomSelect = React.forwardRef(function CustomSelect<
   TValue extends {},
   Multiple extends boolean,
 >(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
     <Select
       ref={ref}
+      {...props}
+      slots={{
+        root: Button,
+        ...props.slots,
+      }}
       className={clsx('CustomSelect', props.className)}
-      slots={{ root: Button }}
       slotProps={{
         ...props.slotProps,
         root: (ownerState) => {
@@ -139,11 +141,13 @@ const CustomSelect = React.forwardRef(function CustomSelect<
           );
           return {
             ...resolvedSlotProps,
-            className: clsx(resolvedSlotProps?.className),
+            className: clsx(
+              `${isDarkMode ? 'dark' : ''} z-10`,
+              resolvedSlotProps?.className,
+            ),
           };
         },
       }}
-      {...props}
     />
   );
 });
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview
index 100157ed2a8e65..dba248ae30720d 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview
@@ -1,9 +1,4 @@
-<CustomSelect
-  slotProps={{
-    popper: { className: `${isDarkMode ? '' : ''} z-20` },
-  }}
-  defaultValue={10}
->
+<CustomSelect defaultValue={10}>
   <Option value={10}>Documentation</Option>
   <Option value={20}>Components</Option>
   <Option value={30}>Features</Option>
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index 72d0bc39f5b905..feb563bce36bdf 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -98,7 +98,7 @@ async function transpileFile(tsxPath, program) {
 
     const propTypesAST = typescriptToProptypes.parseFromProgram(tsxPath, program, {
       shouldResolveObject: ({ name }) => {
-        if (name === 'classes' || name === 'ownerState') {
+        if (name === 'classes' || name === 'ownerState' || name === 'popper') {
           return false;
         }