@mui/lab 6.0.0-alpha.7 → 6.0.0-alpha.9

package/modern/TabPanel/TabPanel.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "value", "keepMounted"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,13 +33,15 @@ const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(inProps, ref) {
     name: 'MuiTabPanel'
   });
   const {
-      children,
-      className,
-      value,
-      keepMounted = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props);
+    children,
+    className,
+    value,
+    keepMounted = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props
+  };
   const classes = useUtilityClasses(ownerState);
   const context = useTabContext();
   if (context === null) {
@@ -50,17 +49,17 @@ const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(inProps, ref) {
   }
   const id = getPanelId(context, value);
   const tabId = getTabId(context, value);
-  return /*#__PURE__*/_jsx(TabPanelRoot, _extends({
+  return /*#__PURE__*/_jsx(TabPanelRoot, {
     "aria-labelledby": tabId,
     className: clsx(classes.root, className),
     hidden: value !== context.value,
     id: id,
     ref: ref,
     role: "tabpanel",
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: (keepMounted || value === context.value) && children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? TabPanel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Timeline/Timeline.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["position", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -54,26 +51,28 @@ const Timeline = /*#__PURE__*/React.forwardRef(function Timeline(inProps, ref) {
     name: 'MuiTimeline'
   });
   const {
-      position = 'right',
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    position = 'right',
+    className,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     position
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const contextValue = React.useMemo(() => ({
     position
   }), [position]);
   return /*#__PURE__*/_jsx(TimelineContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(TimelineRoot, _extends({
+    children: /*#__PURE__*/_jsx(TimelineRoot, {
       className: clsx(classes.root, className),
       ownerState: ownerState
       // @ts-expect-error TypeScript bug, need to keep unknown for DX
       ,
-      ref: ref
-    }, other))
+      ref: ref,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Timeline.propTypes /* remove-proptypes */ = {

package/modern/TimelineConnector/TimelineConnector.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -38,16 +35,17 @@ const TimelineConnector = /*#__PURE__*/React.forwardRef(function TimelineConnect
     name: 'MuiTimelineConnector'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TimelineConnectorRoot, _extends({
+  return /*#__PURE__*/_jsx(TimelineConnectorRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TimelineConnector.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/TimelineContent/TimelineContent.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,12 +31,13 @@ const TimelineContentRoot = styled(Typography, {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   flex: 1,
   padding: '6px 16px',
-  textAlign: 'left'
-}, ownerState.position === 'left' && {
-  textAlign: 'right'
+  textAlign: 'left',
+  ...(ownerState.position === 'left' && {
+    textAlign: 'right'
+  })
 }));
 const TimelineContent = /*#__PURE__*/React.forwardRef(function TimelineContent(inProps, ref) {
   const props = useThemeProps({
@@ -47,22 +45,24 @@ const TimelineContent = /*#__PURE__*/React.forwardRef(function TimelineContent(i
     name: 'MuiTimelineContent'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const {
     position: positionContext
   } = React.useContext(TimelineContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     position: positionContext || 'right'
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TimelineContentRoot, _extends({
+  return /*#__PURE__*/_jsx(TimelineContentRoot, {
     component: "div",
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TimelineContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/TimelineDot/TimelineDot.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,7 +31,7 @@ const TimelineDotRoot = styled('span', {
 })(({
   ownerState,
   theme
-}) => _extends({
+}) => ({
   display: 'flex',
   alignSelf: 'baseline',
   borderStyle: 'solid',
@@ -42,44 +39,54 @@ const TimelineDotRoot = styled('span', {
   padding: 4,
   borderRadius: '50%',
   boxShadow: (theme.vars || theme).shadows[1],
-  margin: '11.5px 0'
-}, ownerState.variant === 'filled' && _extends({
-  borderColor: 'transparent'
-}, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-  color: (theme.vars || theme).palette.grey[50],
-  backgroundColor: (theme.vars || theme).palette.grey[400]
-} : {
-  color: (theme.vars || theme).palette[ownerState.color].contrastText,
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-})), ownerState.variant === 'outlined' && _extends({
-  boxShadow: 'none',
-  backgroundColor: 'transparent'
-}, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-  borderColor: (theme.vars || theme).palette.grey[400]
-} : {
-  borderColor: (theme.vars || theme).palette[ownerState.color].main
-}))));
+  margin: '11.5px 0',
+  ...(ownerState.variant === 'filled' && {
+    borderColor: 'transparent',
+    ...(ownerState.color !== 'inherit' && {
+      ...(ownerState.color === 'grey' ? {
+        color: (theme.vars || theme).palette.grey[50],
+        backgroundColor: (theme.vars || theme).palette.grey[400]
+      } : {
+        color: (theme.vars || theme).palette[ownerState.color].contrastText,
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      })
+    })
+  }),
+  ...(ownerState.variant === 'outlined' && {
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+    ...(ownerState.color !== 'inherit' && {
+      ...(ownerState.color === 'grey' ? {
+        borderColor: (theme.vars || theme).palette.grey[400]
+      } : {
+        borderColor: (theme.vars || theme).palette[ownerState.color].main
+      })
+    })
+  })
+}));
 const TimelineDot = /*#__PURE__*/React.forwardRef(function TimelineDot(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTimelineDot'
   });
   const {
-      className,
-      color = 'grey',
-      variant = 'filled'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'grey',
+    variant = 'filled',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TimelineDotRoot, _extends({
+  return /*#__PURE__*/_jsx(TimelineDotRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TimelineDot.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/TimelineItem/TimelineItem.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["position", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -37,29 +34,32 @@ const TimelineItemRoot = styled('li', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   listStyle: 'none',
   display: 'flex',
   position: 'relative',
-  minHeight: 70
-}, ownerState.position === 'left' && {
-  flexDirection: 'row-reverse'
-}, (ownerState.position === 'alternate' || ownerState.position === 'alternate-reverse') && {
-  [`&:nth-of-type(${ownerState.position === 'alternate' ? 'even' : 'odd'})`]: {
-    flexDirection: 'row-reverse',
-    [`& .${timelineContentClasses.root}`]: {
-      textAlign: 'right'
-    },
-    [`& .${timelineOppositeContentClasses.root}`]: {
-      textAlign: 'left'
+  minHeight: 70,
+  ...(ownerState.position === 'left' && {
+    flexDirection: 'row-reverse'
+  }),
+  ...((ownerState.position === 'alternate' || ownerState.position === 'alternate-reverse') && {
+    [`&:nth-of-type(${ownerState.position === 'alternate' ? 'even' : 'odd'})`]: {
+      flexDirection: 'row-reverse',
+      [`& .${timelineContentClasses.root}`]: {
+        textAlign: 'right'
+      },
+      [`& .${timelineOppositeContentClasses.root}`]: {
+        textAlign: 'left'
+      }
     }
-  }
-}, !ownerState.hasOppositeContent && {
-  '&::before': {
-    content: '""',
-    flex: 1,
-    padding: '6px 16px'
-  }
+  }),
+  ...(!ownerState.hasOppositeContent && {
+    '&::before': {
+      content: '""',
+      flex: 1,
+      padding: '6px 16px'
+    }
+  })
 }));
 const TimelineItem = /*#__PURE__*/React.forwardRef(function TimelineItem(inProps, ref) {
   const props = useThemeProps({
@@ -67,10 +67,10 @@ const TimelineItem = /*#__PURE__*/React.forwardRef(function TimelineItem(inProps
     name: 'MuiTimelineItem'
   });
   const {
-      position: positionProp,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    position: positionProp,
+    className,
+    ...other
+  } = props;
   const {
     position: positionContext
   } = React.useContext(TimelineContext);
@@ -80,21 +80,23 @@ const TimelineItem = /*#__PURE__*/React.forwardRef(function TimelineItem(inProps
       hasOppositeContent = true;
     }
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     position: positionProp || positionContext || 'right',
     hasOppositeContent
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const contextValue = React.useMemo(() => ({
     position: ownerState.position
   }), [ownerState.position]);
   return /*#__PURE__*/_jsx(TimelineContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(TimelineItemRoot, _extends({
+    children: /*#__PURE__*/_jsx(TimelineItemRoot, {
       className: clsx(classes.root, className),
       ownerState: ownerState,
-      ref: ref
-    }, other))
+      ref: ref,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TimelineItem.propTypes /* remove-proptypes */ = {

package/modern/TimelineOppositeContent/TimelineOppositeContent.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,13 +31,14 @@ const TimelineOppositeContentRoot = styled(Typography, {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   padding: '6px 16px',
   marginRight: 'auto',
   textAlign: 'right',
-  flex: 1
-}, ownerState.position === 'left' && {
-  textAlign: 'left'
+  flex: 1,
+  ...(ownerState.position === 'left' && {
+    textAlign: 'left'
+  })
 }));
 const TimelineOppositeContent = /*#__PURE__*/React.forwardRef(function TimelineOppositeContent(inProps, ref) {
   const props = useThemeProps({
@@ -48,22 +46,24 @@ const TimelineOppositeContent = /*#__PURE__*/React.forwardRef(function TimelineO
     name: 'MuiTimelineOppositeContent'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const {
     position: positionContext
   } = React.useContext(TimelineContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     position: positionContext || 'left'
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TimelineOppositeContentRoot, _extends({
+  return /*#__PURE__*/_jsx(TimelineOppositeContentRoot, {
     component: "div",
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TimelineOppositeContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/TimelineSeparator/TimelineSeparator.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -35,16 +32,17 @@ const TimelineSeparator = /*#__PURE__*/React.forwardRef(function TimelineSeparat
     name: 'MuiTimelineSeparator'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TimelineSeparatorRoot, _extends({
+  return /*#__PURE__*/_jsx(TimelineSeparatorRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TimelineSeparator.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ToggleButton/ToggleButton.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import ToggleButton from '@mui/material/ToggleButton';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +13,8 @@ export default /*#__PURE__*/React.forwardRef(function DeprecatedToggleButton(pro
     console.warn(['MUI: The ToggleButton component was moved from the lab to the core.', '', "You should use `import { ToggleButton } from '@mui/material'`", "or `import ToggleButton from '@mui/material/ToggleButton'`"].join('\n'));
     warnedOnce = true;
   }
-  return /*#__PURE__*/_jsx(ToggleButton, _extends({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/_jsx(ToggleButton, {
+    ref: ref,
+    ...props
+  });
 });

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +13,8 @@ export default /*#__PURE__*/React.forwardRef(function DeprecatedToggleButtonGrou
     console.warn(['MUI: The ToggleButtonGroup component was moved from the lab to the core.', '', "You should use `import { ToggleButtonGroup } from '@mui/material'`", "or `import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'`"].join('\n'));
     warnedOnce = true;
   }
-  return /*#__PURE__*/_jsx(ToggleButtonGroup, _extends({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/_jsx(ToggleButtonGroup, {
+    ref: ref,
+    ...props
+  });
 });

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v6.0.0-alpha.7
+ * @mui/lab v6.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/Alert/Alert.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,7 +21,8 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Deprecat
     console.warn(['MUI: The Alert component was moved from the lab to the core.', '', "You should use `import { Alert } from '@mui/material'`", "or `import Alert from '@mui/material/Alert'`"].join('\n'));
     warnedOnce = true;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, (0, _extends2.default)({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+    ref: ref,
+    ...props
+  });
 });

package/node/AlertTitle/AlertTitle.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _AlertTitle = _interopRequireDefault(require("@mui/material/AlertTitle"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,7 +21,8 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Deprecat
     console.warn(['MUI: The AlertTitle component was moved from the lab to the core.', '', "You should use `import { AlertTitle } from '@mui/material'`", "or `import AlertTitle from '@mui/material/AlertTitle'`"].join('\n'));
     warnedOnce = true;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AlertTitle.default, (0, _extends2.default)({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AlertTitle.default, {
+    ref: ref,
+    ...props
+  });
 });

package/node/Autocomplete/Autocomplete.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,7 +21,8 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Deprecat
     console.warn(['MUI: The Autocomplete component was moved from the lab to the core.', '', "You should use `import { Autocomplete } from '@mui/material'`", "or `import Autocomplete from '@mui/material/Autocomplete'`"].join('\n'));
     warnedOnce = true;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+    ref: ref,
+    ...props
+  });
 });

package/node/AvatarGroup/AvatarGroup.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _AvatarGroup = _interopRequireDefault(require("@mui/material/AvatarGroup"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,7 +21,8 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function Deprecat
     console.warn(['MUI: The AvatarGroup component was moved from the lab to the core.', '', "You should use `import { AvatarGroup } from '@mui/material'`", "or `import AvatarGroup from '@mui/material/AvatarGroup'`"].join('\n'));
     warnedOnce = true;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarGroup.default, (0, _extends2.default)({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarGroup.default, {
+    ref: ref,
+    ...props
+  });
 });