@mui/material 6.0.0-alpha.9 → 6.0.0-beta.1

package/PigmentContainer/PigmentContainer.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps, Breakpoint } from '@mui/system';
+import { Theme } from '../styles';
+import { ContainerClasses } from '../Container/containerClasses';
+export interface PigmentContainerOwnProps {
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ContainerClasses>;
+    /**
+     * If `true`, the left and right padding is removed.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * Set the max-width to match the min-width of the current breakpoint.
+     * This is useful if you'd prefer to design for a fixed set of sizes
+     * instead of trying to accommodate a fully fluid viewport.
+     * It's fluid by default.
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Determine the max-width of the container.
+     * The container width grows with the size of the screen.
+     * Set to `false` to disable `maxWidth`.
+     * @default 'lg'
+     */
+    maxWidth?: Breakpoint | false;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+}
+export interface PigmentContainerTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & PigmentContainerOwnProps;
+    defaultComponent: RootComponent;
+}
+export type PigmentContainerProps<RootComponent extends React.ElementType = PigmentContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PigmentContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+    component?: React.ElementType;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+declare const PigmentContainer: OverridableComponent<PigmentContainerTypeMap<{}, "div">>;
+export default PigmentContainer;

package/PigmentContainer/PigmentContainer.js

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// @ts-ignore
+import Container from '@mui/material-pigment-css/Container';
+import capitalize from '@mui/utils/capitalize';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return composeClasses(slots, slot => generateUtilityClass('MuiContainer', slot), classes);
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://next.mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
+ */
+const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
+  className,
+  disableGutters = false,
+  fixed = false,
+  maxWidth = 'lg',
+  ...props
+}, ref) {
+  const ownerState = {
+    ...props,
+    disableGutters,
+    fixed,
+    maxWidth
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(Container, {
+    className: clsx(classes.root, className),
+    disableGutters: disableGutters,
+    fixed: fixed,
+    maxWidth: maxWidth,
+    ...props,
+    // @ts-ignore
+    ref: ref
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentContainer.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: PropTypes.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  /**
+   * 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])
+} : void 0;
+export default PigmentContainer;

package/PigmentContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './PigmentContainer';
+export * from './PigmentContainer';
+export { default as containerClasses } from '../Container/containerClasses';

package/PigmentContainer/index.js

@@ -0,0 +1,3 @@
+export { default } from './PigmentContainer';
+export * from './PigmentContainer';
+export { default as containerClasses } from '../Container/containerClasses';

package/PigmentContainer/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/PigmentContainer/index.js",
+  "types": "./index.d.ts"
+}

package/PigmentGrid/PigmentGrid.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { Breakpoint, Theme } from '../styles';
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key in Breakpoint]?: T | null;
+};
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | 'grow' | number;
+export interface GridBaseProps {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The number of columns.
+     * @default 12
+     */
+    columns?: ResponsiveStyleValue<number>;
+    /**
+     * Defines the horizontal space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * If `true`, the component will have the flex *container* behavior.
+     * You should be wrapping *items* with a *container*.
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'row'
+     */
+    direction?: ResponsiveStyleValue<GridDirection>;
+    /**
+     * Defines the offset of the grid.
+     */
+    offset?: ResponsiveStyleValue<number> | undefined;
+    /**
+     * @internal
+     * The level of the grid starts from `0`
+     * and increases when the grid nests inside another grid regardless of container or item.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <Grid> // level 1
+     *     <Grid> // level 2
+     *   <Grid> // level 1
+     * ```
+     *
+     * Only consecutive grid is considered nesting.
+     * A grid container will start at `0` if there are non-Grid element above it.
+     *
+     * ```js
+     * <Grid> // level 0
+     *   <div>
+     *     <Grid> // level 0
+     *       <Grid> // level 1
+     * ```
+     */
+    unstable_level?: number;
+    /**
+     * Defines the vertical space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * Defines the space between the type `item` components.
+     * It can only be used on a type `container` component.
+     * @default 0
+     */
+    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+    /**
+     * Defines the column size of the grid.
+     */
+    size?: ResponsiveStyleValue<GridSize> | undefined;
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap?: GridWrap;
+}
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    };
+    defaultComponent: DefaultComponent;
+}
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
+    component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
+ */
+declare const PigmentGrid: OverridableComponent<GridTypeMap<{}, "div">>;
+export default PigmentGrid;

package/PigmentGrid/PigmentGrid.js

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+// @ts-ignore
+import Grid from '@mui/material-pigment-css/Grid';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames } from '@mui/system/Unstable_Grid/gridGenerator';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    container,
+    direction,
+    size,
+    spacing
+  } = ownerState;
+  let gridSize = {};
+  if (size) {
+    if (Array.isArray(size)) {
+      size.forEach((value, index) => {
+        gridSize = {
+          ...gridSize,
+          [index]: value
+        };
+      });
+    }
+    if (typeof size === 'object') {
+      gridSize = size;
+    }
+  }
+  const slots = {
+    root: ['root', container && 'container', ...generateDirectionClasses(direction), ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing) : [])]
+  };
+  return composeClasses(slots, slot => generateUtilityClass('MuiGrid2', slot), {});
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
+ */
+const PigmentGrid = /*#__PURE__*/React.forwardRef(function PigmentGrid(props, ref) {
+  const {
+    className,
+    ...other
+  } = props;
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsx(Grid, {
+    ref: ref,
+    className: clsx(classes.root, className),
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: PropTypes.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']), PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])), PropTypes.object]),
+  /**
+   * Defines the offset of the grid.
+   */
+  offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * Defines the column size of the grid.
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @internal
+   * The level of the grid starts from `0`
+   * and increases when the grid nests inside another grid regardless of container or item.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <Grid> // level 1
+   *     <Grid> // level 2
+   *   <Grid> // level 1
+   * ```
+   *
+   * Only consecutive grid is considered nesting.
+   * A grid container will start at `0` if there are non-Grid element above it.
+   *
+   * ```js
+   * <Grid> // level 0
+   *   <div>
+   *     <Grid> // level 0
+   *       <Grid> // level 1
+   * ```
+   */
+  unstable_level: PropTypes.number,
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
+} : void 0;
+
+// @ts-ignore internal logic for nested grid
+PigmentGrid.muiName = 'Grid';
+export default PigmentGrid;

package/PigmentGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './PigmentGrid';
+export * from './PigmentGrid';
+export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';

package/PigmentGrid/index.js

@@ -0,0 +1,3 @@
+export { default } from './PigmentGrid';
+export * from './PigmentGrid';
+export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes';

package/{useTouchRipple → PigmentGrid}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/useTouchRipple/index.js",
+  "main": "../node/PigmentGrid/index.js",
   "types": "./index.d.ts"
 }

package/PigmentHidden/PigmentHidden.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Breakpoint } from '@mui/system';
+export interface HiddenProps {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify which implementation to use.  'js' is the default, 'css' works better for
+     * server-side rendering.
+     * @default 'js'
+     */
+    implementation?: 'js' | 'css';
+    /**
+     * You can use this prop when choosing the `js` implementation with server-side rendering.
+     *
+     * As `window.innerWidth` is unavailable on the server,
+     * we default to rendering an empty component during the first mount.
+     * You might want to use a heuristic to approximate
+     * the screen width of the client browser screen width.
+     *
+     * For instance, you could be using the user-agent or the client-hints.
+     * https://caniuse.com/#search=client%20hint
+     */
+    initialWidth?: Breakpoint;
+    /**
+     * If `true`, component is hidden on screens below (but not including) this size.
+     * @default false
+     */
+    lgDown?: boolean;
+    /**
+     * If `true`, component is hidden on screens this size and above.
+     * @default false
+     */
+    lgUp?: boolean;
+    /**
+     * If `true`, component is hidden on screens below (but not including) this size.
+     * @default false
+     */
+    mdDown?: boolean;
+    /**
+     * If `true`, component is hidden on screens this size and above.
+     * @default false
+     */
+    mdUp?: boolean;
+    /**
+     * Hide the given breakpoint(s).
+     */
+    only?: Breakpoint | Breakpoint[];
+    /**
+     * If `true`, component is hidden on screens below (but not including) this size.
+     * @default false
+     */
+    smDown?: boolean;
+    /**
+     * If `true`, component is hidden on screens this size and above.
+     * @default false
+     */
+    smUp?: boolean;
+    /**
+     * If `true`, component is hidden on screens below (but not including) this size.
+     * @default false
+     */
+    xlDown?: boolean;
+    /**
+     * If `true`, component is hidden on screens this size and above.
+     * @default false
+     */
+    xlUp?: boolean;
+    /**
+     * If `true`, component is hidden on screens below (but not including) this size.
+     * @default false
+     */
+    xsDown?: boolean;
+    /**
+     * If `true`, component is hidden on screens this size and above.
+     * @default false
+     */
+    xsUp?: boolean;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Hidden](https://next.mui.com/material-ui/react-hidden/)
+ *
+ * API:
+ *
+ * - [PigmentHidden API](https://next.mui.com/material-ui/api/pigment-hidden/)
+ */
+declare function PigmentHidden({ implementation, ...props }: HiddenProps & {
+    className?: string;
+}): React.JSX.Element;
+declare namespace PigmentHidden {
+    var propTypes: any;
+}
+export default PigmentHidden;