[unstyled] Create package and move SliderUnstyled there (#23270)

.codesandbox/ci.json

@@ -8,6 +8,7 @@
     "packages/material-ui-system",
     "packages/material-ui-types",
     "packages/material-ui-utils",
+    "packages/material-ui-unstyled",
     "packages/material-ui-styled-engine",
     "packages/material-ui-styled-engine-sc"
   ],
@@ -20,7 +21,8 @@
     "@material-ui/styled-engine-sc": "packages/material-ui-styled-engine-sc/build",
     "@material-ui/system": "packages/material-ui-system/build",
     "@material-ui/types": "packages/material-ui-types",
-    "@material-ui/utils": "packages/material-ui-utils/build"
+    "@material-ui/utils": "packages/material-ui-utils/build",
+    "@material-ui/unstyled": "packages/material-ui-unstyled/build"
   },
   "sandboxes": [
     "material-ui-issue-dh2yh",

babel.config.js

@@ -12,6 +12,7 @@ const defaultAlias = {
   '@material-ui/styled-engine-sc': './packages/material-ui-styled-engine-sc/src',
   '@material-ui/styles': './packages/material-ui-styles/src',
   '@material-ui/system': './packages/material-ui-system/src',
+  '@material-ui/unstyled': './packages/material-ui-unstyled/src',
   '@material-ui/utils': './packages/material-ui-utils/src',
   'typescript-to-proptypes': './packages/typescript-to-proptypes/src',
 };

docs/babel.config.js

@@ -25,6 +25,7 @@ const alias = {
   // '@material-ui/styled-engine': '../packages/material-ui-styled-engine-sc/src',
   '@material-ui/system': '../packages/material-ui-system/src',
   '@material-ui/utils': '../packages/material-ui-utils/src',
+  '@material-ui/unstyled': '../packages/material-ui-unstyled/src',
   docs: './',
   modules: '../modules',
   pages: './pages',

docs/next.config.js

@@ -131,6 +131,7 @@ module.exports = {
                         '@material-ui/styles': '../packages/material-ui-styles/src',
                         '@material-ui/system': '../packages/material-ui-system/src',
                         '@material-ui/utils': '../packages/material-ui-utils/src',
+                        '@material-ui/unstyled': '../packages/material-ui-unstyled/src',
                       },
                       transformFunctions: ['require'],
                     },

docs/package.json

@@ -38,6 +38,7 @@
     "@material-ui/styles": "^5.0.0-alpha.1",
     "@material-ui/system": "^5.0.0-alpha.1",
     "@material-ui/types": "^5.0.0",
+    "@material-ui/unstyled": "^5.0.0-alpha.1",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/css-mediaquery": "^0.1.0",

docs/pages/api-docs/slider-unstyled.md

@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
+filename: /packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
 ## Import
 
 ```js
-import SliderUnstyled from '@material-ui/lab/SliderUnstyled';
+import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
 // or
-import { SliderUnstyled } from '@material-ui/lab';
+import { SliderUnstyled } from '@material-ui/unstyled';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).

docs/src/modules/utils/helpers.js

@@ -140,6 +140,7 @@ function getDependencies(raw, options = {}) {
     '@material-ui/styled-engine-sc': getMuiPackageVersion('styled-engine-sc', muiCommitRef),
     '@material-ui/styles': getMuiPackageVersion('styles', muiCommitRef),
     '@material-ui/system': getMuiPackageVersion('system', muiCommitRef),
+    '@material-ui/unstyled': getMuiPackageVersion('unstyled', muiCommitRef),
     '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef),
     '@material-ui/pickers': 'next',
     '@emotion/core': 'latest',

docs/src/pages/components/slider-styled/UnstyledSlider.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
-import SliderUnstyled from '@material-ui/lab/SliderUnstyled';
+import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
 
 const StyledSlider = styled(SliderUnstyled)`
   color: black;

docs/src/pages/components/slider-styled/UnstyledSlider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
-import SliderUnstyled from '@material-ui/lab/SliderUnstyled';
+import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
 
 const StyledSlider = styled(SliderUnstyled)`
   color: black;

package.json

@@ -8,7 +8,7 @@
     "benchmark:browser": "yarn workspace benchmark browser",
     "build:codesandbox": "lerna run --parallel --scope \"@material-ui/*\" build",
     "docs:api": "rimraf ./docs/pages/api-docs && yarn docs:api:build",
-    "docs:api:build": "cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/buildApi.ts  ./docs/pages/api-docs ./packages/material-ui/src ./packages/material-ui-lab/src",
+    "docs:api:build": "cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/buildApi.ts  ./docs/pages/api-docs ./packages/material-ui-unstyled/src ./packages/material-ui/src ./packages/material-ui-lab/src",
     "docs:build": "yarn workspace docs build",
     "docs:build-sw": "yarn workspace docs build-sw",
     "docs:build-color-preview": "babel-node scripts/buildColorTypes",

packages/material-ui-lab/package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.4",
     "@material-ui/system": "^5.0.0-alpha.14",
+    "@material-ui/unstyled": "^5.0.0-alpha.14",
     "@material-ui/utils": "^5.0.0-alpha.14",
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",

packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/core/Box';
-import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled } from '../SliderUnstyled';
+import {
+  ExtendSliderUnstyledTypeMap,
+  ExtendSliderUnstyled,
+} from '@material-ui/unstyled/SliderUnstyled';
 
 export type SliderStyledTypeMap<
   D extends React.ElementType = 'span',

packages/material-ui-lab/src/SliderStyled/SliderStyled.js

@@ -8,7 +8,7 @@ import {
   darken,
 } from '@material-ui/core/styles';
 import { capitalize } from '@material-ui/core/utils';
-import SliderUnstyled from '../SliderUnstyled';
+import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
 import ValueLabelStyled from './ValueLabelStyled';
 
 const overridesResolver = (props, styles, name) => {

packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useThemeProps, experimentalStyled } from '@material-ui/core/styles';
-import ValueLabelUnstyled from '../SliderUnstyled/ValueLabelUnstyled';
+import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled';
 
 const overridesResolver = (_, styles) => {
   const componentName = 'MuiSlider-valueLabel';

packages/material-ui-lab/src/index.d.ts

@@ -25,9 +25,6 @@ export * from './Skeleton';
 export { default as SliderStyled } from './SliderStyled';
 export * from './SliderStyled';
 
-export { default as SliderUnstyled } from './SliderUnstyled';
-export * from './SliderUnstyled';
-
 export { default as SpeedDial } from './SpeedDial';
 export * from './SpeedDial';
 

packages/material-ui-lab/src/index.js

@@ -29,9 +29,6 @@ export * from './Skeleton';
 export { default as SliderStyled } from './SliderStyled';
 export * from './SliderStyled';
 
-export { default as SliderUnstyled } from './SliderUnstyled';
-export * from './SliderUnstyled';
-
 export { default as SpeedDial } from './SpeedDial';
 export * from './SpeedDial';
 

packages/material-ui-unstyled/README.md

@@ -0,0 +1,19 @@
+# @material-ui/unstyled
+
+This package hosts unstyled React components that can be used for creating custom design systems.
+
+## Installation
+
+Install the package in your project directory with:
+
+```sh
+// with npm
+npm install @material-ui/unstyled@next
+
+// with yarn
+yarn add @material-ui/unstyled@next
+```
+
+## Documentation
+
+[The documentation](https://material-ui.com/)

packages/material-ui-unstyled/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@material-ui/unstyled",
+  "version": "5.0.0-alpha.14",
+  "private": false,
+  "author": "Material-UI Team",
+  "description": "Material-UI Unstyled - collection of unstyled React components.",
+  "main": "./src/index.js",
+  "keywords": [
+    "react",
+    "react-component",
+    "material-ui",
+    "unstyled"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui-org/material-ui.git",
+    "directory": "packages/material-ui-unstyled"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui-org/material-ui/issues"
+  },
+  "homepage": "https://material-ui.com",
+  "scripts": {
+    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build:legacy": "node ../../scripts/build legacy",
+    "build:modern": "node ../../scripts/build modern",
+    "build:node": "node ../../scripts/build node",
+    "build:stable": "node ../../scripts/build stable",
+    "build:copy-files": "node ../../scripts/copy-files.js",
+    "prebuild": "rimraf build",
+    "release": "yarn build && npm publish build --tag next",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-lab/**/*.test.{js,ts,tsx}'",
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.8.6",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.4.4",
+    "@material-ui/utils": "^5.0.0-alpha.14",
+    "clsx": "^1.0.4",
+    "prop-types": "^15.7.2",
+    "react-is": "^16.8.0"
+  },
+  "devDependencies": {
+    "@material-ui/types": "^5.1.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  }
+}

packages/material-ui-unstyled/src/OverridableComponent.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Omit } from '@material-ui/types';
+
+/**
+ * A component whose root component can be controlled via a `component` prop.
+ *
+ * Adjusts valid props based on the type of `component`.
+ */
+export interface OverridableComponent<M extends OverridableTypeMap> {
+  <C extends React.ElementType>(
+    props: {
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
+      component: C;
+    } & OverrideProps<M, C>
+  ): JSX.Element;
+  (props: DefaultComponentProps<M>): JSX.Element;
+}
+
+/**
+ * Props of the component if `component={Component}` is used.
+ */
+// prettier-ignore
+export type OverrideProps<
+  M extends OverridableTypeMap,
+  C extends React.ElementType
+> = (
+  & BaseProps<M>
+  & Omit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
+);
+
+/**
+ * Props if `component={Component}` is NOT used.
+ */
+// prettier-ignore
+export type DefaultComponentProps<M extends OverridableTypeMap> =
+  & BaseProps<M>
+  & Omit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+
+/**
+ * Props defined on the component (+ common material-ui props).
+ */
+// prettier-ignore
+export type BaseProps<M extends OverridableTypeMap> = M['props'];
+
+export interface OverridableTypeMap {
+  props: {};
+  defaultComponent: React.ElementType;
+}

packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts → packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts

@@ -1,4 +1,4 @@
-import { OverridableComponent, OverridableTypeMap } from '@material-ui/core/OverridableComponent';
+import { OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 
 export interface Mark {
   value: number;

packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js → packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
 import {
-  useIsFocusVisible,
+  chainPropTypes,
+  unstable_useIsFocusVisible as useIsFocusVisible,
   unstable_useEnhancedEffect as useEnhancedEffect,
-  ownerDocument,
-  useEventCallback,
-  useForkRef,
-  capitalize,
-  useControlled,
-} from '@material-ui/core/utils';
+  unstable_ownerDocument as ownerDocument,
+  unstable_useEventCallback as useEventCallback,
+  unstable_useForkRef as useForkRef,
+  unstable_capitalize as capitalize,
+  unstable_useControlled as useControlled,
+} from '@material-ui/utils';
 import ValueLabelComponent from './ValueLabelUnstyled';
 
 function asc(a, b) {

packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+export interface ValueLabelUnstyledProps {
+  className?: string;
+  style?: React.CSSProperties;
+  /**
+   * The components used for each slot inside the ValueLabel.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+  };
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: number | number[];
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay?: 'on' | 'auto' | 'off';
+}
+
+export default function ValueLabel(props: ValueLabelUnstyledProps): JSX.Element;

packages/material-ui-lab/src/SliderUnstyled/ValueLabelUnstyled.js → packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { capitalize } from '@material-ui/core/utils';
 import clsx from 'clsx';
+import { unstable_capitalize as capitalize } from '@material-ui/utils';
 
 const getUtilityClass = (name) => {
   return `MuiSlider-valueLabel${capitalize(name)}`;

packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './SliderUnstyled';
+export * from './SliderUnstyled';
+export { default as ValueLabelUnstyled } from './ValueLabelUnstyled';
+export * from './ValueLabelUnstyled';

packages/material-ui-unstyled/src/SliderUnstyled/index.js

@@ -0,0 +1,2 @@
+export { default } from './SliderUnstyled';
+export { default as ValueLabelUnstyled } from './ValueLabelUnstyled';

packages/material-ui-unstyled/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SliderUnstyled } from './SliderUnstyled';
+export * from './SliderUnstyled';

packages/material-ui-unstyled/src/index.js

@@ -0,0 +1,2 @@
+export { default as SliderUnstyled } from './SliderUnstyled';
+export * from './SliderUnstyled';