[Slider] Improve TS definition of unstyled

.circleci/config.yml

@@ -242,7 +242,9 @@ jobs:
           command: yarn typescript:ci
       - run:
           name: Test module augmenation
-          command: yarn workspace @material-ui/core typescript:module-augmentation
+          command: |
+            yarn workspace @material-ui/core typescript:module-augmentation
+            yarn workspace @material-ui/unstyled typescript:module-augmentation
 
       - restore_cache:
           name: Restore generated declaration files

packages/material-ui-unstyled/package.json

@@ -33,7 +33,8 @@
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "yarn build && npm publish build --tag next",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-unstyled/**/*.test.{js,ts,tsx}'",
-    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
+    "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json",
+    "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "peerDependencies": {
     "@types/react": "^16.8.6 || ^17.0.0",

packages/material-ui-unstyled/scripts/testModuleAugmentation.js

@@ -0,0 +1,65 @@
+const childProcess = require('child_process');
+const { chunk } = require('lodash');
+const glob = require('fast-glob');
+const path = require('path');
+const { promisify } = require('util');
+
+const exec = promisify(childProcess.exec);
+const packageRoot = path.resolve(__dirname, '../');
+
+async function test(tsconfigPath) {
+  try {
+    await exec(['yarn', 'tsc', '--project', tsconfigPath].join(' '), { cwd: packageRoot });
+  } catch (error) {
+    if (error.stdout !== undefined) {
+      // `exec` error
+      throw new Error(`exit code ${error.code}: ${error.stdout}`);
+    }
+    // Unknown error
+    throw error;
+  }
+}
+
+/**
+ * Tests various module augmentation scenarios.
+ * We can't run them with a single `tsc` run since these apply globally.
+ * Running them all would mean they're not isolated.
+ * Each test case represents a section in our docs.
+ *
+ * We're not using mocha since mocha is used for runtime tests.
+ * This script also allows us to test in parallel which we can't do with our mocha tests.
+ */
+async function main() {
+  const tsconfigPaths = await glob('test/typescript/moduleAugmentation/*.tsconfig.json', {
+    absolute: true,
+    cwd: packageRoot,
+  });
+  // Need to process in chunks or we might run out-of-memory
+  // approximate yarn lerna --concurrency 7
+  const tsconfigPathsChunks = chunk(tsconfigPaths, 7);
+
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const tsconfigPathsChunk of tsconfigPathsChunks) {
+    await Promise.all(
+      tsconfigPathsChunk.map(async (tsconfigPath) => {
+        await test(tsconfigPath).then(
+          () => {
+            // eslint-disable-next-line no-console -- test runner feedback
+            console.log(`PASS ${path.relative(process.cwd(), tsconfigPath)}`);
+          },
+          (error) => {
+            // don't bail but log the error
+            console.error(`FAIL ${path.relative(process.cwd(), tsconfigPath)}\n ${error}`);
+            // and mark the test as failed
+            process.exitCode = 1;
+          },
+        );
+      }),
+    );
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

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

@@ -1,6 +1,8 @@
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@material-ui/types';
 import { SliderUnstyledClasses } from './sliderUnstyledClasses';
 
+export interface SliderStylePropsOverrides {}
+
 export interface Mark {
   value: number;
   label?: React.ReactNode;
@@ -51,38 +53,43 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
      */
     componentsProps?: {
       root?: {
-        as: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        as?: React.ElementType;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderStylePropsOverrides;
       };
       track?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderStylePropsOverrides;
       };
       rail?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderStylePropsOverrides;
       };
       thumb?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderStylePropsOverrides;
       };
       mark?: {
         as?: React.ElementType;
         styleProps?: Omit<
           SliderUnstyledTypeMap<P, D>['props'],
           'components' | 'componentsProps'
-        > & { markActive?: boolean };
+        > & { markActive?: boolean } & SliderStylePropsOverrides;
       };
       markLabel?: {
         as?: React.ElementType;
         styleProps?: Omit<
           SliderUnstyledTypeMap<P, D>['props'],
           'components' | 'componentsProps'
-        > & { markLabelActive?: boolean };
+        > & { markLabelActive?: boolean } & SliderStylePropsOverrides;
       };
       valueLabel?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderStylePropsOverrides;
       };
     };
     /**

packages/material-ui-unstyled/test/typescript/moduleAugmentation/sliderStyleProps.spec.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SliderUnstyled } from '@material-ui/unstyled';
+
+declare module '@material-ui/unstyled' {
+  interface SliderStylePropsOverrides {
+    color?: 'primary' | 'secondary';
+  }
+}
+
+<SliderUnstyled componentsProps={{ root: { styleProps: { color: 'primary' } } }} />;
+
+// @ts-expect-error unknown color
+<SliderUnstyled componentsProps={{ root: { styleProps: { color: 'inherit' } } }} />;

packages/material-ui-unstyled/test/typescript/moduleAugmentation/sliderStyleProps.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../../tsconfig",
+  "files": ["sliderStyleProps.spec.tsx"]
+}