diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
index 316b168105c571..ae403a39b30dba 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -1,185 +1,24 @@
-import * as React from 'react';
-import { isFragment } from 'react-is';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core/utils';
-import isValueSelected from './isValueSelected';
-
-export const styles = (theme) => ({
- /* Styles applied to the root element. */
- root: {
- display: 'inline-flex',
- borderRadius: theme.shape.borderRadius,
- },
- /* Styles applied to the root element if `orientation="vertical"`. */
- vertical: {
- flexDirection: 'column',
- },
- /* Styles applied to the children. */
- grouped: {},
- /* Styles applied to the children if `orientation="horizontal"`. */
- groupedHorizontal: {
- '&:not(:first-child)': {
- marginLeft: -1,
- borderLeft: '1px solid transparent',
- borderTopLeftRadius: 0,
- borderBottomLeftRadius: 0,
- },
- '&:not(:last-child)': {
- borderTopRightRadius: 0,
- borderBottomRightRadius: 0,
- },
- },
- /* Styles applied to the children if `orientation="vertical"`. */
- groupedVertical: {
- '&:not(:first-child)': {
- marginTop: -1,
- borderTop: '1px solid transparent',
- borderTopLeftRadius: 0,
- borderTopRightRadius: 0,
- },
- '&:not(:last-child)': {
- borderBottomLeftRadius: 0,
- borderBottomRightRadius: 0,
- },
- },
-});
-
-const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref) {
- const {
- children,
- classes,
- className,
- exclusive = false,
- onChange,
- orientation = 'horizontal',
- size = 'medium',
- value,
- ...other
- } = props;
-
- const handleChange = (event, buttonValue) => {
- if (!onChange) {
- return;
- }
-
- const index = value && value.indexOf(buttonValue);
- let newValue;
-
- if (value && index >= 0) {
- newValue = value.slice();
- newValue.splice(index, 1);
- } else {
- newValue = value ? value.concat(buttonValue) : [buttonValue];
- }
-
- onChange(event, newValue);
- };
-
- const handleExclusiveChange = (event, buttonValue) => {
- if (!onChange) {
- return;
- }
-
- onChange(event, value === buttonValue ? null : buttonValue);
- };
-
- return (
-
- {React.Children.map(children, (child) => {
- if (!React.isValidElement(child)) {
- return null;
- }
-
- if (process.env.NODE_ENV !== 'production') {
- if (isFragment(child)) {
- console.error(
- [
- "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
- 'Consider providing an array instead.',
- ].join('\n'),
- );
- }
- }
-
- return React.cloneElement(child, {
- className: clsx(
- classes.grouped,
- classes[`grouped${capitalize(orientation)}`],
- child.props.className,
- ),
- onChange: exclusive ? handleExclusiveChange : handleChange,
- selected:
- child.props.selected === undefined
- ? isValueSelected(child.props.value, value)
- : child.props.selected,
- size: child.props.size || size,
- });
- })}
-
- );
+import React from 'react';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
+
+let warnedOnce = false;
+
+/**
+ * @ignore - do not document.
+ */
+export default React.forwardRef(function DeprecatedToggleButtonGroup(props, ref) {
+ if (!warnedOnce) {
+ console.warn(
+ [
+ 'Material-UI: The ToggleButtonGroup component was moved from the lab to the core.',
+ '',
+ "You should use `import { ToggleButtonGroup } from '@material-ui/core'`",
+ "or `import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'`",
+ ].join('\n'),
+ );
+
+ warnedOnce = true;
+ }
+
+ return ;
});
-
-ToggleButtonGroup.propTypes = {
- // ----------------------------- Warning --------------------------------
- // | These PropTypes are generated from the TypeScript type definitions |
- // | To update them edit the d.ts file and run "yarn proptypes" |
- // ----------------------------------------------------------------------
- /**
- * The content of the button.
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * If `true`, only allow one of the child ToggleButton values to be selected.
- * @default false
- */
- exclusive: PropTypes.bool,
- /**
- * Callback fired when the value changes.
- *
- * @param {object} event The event source of the callback.
- * @param {any} value of the selected buttons. When `exclusive` is true
- * this is a single value; when false an array of selected values. If no value
- * is selected and `exclusive` is true the value is null; when false an empty array.
- */
- onChange: PropTypes.func,
- /**
- * The group orientation (layout flow direction).
- * @default 'horizontal'
- */
- orientation: PropTypes.oneOf(['horizontal', 'vertical']),
- /**
- * The size of the buttons.
- * @default 'medium'
- */
- size: PropTypes.oneOf(['large', 'medium', 'small']),
- /**
- * The currently selected value within the group or an array of selected
- * values when `exclusive` is false.
- *
- * The value must have reference equality with the option in order to be selected.
- */
- value: PropTypes.any,
-};
-
-export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
index d39b3f31a382ff..316b168105c571 100644
--- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -2,8 +2,8 @@ import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { withStyles } from '../styles';
-import { capitalize } from '../utils';
+import { withStyles } from '@material-ui/core/styles';
+import { capitalize } from '@material-ui/core/utils';
import isValueSelected from './isValueSelected';
export const styles = (theme) => ({
@@ -131,3 +131,55 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref
);
});
+
+ToggleButtonGroup.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the d.ts file and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * The content of the button.
+ */
+ children: PropTypes.node,
+ /**
+ * Override or extend the styles applied to the component.
+ */
+ classes: PropTypes.object,
+ /**
+ * @ignore
+ */
+ className: PropTypes.string,
+ /**
+ * If `true`, only allow one of the child ToggleButton values to be selected.
+ * @default false
+ */
+ exclusive: PropTypes.bool,
+ /**
+ * Callback fired when the value changes.
+ *
+ * @param {object} event The event source of the callback.
+ * @param {any} value of the selected buttons. When `exclusive` is true
+ * this is a single value; when false an array of selected values. If no value
+ * is selected and `exclusive` is true the value is null; when false an empty array.
+ */
+ onChange: PropTypes.func,
+ /**
+ * The group orientation (layout flow direction).
+ * @default 'horizontal'
+ */
+ orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+ /**
+ * The size of the buttons.
+ * @default 'medium'
+ */
+ size: PropTypes.oneOf(['large', 'medium', 'small']),
+ /**
+ * The currently selected value within the group or an array of selected
+ * values when `exclusive` is false.
+ *
+ * The value must have reference equality with the option in order to be selected.
+ */
+ value: PropTypes.any,
+};
+
+export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);