@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/esm/components/virtualization/GridVirtualScrollerContent.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (props, overflowedContent) => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['virtualScrollerContent', overflowedContent && 'virtualScrollerContent--overflowed']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const VirtualScrollerContentRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'VirtualScrollerContent',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
+})({});
+const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
+  const rootProps = useGridRootProps();
+  const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
+  const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
+  return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
+    ownerState: ownerState,
+    className: clsx(classes.root, props.className),
+    ref: ref
+  }));
+});
+export { GridVirtualScrollerContent };

package/esm/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type Props = {
+  /** The number of rows */
+  rowsLength: number;
+};
+declare function GridVirtualScrollerFiller({
+  rowsLength
+}: Props): React.JSX.Element | null;
+declare const Memoized: typeof GridVirtualScrollerFiller;
+export { Memoized as GridVirtualScrollerFiller };

package/esm/components/virtualization/GridVirtualScrollerFiller.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { vars } from "../../constants/cssVariables.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { gridClasses } from "../../constants/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Filler = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+const Pinned = styled('div')({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--rowBorderColor)',
+  backgroundColor: vars.cell.background.pinned
+});
+const PinnedLeft = styled(Pinned)({
+  left: 0,
+  borderRight: '1px solid var(--rowBorderColor)'
+});
+const PinnedRight = styled(Pinned)({
+  right: 0,
+  borderLeft: '1px solid var(--rowBorderColor)'
+});
+const Main = styled('div')({
+  flexGrow: 1,
+  borderTop: '1px solid var(--rowBorderColor)'
+});
+function GridVirtualScrollerFiller({
+  rowsLength
+}) {
+  const apiRef = useGridApiContext();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    hasScrollY,
+    scrollbarSize,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = useGridSelector(apiRef, gridDimensionsSelector);
+  const height = hasScrollX ? scrollbarSize : 0;
+  const needsLastRowBorder = viewportOuterSize.height - minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Filler, {
+    className: gridClasses.filler,
+    role: "presentation",
+    style: {
+      height,
+      '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'
+    },
+    children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
+      className: gridClasses['filler--pinnedLeft'],
+      style: {
+        width: leftPinnedWidth
+      }
+    }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
+      className: gridClasses['filler--pinnedRight'],
+      style: {
+        width: rightPinnedWidth + (hasScrollY ? scrollbarSize : 0)
+      }
+    })]
+  });
+}
+const Memoized = fastMemo(GridVirtualScrollerFiller);
+export { Memoized as GridVirtualScrollerFiller };

package/esm/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+}> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridVirtualScrollerRenderZone };

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
+import { gridRenderContextSelector } from "../../hooks/features/virtualization/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['virtualScrollerRenderZone']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const VirtualScrollerRenderZoneRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'VirtualScrollerRenderZone',
+  overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
+})({
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
+});
+const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const offsetTop = useGridSelector(apiRef, () => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    const rowsMeta = gridRowsMetaSelector(apiRef);
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
+  });
+  return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
+    className: clsx(classes.root, className),
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsetTop}px, 0)`
+    }
+  }, other, {
+    ref: ref
+  }));
+});
+export { GridVirtualScrollerRenderZone };

package/esm/constants/cssVariables.d.ts

@@ -0,0 +1,294 @@
+declare const keys: {
+  readonly spacingUnit: "--DataGrid-t-spacing-unit";
+  readonly colors: {
+    readonly border: {
+      readonly base: "--DataGrid-t-colors-border-base";
+    };
+    readonly foreground: {
+      readonly base: "--DataGrid-t-colors-foreground-base";
+      readonly muted: "--DataGrid-t-colors-foreground-muted";
+      readonly accent: "--DataGrid-t-colors-foreground-accent";
+      readonly disabled: "--DataGrid-t-colors-foreground-disabled";
+    };
+    readonly background: {
+      readonly base: "--DataGrid-t-colors-background-base";
+      readonly overlay: "--DataGrid-t-colors-background-overlay";
+      readonly backdrop: "--DataGrid-t-colors-background-backdrop";
+    };
+    readonly interactive: {
+      readonly hover: "--DataGrid-t-colors-interactive-hover";
+      readonly hoverOpacity: "--DataGrid-t-colors-interactive-hover-opacity";
+      readonly focus: "--DataGrid-t-colors-interactive-focus";
+      readonly focusOpacity: "--DataGrid-t-colors-interactive-focus-opacity";
+      readonly disabled: "--DataGrid-t-colors-interactive-disabled";
+      readonly disabledOpacity: "--DataGrid-t-colors-interactive-disabled-opacity";
+      readonly selected: "--DataGrid-t-colors-interactive-selected";
+      readonly selectedOpacity: "--DataGrid-t-colors-interactive-selected-opacity";
+    };
+  };
+  readonly header: {
+    readonly background: {
+      readonly base: "--DataGrid-t-header-background-base";
+    };
+  };
+  readonly cell: {
+    readonly background: {
+      readonly pinned: "--DataGrid-t-cell-background-pinned";
+    };
+  };
+  readonly radius: {
+    readonly base: "--DataGrid-t-radius-base";
+  };
+  readonly typography: {
+    readonly fontFamily: {
+      readonly base: "--DataGrid-t-typography-font-family-base";
+    };
+    readonly fontWeight: {
+      readonly light: "--DataGrid-t-typography-font-weight-light";
+      readonly regular: "--DataGrid-t-typography-font-weight-regular";
+      readonly medium: "--DataGrid-t-typography-font-weight-medium";
+      readonly bold: "--DataGrid-t-typography-font-weight-bold";
+    };
+    readonly body: {
+      readonly fontFamily: "--DataGrid-t-typography-body-font-family";
+      readonly fontSize: "--DataGrid-t-typography-body-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-body-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-body-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-body-line-height";
+    };
+    readonly small: {
+      readonly fontFamily: "--DataGrid-t-typography-small-font-family";
+      readonly fontSize: "--DataGrid-t-typography-small-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-small-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-small-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-small-line-height";
+    };
+  };
+  readonly transitions: {
+    readonly easing: {
+      readonly easeIn: "--DataGrid-t-transitions-easing-ease-in";
+      readonly easeOut: "--DataGrid-t-transitions-easing-ease-out";
+      readonly easeInOut: "--DataGrid-t-transitions-easing-ease-in-out";
+    };
+    readonly duration: {
+      readonly short: "--DataGrid-t-transitions-duration-short";
+      readonly base: "--DataGrid-t-transitions-duration-base";
+      readonly long: "--DataGrid-t-transitions-duration-long";
+    };
+  };
+  readonly shadows: {
+    readonly base: "--DataGrid-t-shadows-base";
+    readonly overlay: "--DataGrid-t-shadows-overlay";
+  };
+  readonly zIndex: {
+    readonly panel: "--DataGrid-t-z-index-panel";
+    readonly menu: "--DataGrid-t-z-index-menu";
+  };
+};
+export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
+type Entry = {
+  key: string;
+  value: unknown;
+};
+type EmptyEntry<TValue> = {
+  key: '';
+  value: TValue;
+};
+type CreateObjectEntries<TValue, TValueInitial = TValue> = TValue extends object ? { [TKey in keyof TValue]-?: TKey extends string ? OmitItself<TValue[TKey], TValueInitial> extends infer TNestedValue ? TNestedValue extends Entry ? {
+  key: `${TKey}.${TNestedValue['key']}`;
+  value: TNestedValue['value'];
+} : never : never : never }[keyof TValue] : EmptyEntry<TValue>;
+type OmitItself<TValue, TValueInitial> = TValue extends TValueInitial ? EmptyEntry<TValue> : CreateObjectEntries<TValue, TValueInitial>;
+export declare const vars: {
+  spacingUnit: "--DataGrid-t-spacing-unit";
+  colors: {
+    readonly border: {
+      readonly base: "--DataGrid-t-colors-border-base";
+    };
+    readonly foreground: {
+      readonly base: "--DataGrid-t-colors-foreground-base";
+      readonly muted: "--DataGrid-t-colors-foreground-muted";
+      readonly accent: "--DataGrid-t-colors-foreground-accent";
+      readonly disabled: "--DataGrid-t-colors-foreground-disabled";
+    };
+    readonly background: {
+      readonly base: "--DataGrid-t-colors-background-base";
+      readonly overlay: "--DataGrid-t-colors-background-overlay";
+      readonly backdrop: "--DataGrid-t-colors-background-backdrop";
+    };
+    readonly interactive: {
+      readonly hover: "--DataGrid-t-colors-interactive-hover";
+      readonly hoverOpacity: "--DataGrid-t-colors-interactive-hover-opacity";
+      readonly focus: "--DataGrid-t-colors-interactive-focus";
+      readonly focusOpacity: "--DataGrid-t-colors-interactive-focus-opacity";
+      readonly disabled: "--DataGrid-t-colors-interactive-disabled";
+      readonly disabledOpacity: "--DataGrid-t-colors-interactive-disabled-opacity";
+      readonly selected: "--DataGrid-t-colors-interactive-selected";
+      readonly selectedOpacity: "--DataGrid-t-colors-interactive-selected-opacity";
+    };
+  };
+  header: {
+    readonly background: {
+      readonly base: "--DataGrid-t-header-background-base";
+    };
+  };
+  cell: {
+    readonly background: {
+      readonly pinned: "--DataGrid-t-cell-background-pinned";
+    };
+  };
+  radius: {
+    readonly base: "--DataGrid-t-radius-base";
+  };
+  typography: {
+    readonly fontFamily: {
+      readonly base: "--DataGrid-t-typography-font-family-base";
+    };
+    readonly fontWeight: {
+      readonly light: "--DataGrid-t-typography-font-weight-light";
+      readonly regular: "--DataGrid-t-typography-font-weight-regular";
+      readonly medium: "--DataGrid-t-typography-font-weight-medium";
+      readonly bold: "--DataGrid-t-typography-font-weight-bold";
+    };
+    readonly body: {
+      readonly fontFamily: "--DataGrid-t-typography-body-font-family";
+      readonly fontSize: "--DataGrid-t-typography-body-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-body-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-body-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-body-line-height";
+    };
+    readonly small: {
+      readonly fontFamily: "--DataGrid-t-typography-small-font-family";
+      readonly fontSize: "--DataGrid-t-typography-small-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-small-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-small-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-small-line-height";
+    };
+  };
+  transitions: {
+    readonly easing: {
+      readonly easeIn: "--DataGrid-t-transitions-easing-ease-in";
+      readonly easeOut: "--DataGrid-t-transitions-easing-ease-out";
+      readonly easeInOut: "--DataGrid-t-transitions-easing-ease-in-out";
+    };
+    readonly duration: {
+      readonly short: "--DataGrid-t-transitions-duration-short";
+      readonly base: "--DataGrid-t-transitions-duration-base";
+      readonly long: "--DataGrid-t-transitions-duration-long";
+    };
+  };
+  shadows: {
+    readonly base: "--DataGrid-t-shadows-base";
+    readonly overlay: "--DataGrid-t-shadows-overlay";
+  };
+  zIndex: {
+    readonly panel: "--DataGrid-t-z-index-panel";
+    readonly menu: "--DataGrid-t-z-index-menu";
+  };
+  breakpoints: {
+    values: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    up: (key: any) => string;
+  };
+  spacing: typeof spacing;
+  transition: typeof transition;
+  keys: {
+    readonly spacingUnit: "--DataGrid-t-spacing-unit";
+    readonly colors: {
+      readonly border: {
+        readonly base: "--DataGrid-t-colors-border-base";
+      };
+      readonly foreground: {
+        readonly base: "--DataGrid-t-colors-foreground-base";
+        readonly muted: "--DataGrid-t-colors-foreground-muted";
+        readonly accent: "--DataGrid-t-colors-foreground-accent";
+        readonly disabled: "--DataGrid-t-colors-foreground-disabled";
+      };
+      readonly background: {
+        readonly base: "--DataGrid-t-colors-background-base";
+        readonly overlay: "--DataGrid-t-colors-background-overlay";
+        readonly backdrop: "--DataGrid-t-colors-background-backdrop";
+      };
+      readonly interactive: {
+        readonly hover: "--DataGrid-t-colors-interactive-hover";
+        readonly hoverOpacity: "--DataGrid-t-colors-interactive-hover-opacity";
+        readonly focus: "--DataGrid-t-colors-interactive-focus";
+        readonly focusOpacity: "--DataGrid-t-colors-interactive-focus-opacity";
+        readonly disabled: "--DataGrid-t-colors-interactive-disabled";
+        readonly disabledOpacity: "--DataGrid-t-colors-interactive-disabled-opacity";
+        readonly selected: "--DataGrid-t-colors-interactive-selected";
+        readonly selectedOpacity: "--DataGrid-t-colors-interactive-selected-opacity";
+      };
+    };
+    readonly header: {
+      readonly background: {
+        readonly base: "--DataGrid-t-header-background-base";
+      };
+    };
+    readonly cell: {
+      readonly background: {
+        readonly pinned: "--DataGrid-t-cell-background-pinned";
+      };
+    };
+    readonly radius: {
+      readonly base: "--DataGrid-t-radius-base";
+    };
+    readonly typography: {
+      readonly fontFamily: {
+        readonly base: "--DataGrid-t-typography-font-family-base";
+      };
+      readonly fontWeight: {
+        readonly light: "--DataGrid-t-typography-font-weight-light";
+        readonly regular: "--DataGrid-t-typography-font-weight-regular";
+        readonly medium: "--DataGrid-t-typography-font-weight-medium";
+        readonly bold: "--DataGrid-t-typography-font-weight-bold";
+      };
+      readonly body: {
+        readonly fontFamily: "--DataGrid-t-typography-body-font-family";
+        readonly fontSize: "--DataGrid-t-typography-body-font-size";
+        readonly fontWeight: "--DataGrid-t-typography-body-font-weight";
+        readonly letterSpacing: "--DataGrid-t-typography-body-letter-spacing";
+        readonly lineHeight: "--DataGrid-t-typography-body-line-height";
+      };
+      readonly small: {
+        readonly fontFamily: "--DataGrid-t-typography-small-font-family";
+        readonly fontSize: "--DataGrid-t-typography-small-font-size";
+        readonly fontWeight: "--DataGrid-t-typography-small-font-weight";
+        readonly letterSpacing: "--DataGrid-t-typography-small-letter-spacing";
+        readonly lineHeight: "--DataGrid-t-typography-small-line-height";
+      };
+    };
+    readonly transitions: {
+      readonly easing: {
+        readonly easeIn: "--DataGrid-t-transitions-easing-ease-in";
+        readonly easeOut: "--DataGrid-t-transitions-easing-ease-out";
+        readonly easeInOut: "--DataGrid-t-transitions-easing-ease-in-out";
+      };
+      readonly duration: {
+        readonly short: "--DataGrid-t-transitions-duration-short";
+        readonly base: "--DataGrid-t-transitions-duration-base";
+        readonly long: "--DataGrid-t-transitions-duration-long";
+      };
+    };
+    readonly shadows: {
+      readonly base: "--DataGrid-t-shadows-base";
+      readonly overlay: "--DataGrid-t-shadows-overlay";
+    };
+    readonly zIndex: {
+      readonly panel: "--DataGrid-t-z-index-panel";
+      readonly menu: "--DataGrid-t-z-index-menu";
+    };
+  };
+};
+declare function spacing(a?: number, b?: number, c?: number, d?: number): string;
+declare function transition(props: string[], options?: {
+  duration?: string;
+  easing?: string;
+  delay?: number;
+}): string;
+export {};

package/esm/constants/cssVariables.js

@@ -0,0 +1,161 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// NOTE: Breakpoints can't come from the theme because we need access to them at
+// initialization time and media-queries can't use CSS variables. For users with
+// custom breakpoints, we might want to provide a way to configure them globally
+// instead of through the theme.
+const breakpoints = {
+  values: {
+    xs: 0,
+    // phone
+    sm: 600,
+    // tablet
+    md: 900,
+    // small laptop
+    lg: 1200,
+    // desktop
+    xl: 1536 // large screen
+  },
+  up: key => {
+    const values = breakpoints.values;
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}px)`;
+  }
+};
+const keys = {
+  spacingUnit: '--DataGrid-t-spacing-unit',
+  /* Variables */
+  colors: {
+    border: {
+      base: '--DataGrid-t-colors-border-base'
+    },
+    foreground: {
+      base: '--DataGrid-t-colors-foreground-base',
+      muted: '--DataGrid-t-colors-foreground-muted',
+      accent: '--DataGrid-t-colors-foreground-accent',
+      disabled: '--DataGrid-t-colors-foreground-disabled'
+    },
+    background: {
+      base: '--DataGrid-t-colors-background-base',
+      overlay: '--DataGrid-t-colors-background-overlay',
+      backdrop: '--DataGrid-t-colors-background-backdrop'
+    },
+    interactive: {
+      hover: '--DataGrid-t-colors-interactive-hover',
+      hoverOpacity: '--DataGrid-t-colors-interactive-hover-opacity',
+      focus: '--DataGrid-t-colors-interactive-focus',
+      focusOpacity: '--DataGrid-t-colors-interactive-focus-opacity',
+      disabled: '--DataGrid-t-colors-interactive-disabled',
+      disabledOpacity: '--DataGrid-t-colors-interactive-disabled-opacity',
+      selected: '--DataGrid-t-colors-interactive-selected',
+      selectedOpacity: '--DataGrid-t-colors-interactive-selected-opacity'
+    }
+  },
+  header: {
+    background: {
+      base: '--DataGrid-t-header-background-base'
+    }
+  },
+  cell: {
+    background: {
+      pinned: '--DataGrid-t-cell-background-pinned'
+    }
+  },
+  radius: {
+    base: '--DataGrid-t-radius-base'
+  },
+  typography: {
+    fontFamily: {
+      base: '--DataGrid-t-typography-font-family-base'
+    },
+    fontWeight: {
+      light: '--DataGrid-t-typography-font-weight-light',
+      regular: '--DataGrid-t-typography-font-weight-regular',
+      medium: '--DataGrid-t-typography-font-weight-medium',
+      bold: '--DataGrid-t-typography-font-weight-bold'
+    },
+    body: {
+      fontFamily: '--DataGrid-t-typography-body-font-family',
+      fontSize: '--DataGrid-t-typography-body-font-size',
+      fontWeight: '--DataGrid-t-typography-body-font-weight',
+      letterSpacing: '--DataGrid-t-typography-body-letter-spacing',
+      lineHeight: '--DataGrid-t-typography-body-line-height'
+    },
+    small: {
+      fontFamily: '--DataGrid-t-typography-small-font-family',
+      fontSize: '--DataGrid-t-typography-small-font-size',
+      fontWeight: '--DataGrid-t-typography-small-font-weight',
+      letterSpacing: '--DataGrid-t-typography-small-letter-spacing',
+      lineHeight: '--DataGrid-t-typography-small-line-height'
+    }
+  },
+  transitions: {
+    easing: {
+      easeIn: '--DataGrid-t-transitions-easing-ease-in',
+      easeOut: '--DataGrid-t-transitions-easing-ease-out',
+      easeInOut: '--DataGrid-t-transitions-easing-ease-in-out'
+    },
+    duration: {
+      short: '--DataGrid-t-transitions-duration-short',
+      base: '--DataGrid-t-transitions-duration-base',
+      long: '--DataGrid-t-transitions-duration-long'
+    }
+  },
+  shadows: {
+    base: '--DataGrid-t-shadows-base',
+    overlay: '--DataGrid-t-shadows-overlay'
+  },
+  zIndex: {
+    panel: '--DataGrid-t-z-index-panel',
+    menu: '--DataGrid-t-z-index-menu'
+  }
+};
+const values = wrap(keys);
+export const vars = _extends({
+  breakpoints,
+  spacing,
+  transition,
+  keys
+}, values);
+function spacing(a, b, c, d) {
+  /* eslint-disable prefer-template */
+  if (a === undefined) {
+    return spacingString(1);
+  }
+  if (b === undefined) {
+    return spacingString(a);
+  }
+  if (c === undefined) {
+    return spacingString(a) + ' ' + spacingString(b);
+  }
+  if (d === undefined) {
+    return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c);
+  }
+  return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c) + ' ' + spacingString(d);
+  /* eslint-enable prefer-template */
+}
+function spacingString(value) {
+  if (value === 0) {
+    return '0';
+  }
+  return `calc(var(--DataGrid-t-spacing-unit) * ${value})`;
+}
+function transition(props, options) {
+  const {
+    duration = vars.transitions.duration.base,
+    easing = vars.transitions.easing.easeInOut,
+    delay = 0
+  } = options ?? {};
+  return props.map(prop => `${prop} ${duration} ${easing} ${delay}ms`).join(', ');
+}
+function wrap(input) {
+  if (typeof input === 'string') {
+    return `var(${input})`;
+  }
+  const result = {};
+  for (const key in input) {
+    if (Object.hasOwn(input, key)) {
+      result[key] = wrap(input[key]);
+    }
+  }
+  return result;
+}

package/esm/constants/dataGridPropsDefaultValues.d.ts

@@ -0,0 +1,5 @@
+import type { DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export declare const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues;