A Selectable Group manages all the selection state
- -#### Select Many - -{{"demo": "pages/lab/selectable-group/Checkboxes.js"}} - -#### Select One - -{{"demo": "pages/lab/selectable-group/RadioButtons.js"}} - diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js index 230474dca1bc3e..53d5c1a2b724b7 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js @@ -7,7 +7,7 @@ import withStyles from '@material-ui/core/styles/withStyles'; import { fade } from '@material-ui/core/styles/colorManipulator'; import ButtonBase from '@material-ui/core/ButtonBase'; import withForwardedRef from '@material-ui/core/utils/withForwardedRef'; -import useSelectedState from '../SelectableGroup/useSelectedState'; +import useSelectedState from '@material-ui/core/internal/SelectableGroup/useSelectedState'; export const styles = theme => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js index b3c0dd54c35a1f..28e32c94769945 100644 --- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '@material-ui/core/styles/withStyles'; import withForwardedRef from '@material-ui/core/utils/withForwardedRef'; -import SelectableGroup from '../SelectableGroup'; +import SelectableGroup from '@material-ui/core/internal/SelectableGroup'; export const styles = theme => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 20dd0f074fbb1c..1288ec79bed41c 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -6,7 +6,7 @@ import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked'; import { capitalize } from '../utils/helpers'; import withStyles from '../styles/withStyles'; -import useSelectedState from '@material-ui/lab/SelectableGroup/useSelectedState'; +import useSelectedState from '../internal/SelectableGroup/useSelectedState'; export const styles = theme => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.js b/packages/material-ui/src/RadioGroup/RadioGroup.js index 332676c5ada87c..b05004f14c1308 100644 --- a/packages/material-ui/src/RadioGroup/RadioGroup.js +++ b/packages/material-ui/src/RadioGroup/RadioGroup.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import FormGroup from '../FormGroup'; -import SelectableGroup from '@material-ui/lab/SelectableGroup'; +import SelectableGroup from '../internal/SelectableGroup'; function RadioGroup(props) { const { children, defaultValue, name, onChange, value: valueProp, ...other } = props; diff --git a/packages/material-ui-lab/src/SelectableGroup/SelectableGroup.d.ts b/packages/material-ui/src/internal/SelectableGroup/SelectableGroup.d.ts similarity index 100% rename from packages/material-ui-lab/src/SelectableGroup/SelectableGroup.d.ts rename to packages/material-ui/src/internal/SelectableGroup/SelectableGroup.d.ts diff --git a/packages/material-ui-lab/src/SelectableGroup/SelectableGroup.js b/packages/material-ui/src/internal/SelectableGroup/SelectableGroup.js similarity index 94% rename from packages/material-ui-lab/src/SelectableGroup/SelectableGroup.js rename to packages/material-ui/src/internal/SelectableGroup/SelectableGroup.js index 3957717d289479..741661d4242c5c 100644 --- a/packages/material-ui-lab/src/SelectableGroup/SelectableGroup.js +++ b/packages/material-ui/src/internal/SelectableGroup/SelectableGroup.js @@ -2,8 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import * as utils from './utils'; import SelectableGroupContext from './SelectableGroupContext'; -import objectIs from '../utils/objectIs'; +import objectIs from '../../../../material-ui-lab/src/utils/objectIs'; +/** + * @ignore - internal component. + */ function SelectableGroup(props) { const [selected, setSelected] = React.useState(null); const { additional, children, exclusive, value: valueProp } = props; diff --git a/packages/material-ui-lab/src/SelectableGroup/SelectableGroupContext.js b/packages/material-ui/src/internal/SelectableGroup/SelectableGroupContext.js similarity index 100% rename from packages/material-ui-lab/src/SelectableGroup/SelectableGroupContext.js rename to packages/material-ui/src/internal/SelectableGroup/SelectableGroupContext.js diff --git a/packages/material-ui-lab/src/SelectableGroup/index.d.ts b/packages/material-ui/src/internal/SelectableGroup/index.d.ts similarity index 100% rename from packages/material-ui-lab/src/SelectableGroup/index.d.ts rename to packages/material-ui/src/internal/SelectableGroup/index.d.ts diff --git a/packages/material-ui-lab/src/SelectableGroup/index.js b/packages/material-ui/src/internal/SelectableGroup/index.js similarity index 100% rename from packages/material-ui-lab/src/SelectableGroup/index.js rename to packages/material-ui/src/internal/SelectableGroup/index.js diff --git a/packages/material-ui-lab/src/SelectableGroup/useSelectedState.js b/packages/material-ui/src/internal/SelectableGroup/useSelectedState.js similarity index 83% rename from packages/material-ui-lab/src/SelectableGroup/useSelectedState.js rename to packages/material-ui/src/internal/SelectableGroup/useSelectedState.js index 1358b0acafd831..7df16eead5e753 100644 --- a/packages/material-ui-lab/src/SelectableGroup/useSelectedState.js +++ b/packages/material-ui/src/internal/SelectableGroup/useSelectedState.js @@ -1,6 +1,9 @@ import React from 'react'; import SelectableGroupContext from './SelectableGroupContext'; +/** + * @ignore - internal component. + */ function useSelectedState() { return React.useContext(SelectableGroupContext); } diff --git a/packages/material-ui-lab/src/SelectableGroup/utils.js b/packages/material-ui/src/internal/SelectableGroup/utils.js similarity index 100% rename from packages/material-ui-lab/src/SelectableGroup/utils.js rename to packages/material-ui/src/internal/SelectableGroup/utils.js diff --git a/packages/material-ui-lab/src/SelectableGroup/withSelectableContext.js b/packages/material-ui/src/internal/SelectableGroup/withSelectableContext.js similarity index 94% rename from packages/material-ui-lab/src/SelectableGroup/withSelectableContext.js rename to packages/material-ui/src/internal/SelectableGroup/withSelectableContext.js index cfe4ef8a0ceb6a..3baeff54d7ac86 100644 --- a/packages/material-ui-lab/src/SelectableGroup/withSelectableContext.js +++ b/packages/material-ui/src/internal/SelectableGroup/withSelectableContext.js @@ -3,6 +3,9 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; import { getDisplayName } from '@material-ui/utils'; import useSelectedState from './useSelectedState'; +/** + * @ignore - internal component. + */ export default function withSelectableGroupContext(Component) { const WithSelectableGroupContext = props => { const selectState = useSelectedState(); diff --git a/pages/_app.js b/pages/_app.js index 55e9200675cbf4..8aca9dbac5fc0c 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -283,9 +283,6 @@ const pages = [ pathname: '/lab/about', title: 'About The Lab', }, - { - pathname: '/lab/selectable-group', - }, { pathname: '/lab/slider', }, diff --git a/pages/lab/api/selectable-group.js b/pages/lab/api/selectable-group.js deleted file mode 100644 index 24044fa748da71..00000000000000 --- a/pages/lab/api/selectable-group.js +++ /dev/null @@ -1,11 +0,0 @@ -import 'docs/src/modules/components/bootstrap'; -// --- Post bootstrap ----- -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './selectable-group.md'; - -function Page() { - returnThe API documentation of the SelectableGroup React component. Learn more about the properties and the CSS customization points.
- -```js -import SelectableGroup from '@material-ui/lab/SelectableGroup'; -``` - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| additional | object | | Additional props to pass down. | -| children | node | | The contents of the selectable group. | -| exclusive | bool | false | Only allows one value to be selected. | -| onChange | func | | Functioned called when value changes. | -| value | any | | The currently selected value within the group or an array of selected values when `exclusive` is false. | - -Any other properties supplied will be spread to the root element (native element). - -## Demos - -- [Selectable Group](/lab/selectable-group/) - diff --git a/pages/lab/selectable-group.js b/pages/lab/selectable-group.js deleted file mode 100644 index 834f9e6b46ae78..00000000000000 --- a/pages/lab/selectable-group.js +++ /dev/null @@ -1,18 +0,0 @@ -import 'docs/src/modules/components/bootstrap'; -// --- Post bootstrap ----- -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; - -const req = require.context('docs/src/pages/lab/selectable-group', false, /\.md|\.js$/); -const reqSource = require.context( - '!raw-loader!../../docs/src/pages/lab/selectable-group', - false, - /\.js$/, -); -const reqPrefix = 'pages/lab/selectable-group'; - -function Page() { - return