Merge pull request mui#40 from material-next/sync-2

Sync 2

docs/src/pages/guides/typescript.md

@@ -120,26 +120,21 @@ And a custom theme factory with additional defaulted options:
 
 ```jsx
 import { default as createMuiTheme, ThemeOptions } from '@material-next/core/styles/createMuiTheme'
-import { merge } from 'lodash'
 
 export default function createMyTheme(options: ThemeOptions) {
-  return createMuiTheme(
-    merge(
-      {
-        appDrawer: {
-          width: 225,
-          breakpoint: 'lg',
-        },
-      },
-      options,
-    ),
-  )
+  return createMuiTheme({
+    appDrawer: {
+      width: 225,
+      breakpoint: 'lg',
+    },
+    ...options,
+  })
 }
 ```
 
 This could be used like:
 
-```js
+```jsx
 import createMyTheme from './styles/createMyTheme'
 
 const theme = createMyTheme({appDrawer: {breakpoint: 'md'}})

examples/create-react-app-with-typescript/tslint.json

@@ -26,9 +26,13 @@
         "max-line-length": [ true, 120 ],
         "member-ordering": [
             true,
-            "public-before-private",
-            "static-before-instance",
-            "variables-before-functions"
+            {
+              "order":[
+                "public-before-private",
+                "static-before-instance",
+                "variables-before-functions"
+              ]
+            }
         ],
         "no-any": false,
         "no-arg": true,

src/Table/Table.d.ts

@@ -2,9 +2,13 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface TableProps extends StandardProps<
-  React.TableHTMLAttributes<HTMLTableElement>,
+  TableBaseProps,
   TableClassKey
-> {}
+> {
+  component?: string | React.ComponentType<TableBaseProps>;
+}
+
+export type TableBaseProps = React.TableHTMLAttributes<HTMLTableElement>;
 
 export type TableClassKey =
   | 'root'

src/Table/TableBody.d.ts

@@ -2,9 +2,13 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface TableBodyProps extends StandardProps<
-  React.HTMLAttributes<HTMLTableSectionElement>,
+  TableBodyBaseProps,
   TableBodyClassKey
-> {}
+> {
+  component?: string | React.ComponentType<TableBodyBaseProps>;
+}
+
+export type TableBodyBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 export type TableBodyClassKey =
   | 'root'

src/Table/TableCell.d.ts

@@ -10,13 +10,19 @@ import { StandardProps } from '..';
  * here.
  */
 export interface TableCellProps extends StandardProps<
-  React.ThHTMLAttributes<HTMLTableHeaderCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement>,
+  TableCellBaseProps,
   TableCellClassKey
 > {
+  component?: string | React.ComponentType<TableCellBaseProps>;
   padding?: Padding;
   numeric?: boolean;
 }
 
+export type TableCellBaseProps =
+  & React.ThHTMLAttributes<HTMLTableHeaderCellElement>
+  & React.TdHTMLAttributes<HTMLTableDataCellElement>
+  ;
+
 export type Padding =
   | 'default'
   | 'checkbox'

src/Table/TableFooter.d.ts

@@ -2,9 +2,13 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface TableFooterProps extends StandardProps<
-  React.HTMLAttributes<HTMLTableSectionElement>,
+  TableFooterBaseProps,
   TableFooterClassKey
-> {}
+> {
+  component?: string | React.ComponentType<TableFooterBaseProps>;
+}
+
+export type TableFooterBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 export type TableFooterClassKey =
   | 'root'

src/Table/TableHead.d.ts

@@ -2,9 +2,13 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface TableHeadProps extends StandardProps<
-  React.HTMLAttributes<HTMLTableSectionElement>,
+  TableHeadBaseProps,
   TableHeadClassKey
-> {}
+> {
+  component?: string | React.ComponentType<TableHeadBaseProps>;
+}
+
+export type TableHeadBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 export type TableHeadClassKey =
   | 'root'

src/Table/TablePagination.d.ts

@@ -10,9 +10,10 @@ export interface LabelDisplayedRowsArgs {
 }
 
 export interface TablePaginationProps extends StandardProps<
-  TableCellProps,
+  TablePaginationBaseProps,
   TablePaginationClassKey
 > {
+  component?: string | React.ComponentType<TablePaginationBaseProps>;
   count: number;
   labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode;
   labelRowsPerPage?: React.ReactNode;
@@ -23,6 +24,8 @@ export interface TablePaginationProps extends StandardProps<
   rowsPerPageOptions?: number[];
 }
 
+export type TablePaginationBaseProps = TableCellProps;
+
 export type TablePaginationClassKey =
   | TableCellClassKey
   | 'toolbar'

src/Table/TableRow.d.ts

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface TableRowProps extends StandardProps<
-  React.HTMLAttributes<HTMLTableRowElement>,
+  TableRowBaseProps,
   TableRowClassKey
 > {
+  component?: string | React.ComponentType<TableRowBaseProps>;
   hover?: boolean;
   selected?: boolean;
 }
 
+export type TableRowBaseProps = React.HTMLAttributes<HTMLTableRowElement>;
+
 export type TableRowClassKey =
   | 'root'
   | 'head'

src/index.d.ts

@@ -48,6 +48,11 @@ type Diff<T extends string, U extends string> = (
 /** @internal */
 export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 
+/** @internal */
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>;
+}
+
 export namespace PropTypes {
   type Alignment = 'inherit' | 'left' | 'center' | 'right' | 'justify';
   type Color = 'inherit' | 'primary' | 'accent' | 'default';

src/styles/createBreakpoints.d.ts

@@ -2,12 +2,6 @@ export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type BreakpointValues = { [key in Breakpoint]: number };
 export const keys: Breakpoint[];
 
-export interface BreakpointsOptions {
-  values: BreakpointValues;
-  unit: string;
-  step: number;
-}
-
 export interface Breakpoints {
   keys: Breakpoint[];
   values: BreakpointValues;
@@ -18,6 +12,11 @@ export interface Breakpoints {
   width: (key: Breakpoint) => number;
 }
 
+export type BreakpointsOptions = Partial<{
+  unit: string;
+  step: number;
+} & Breakpoints>;
+
 export default function createBreakpoints(
-  options: Partial<BreakpointsOptions> & Partial<Breakpoints>
+  options: BreakpointsOptions
 ): Breakpoints;

src/styles/createMixins.d.ts

@@ -5,10 +5,15 @@ import { StyleRules } from '../styles';
 export interface Mixins {
   gutters: (styles: React.CSSProperties) => React.CSSProperties;
   toolbar: React.CSSProperties;
+  // ... use interface declaration merging to add custom mixins
 }
 
-export default function createMixins<T = {}>(
+export interface MixinsOptions extends Partial<Mixins> {
+  // ... use interface declaration merging to add custom mixin options
+}
+
+export default function createMixins(
   breakpoints: Breakpoints,
   spacing: Spacing,
-  mixins: T
-): Mixins & T;
+  mixins: MixinsOptions,
+): Mixins;

src/styles/createMuiTheme.d.ts

@@ -1,25 +1,25 @@
 import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
-import { Mixins } from './createMixins';
-import { Palette } from './createPalette';
+import { Mixins, MixinsOptions } from './createMixins';
+import { Palette, PaletteOptions } from './createPalette';
 import { Shadows } from './shadows';
-import { Spacing } from './spacing';
-import { Transitions } from './transitions';
+import { Spacing, SpacingOptions } from './spacing';
+import { Transitions, TransitionsOptions } from './transitions';
 import { Typography, TypographyOptions } from './createTypography';
-import { ZIndex } from './zIndex';
+import { ZIndex, ZIndexOptions } from './zIndex';
 import { Overrides } from './overrides'
 
 export type Direction = 'ltr' | 'rtl';
 
 export interface ThemeOptions {
   direction?: Direction;
-  palette?: Partial<Palette>;
+  palette?: PaletteOptions;
   typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
-  mixins?: Partial<Mixins>;
-  breakpoints?: Partial<BreakpointsOptions> & Partial<Breakpoints>;
+  mixins?: MixinsOptions;
+  breakpoints?: BreakpointsOptions;
   shadows?: Shadows;
-  transitions?: Partial<Transitions>;
-  spacing?: Partial<Spacing>;
-  zIndex?: Partial<ZIndex>;
+  transitions?: TransitionsOptions;
+  spacing?: SpacingOptions;
+  zIndex?: ZIndexOptions;
   overrides?: Overrides;
 }
 

src/styles/createPalette.d.ts

@@ -1,4 +1,4 @@
-import { Color, Contrast } from '..';
+import { Color, Contrast, DeepPartial } from '..';
 import { CommonColors } from '../colors/common';
 
 interface ShadeText {
@@ -60,6 +60,8 @@ export interface Palette {
   getContrastText: (color: string) => string;
 }
 
+export type PaletteOptions = DeepPartial<Palette>;
+
 export default function createPalette(
-  palette: Partial<Palette>
+  palette: PaletteOptions
 ): Palette;

src/styles/createTypography.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Palette } from './createPalette';
+import { DeepPartial } from '..'
 
 export type TextStyle =
   | 'display1'
@@ -36,7 +37,7 @@ export interface TypographyStyle {
 
 export type Typography = { [type in Style]: TypographyStyle } & FontStyle;
 
-export type TypographyOptions = Partial<FontStyle> & Partial<Typography>;
+export type TypographyOptions = DeepPartial<Typography>;
 
 export default function createTypography(
   palette: Palette,

src/styles/createTypography.spec.js

@@ -34,4 +34,10 @@ describe('createTypography', () => {
     const typography = createTypography(palette, { htmlFontSize: 10 });
     assert.strictEqual(typography.display4.fontSize, '11.2rem');
   });
+
+  it('should create a typography with custom display4', () => {
+    const customFontSize = '18px';
+    const typography = createTypography(palette, { display4: { fontSize: customFontSize } });
+    assert.strictEqual(typography.display4.fontSize, customFontSize);
+  });
 });

src/styles/spacing.d.ts

@@ -1,5 +1,11 @@
+import { DeepPartial } from '../index';
+
 export interface Spacing { 
   unit: number
 }
-declare const spacing: Spacing
-export default spacing
+
+export type SpacingOptions = DeepPartial<Spacing>;
+
+declare const spacing: Spacing;
+
+export default spacing;

src/styles/transitions.d.ts

@@ -1,3 +1,5 @@
+import { DeepPartial } from '../index';
+
 export interface Easing {
   easeInOut: string;
   easeOut: string;
@@ -29,4 +31,6 @@ export interface Transitions {
   getAutoHeightDuration(height: number): number;
 }
 
+export type TransitionsOptions = DeepPartial<Transitions>;
+
 export default Transitions;

src/styles/withTheme.d.ts

@@ -4,7 +4,7 @@ export interface WithTheme {
   theme: Theme
 }
 
-declare const withTheme: <P = {}>() => (
+declare const withTheme: () => <P>(
   component: React.ComponentType<P & WithTheme>
 ) => React.ComponentClass<P>;
 

src/styles/zIndex.d.ts

@@ -1,3 +1,5 @@
+import { DeepPartial } from '../index';
+
 export interface ZIndex {
   mobileStepper: number;
   menu: number;
@@ -11,5 +13,9 @@ export interface ZIndex {
   snackbar: number;
   tooltip: number;
 }
-declare const zIndex: ZIndex
+
+export type ZIndexOptions = DeepPartial<ZIndex>;
+
+declare const zIndex: ZIndex;
+
 export default zIndex;