init project

packages/mui-material/src/AppBar/AppBar.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { PropTypes, Theme } from '../styles';
+import { AppBarClasses } from './appBarClasses';
+import { ExtendPaperTypeMap } from '../Paper/Paper';
+
+export interface AppBarPropsColorOverrides {}
+
+export interface AppBarOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AppBarClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<
+    PropTypes.Color | 'transparent' | 'error' | 'info' | 'success' | 'warning',
+    AppBarPropsColorOverrides
+  >;
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 4
+   */
+  elevation?: number;
+  /**
+   * If true, the `color` prop is applied in dark mode.
+   * @default false
+   */
+  enableColorOnDark?: boolean;
+  /**
+   * The positioning type. The behavior of the different options is described
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position).
+   * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+   * @default 'fixed'
+   */
+  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
+  /**
+   * If `false`, rounded corners are enabled.
+   * @default true
+   */
+  square?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export type AppBarTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'header',
+> = ExtendPaperTypeMap<
+  {
+    props: AdditionalProps & AppBarOwnProps;
+    defaultComponent: RootComponent;
+  },
+  'position' | 'color' | 'classes' | 'elevation' | 'square'
+>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
+ *
+ * API:
+ *
+ * - [AppBar API](https://mui.com/material-ui/api/app-bar/)
+ * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ */
+
+declare const AppBar: OverridableComponent<AppBarTypeMap>;
+
+export type AppBarProps<
+  RootComponent extends React.ElementType = AppBarTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AppBarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default AppBar;

packages/mui-material/src/AppBar/AppBar.js

@@ -0,0 +1,276 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+import { useDefaultProps } from '../DefaultPropsProvider';
+import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
+import Paper from '../Paper';
+import { getAppBarUtilityClass } from './appBarClasses';
+
+const useUtilityClasses = (ownerState) => {
+  const { color, position, classes } = ownerState;
+
+  const slots = {
+    root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`],
+  };
+
+  return composeClasses(slots, getAppBarUtilityClass, classes);
+};
+
+// var2 is the fallback.
+// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
+const joinVars = (var1, var2) => (var1 ? `${var1?.replace(')', '')}, ${var2})` : var2);
+
+const AppBarRoot = styled(Paper, {
+  name: 'MuiAppBar',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.root,
+      styles[`position${capitalize(ownerState.position)}`],
+      styles[`color${capitalize(ownerState.color)}`],
+    ];
+  },
+})(
+  memoTheme(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
+    flexShrink: 0,
+    variants: [
+      {
+        props: { position: 'fixed' },
+        style: {
+          position: 'fixed',
+          zIndex: (theme.vars || theme).zIndex.appBar,
+          top: 0,
+          left: 'auto',
+          right: 0,
+          '@media print': {
+            // Prevent the app bar to be visible on each printed page.
+            position: 'absolute',
+          },
+        },
+      },
+      {
+        props: { position: 'absolute' },
+        style: {
+          position: 'absolute',
+          zIndex: (theme.vars || theme).zIndex.appBar,
+          top: 0,
+          left: 'auto',
+          right: 0,
+        },
+      },
+      {
+        props: { position: 'sticky' },
+        style: {
+          position: 'sticky',
+          zIndex: (theme.vars || theme).zIndex.appBar,
+          top: 0,
+          left: 'auto',
+          right: 0,
+        },
+      },
+      {
+        props: { position: 'static' },
+        style: {
+          position: 'static',
+        },
+      },
+      {
+        props: { position: 'relative' },
+        style: {
+          position: 'relative',
+        },
+      },
+      {
+        props: { color: 'inherit' },
+        style: {
+          '--AppBar-color': 'inherit',
+        },
+      },
+      {
+        props: { color: 'default' },
+        style: {
+          '--AppBar-background': theme.vars
+            ? theme.vars.palette.AppBar.defaultBg
+            : theme.palette.grey[100],
+          '--AppBar-color': theme.vars
+            ? theme.vars.palette.text.primary
+            : theme.palette.getContrastText(theme.palette.grey[100]),
+          ...theme.applyStyles('dark', {
+            '--AppBar-background': theme.vars
+              ? theme.vars.palette.AppBar.defaultBg
+              : theme.palette.grey[900],
+            '--AppBar-color': theme.vars
+              ? theme.vars.palette.text.primary
+              : theme.palette.getContrastText(theme.palette.grey[900]),
+          }),
+        },
+      },
+      ...Object.entries(theme.palette)
+        .filter(createSimplePaletteValueFilter(['contrastText']))
+        .map(([color]) => ({
+          props: { color },
+          style: {
+            '--AppBar-background': (theme.vars ?? theme).palette[color].main,
+            '--AppBar-color': (theme.vars ?? theme).palette[color].contrastText,
+          },
+        })),
+      {
+        props: (props) =>
+          props.enableColorOnDark === true && !['inherit', 'transparent'].includes(props.color),
+        style: {
+          backgroundColor: 'var(--AppBar-background)',
+          color: 'var(--AppBar-color)',
+        },
+      },
+      {
+        props: (props) =>
+          props.enableColorOnDark === false && !['inherit', 'transparent'].includes(props.color),
+        style: {
+          backgroundColor: 'var(--AppBar-background)',
+          color: 'var(--AppBar-color)',
+          ...theme.applyStyles('dark', {
+            backgroundColor: theme.vars
+              ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)')
+              : null,
+            color: theme.vars
+              ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)')
+              : null,
+          }),
+        },
+      },
+      {
+        props: { color: 'transparent' },
+        style: {
+          '--AppBar-background': 'transparent',
+          '--AppBar-color': 'inherit',
+          backgroundColor: 'var(--AppBar-background)',
+          color: 'var(--AppBar-color)',
+          ...theme.applyStyles('dark', {
+            backgroundImage: 'none',
+          }),
+        },
+      },
+    ],
+  })),
+);
+
+const AppBar = React.forwardRef(function AppBar(inProps, ref) {
+  const props = useDefaultProps({ props: inProps, name: 'MuiAppBar' });
+  const {
+    className,
+    color = 'primary',
+    enableColorOnDark = false,
+    position = 'fixed',
+    ...other
+  } = props;
+
+  const ownerState = {
+    ...props,
+    color,
+    position,
+    enableColorOnDark,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <AppBarRoot
+      square
+      component="header"
+      ownerState={ownerState}
+      elevation={4}
+      className={clsx(
+        classes.root,
+        {
+          'mui-fixed': position === 'fixed', // Useful for the Dialog
+        },
+        className,
+      )}
+      ref={ref}
+      {...other}
+    />
+  );
+});
+
+AppBar.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf([
+      'default',
+      'inherit',
+      'primary',
+      'secondary',
+      'transparent',
+      'error',
+      'info',
+      'success',
+      'warning',
+    ]),
+    PropTypes.string,
+  ]),
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 4
+   */
+  elevation: PropTypes.number,
+  /**
+   * If true, the `color` prop is applied in dark mode.
+   * @default false
+   */
+  enableColorOnDark: PropTypes.bool,
+  /**
+   * The positioning type. The behavior of the different options is described
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position).
+   * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+   * @default 'fixed'
+   */
+  position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
+  /**
+   * If `false`, rounded corners are enabled.
+   * @default true
+   */
+  square: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
+export default AppBar;

packages/mui-material/src/AppBar/AppBar.spec.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { expectType } from '@mui/types';
+import AppBar from '@mui/material/AppBar';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+function AppBarTest() {
+  return (
+    <div>
+      <AppBar />
+      <AppBar elevation={4} />
+
+      <AppBar
+        component="a"
+        href="test"
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLAnchorElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+      <AppBar component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error missing stringProp and numberProp */}
+      <AppBar component={CustomComponent} />
+    </div>
+  );
+}
+
+// `color`
+<AppBar color="inherit" />;
+<AppBar color="primary" />;
+<AppBar color="secondary" />;
+<AppBar color="default" />;
+<AppBar color="transparent" />;
+<AppBar color="error" />;
+<AppBar color="success" />;
+<AppBar color="info" />;
+<AppBar color="warning" />;

packages/mui-material/src/AppBar/AppBar.test.js

@@ -0,0 +1,99 @@
+import { expect } from 'chai';
+import { createRenderer, screen, isJsdom } from '@mui/internal-test-utils';
+import AppBar, { appBarClasses as classes } from '@mui/material/AppBar';
+import Paper from '@mui/material/Paper';
+import { ThemeProvider, CssVarsProvider, hexToRgb } from '@mui/material/styles';
+import defaultTheme from '../styles/defaultTheme';
+import describeConformance from '../../test/describeConformance';
+
+describe('<AppBar />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<AppBar>Conformance?</AppBar>, () => ({
+    classes,
+    inheritComponent: Paper,
+    render,
+    muiName: 'MuiAppBar',
+    refInstanceof: window.HTMLElement,
+    testVariantProps: { position: 'relative' },
+    testStateOverrides: { prop: 'color', value: 'secondary', styleKey: 'colorSecondary' },
+    skip: ['componentsProp'],
+  }));
+
+  it('should render with the root class and primary', () => {
+    const { container } = render(<AppBar>Hello World</AppBar>);
+    const appBar = container.firstChild;
+    expect(appBar).to.have.class(classes.root);
+    expect(appBar).to.have.class(classes.colorPrimary);
+    expect(appBar).not.to.have.class(classes.colorSecondary);
+  });
+
+  it('should render a primary app bar', () => {
+    const { container } = render(<AppBar color="primary">Hello World</AppBar>);
+    const appBar = container.firstChild;
+    expect(appBar).to.have.class(classes.root);
+    expect(appBar).to.have.class(classes.colorPrimary);
+    expect(appBar).not.to.have.class(classes.colorSecondary);
+  });
+
+  it('should render an secondary app bar', () => {
+    const { container } = render(<AppBar color="secondary">Hello World</AppBar>);
+    const appBar = container.firstChild;
+    expect(appBar).to.have.class(classes.root);
+    expect(appBar).not.to.have.class(classes.colorPrimary);
+    expect(appBar).to.have.class(classes.colorSecondary);
+  });
+
+  it('should change elevation', () => {
+    render(
+      <AppBar data-testid="root" elevation={5} classes={{ elevation5: 'app-bar-elevation-5' }}>
+        Hello World
+      </AppBar>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).not.to.have.class(classes.elevation5);
+    expect(appBar).not.to.have.class('app-bar-elevation-5');
+  });
+
+  describe('Dialog', () => {
+    it('should add a .mui-fixed class', () => {
+      const { container } = render(<AppBar position="fixed">Hello World</AppBar>);
+      const appBar = container.firstChild;
+      expect(appBar).to.have.class('mui-fixed');
+    });
+  });
+
+  it.skipIf(isJsdom())('should inherit Paper background color with ThemeProvider', function test() {
+    render(
+      <ThemeProvider theme={defaultTheme}>
+        <AppBar data-testid="root" color="inherit">
+          Hello World
+        </AppBar>
+      </ThemeProvider>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).toHaveComputedStyle({
+      backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+    });
+  });
+
+  it.skipIf(isJsdom())(
+    'should inherit Paper background color with CssVarsProvider',
+    function test() {
+      render(
+        <CssVarsProvider>
+          <AppBar data-testid="root" color="inherit">
+            Hello World
+          </AppBar>
+        </CssVarsProvider>,
+      );
+
+      const appBar = screen.getByTestId('root');
+      expect(appBar).toHaveComputedStyle({
+        backgroundColor: hexToRgb(defaultTheme.palette.background.paper),
+      });
+    },
+  );
+});

packages/mui-material/src/AppBar/appBarClasses.ts

@@ -0,0 +1,61 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+
+export interface AppBarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `position="fixed"`. */
+  positionFixed: string;
+  /** Styles applied to the root element if `position="absolute"`. */
+  positionAbsolute: string;
+  /** Styles applied to the root element if `position="sticky"`. */
+  positionSticky: string;
+  /** Styles applied to the root element if `position="static"`. */
+  positionStatic: string;
+  /** Styles applied to the root element if `position="relative"`. */
+  positionRelative: string;
+  /** Styles applied to the root element if `color="default"`. */
+  colorDefault: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+  /** Styles applied to the root element if `color="inherit"`. */
+  colorInherit: string;
+  /** Styles applied to the root element if `color="transparent"`. */
+  colorTransparent: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `color="info"`. */
+  colorInfo: string;
+  /** Styles applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="warning"`. */
+  colorWarning: string;
+}
+
+export type AppBarClassKey = keyof AppBarClasses;
+
+export function getAppBarUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiAppBar', slot);
+}
+
+const appBarClasses: AppBarClasses = generateUtilityClasses('MuiAppBar', [
+  'root',
+  'positionFixed',
+  'positionAbsolute',
+  'positionSticky',
+  'positionStatic',
+  'positionRelative',
+  'colorDefault',
+  'colorPrimary',
+  'colorSecondary',
+  'colorInherit',
+  'colorTransparent',
+  'colorError',
+  'colorInfo',
+  'colorSuccess',
+  'colorWarning',
+]);
+
+export default appBarClasses;

packages/mui-material/src/AppBar/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './AppBar';
+export * from './AppBar';
+
+export { default as appBarClasses } from './appBarClasses';
+export * from './appBarClasses';

packages/mui-material/src/AppBar/index.js

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