@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

package/modern/components/toolbarV8/Toolbar.js

@@ -1,178 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/system';
-import composeClasses from '@mui/utils/composeClasses';
-import clsx from 'clsx';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from "../../constants/cssVariables.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
-import { ToolbarContext } from "./ToolbarContext.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['toolbar']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const ToolbarRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'Toolbar'
-})({
-  flex: 0,
-  display: 'flex',
-  alignItems: 'center',
-  gap: vars.spacing(0.25),
-  padding: vars.spacing(0.75),
-  minHeight: 52,
-  boxSizing: 'border-box',
-  borderBottom: `1px solid ${vars.colors.border.base}`
-});
-
-/**
- * The top level Toolbar component that provides context to child components.
- * It renders a styled `<div />` element.
- *
- * Demos:
- *
- * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
- *
- * API:
- *
- * - [Toolbar API](https://mui.com/x/api/data-grid/toolbar/)
- */
-const Toolbar = forwardRef(function Toolbar(props, ref) {
-  const {
-      render,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const rootProps = useGridRootProps();
-  const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-    if (focusableItemId === id) {
-      setFocusableItemId(null);
-    }
-  }, [focusableItemId]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const itemCount = items.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
-        return index;
-      }
-    }
-
-    // If we've checked all items and found none enabled
-    return -1;
-  }, [items]);
-  const onItemKeyDown = React.useCallback(event => {
-    if (!focusableItemId) {
-      return;
-    }
-    const currentIndex = items.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, -1);
-    } else if (event.key === 'Home') {
-      event.preventDefault();
-      newIndex = findEnabledItem(-1, 1, false);
-    } else if (event.key === 'End') {
-      event.preventDefault();
-      newIndex = findEnabledItem(items.length, -1, false);
-    }
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [items, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const currentIndex = items.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [items, findEnabledItem]);
-  const contextValue = React.useMemo(() => ({
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
-  const element = useGridComponentRenderer(ToolbarRoot, render, _extends({
-    role: 'toolbar',
-    'aria-orientation': 'horizontal',
-    className: clsx(classes.root, className),
-    ownerState: rootProps
-  }, other, {
-    ref
-  }));
-  React.useEffect(() => {
-    if (items.length > 0) {
-      setFocusableItemId(items[0].id);
-    }
-  }, [items]);
-  return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-});
-process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * A function to customize rendering of the component.
-   */
-  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
-} : void 0;
-export { Toolbar };

package/modern/components/toolbarV8/ToolbarButton.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
-export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
-  /**
-   * A function to customize rendering of the component.
-   */
-  render?: RenderProp<GridSlotProps['baseIconButton']>;
-};
-/**
- * A button for performing actions from the toolbar.
- * It renders the `baseIconButton` slot.
- *
- * Demos:
- *
- * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
- *
- * API:
- *
- * - [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
- */
-declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps> | React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { ToolbarButton };

package/modern/components/toolbarV8/ToolbarButton.js

@@ -1,205 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import useId from '@mui/utils/useId';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
-import { useToolbarContext } from "./ToolbarContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A button for performing actions from the toolbar.
- * It renders the `baseIconButton` slot.
- *
- * Demos:
- *
- * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
- *
- * API:
- *
- * - [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
- */
-const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
-  const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const id = useId();
-  const rootProps = useGridRootProps();
-  const buttonRef = React.useRef(null);
-  const handleRef = useForkRef(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = useToolbarContext();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
-  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    ref: handleRef
-  }));
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: element
-  });
-});
-process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focusVisible: PropTypes.func.isRequired
-    })
-  })]),
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: PropTypes.bool,
-  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).
-   */
-  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: PropTypes.bool,
-  /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
-   */
-  edge: PropTypes.oneOf(['end', 'start', false]),
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: PropTypes.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: PropTypes.string,
-  label: PropTypes.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: PropTypes.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: PropTypes.func,
-  /**
-   * A function to customize rendering of the component.
-   */
-  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
-  style: PropTypes.object,
-  /**
-   * 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]),
-  tabIndex: PropTypes.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: PropTypes.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
-  touchRippleRef: PropTypes.any
-} : void 0;
-export { ToolbarButton };

package/modern/components/toolbarV8/ToolbarContext.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface ToolbarContextValue {
-  focusableItemId: string | null;
-  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
-  unregisterItem: (id: string) => void;
-  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onItemFocus: (id: string) => void;
-  onItemDisabled: (id: string, disabled: boolean) => void;
-}
-export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
-export declare function useToolbarContext(): ToolbarContextValue;

package/modern/components/toolbarV8/ToolbarContext.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
-export function useToolbarContext() {
-  const context = React.useContext(ToolbarContext);
-  if (context === undefined) {
-    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
-  }
-  return context;
-}

package/modern/components/toolbarV8/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./Toolbar.js";
-export * from "./ToolbarButton.js";

package/modern/components/toolbarV8/index.js

@@ -1,2 +0,0 @@
-export * from "./Toolbar.js";
-export * from "./ToolbarButton.js";

package/modern/components/virtualization/GridBottomContainer.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export type GridBottomContainerProps = React.PropsWithChildren;
-export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/modern/components/virtualization/GridBottomContainer.js

@@ -1,25 +0,0 @@
-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 { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = () => {
-  const slots = {
-    root: ['bottomContainer']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, {});
-};
-const Element = styled('div')({
-  position: 'sticky',
-  zIndex: 40,
-  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
-});
-export function GridBottomContainer(props) {
-  const classes = useUtilityClasses();
-  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
-    className: clsx(classes.root, gridClasses['container--bottom']),
-    role: "presentation"
-  }));
-}

package/modern/components/virtualization/GridMainContainer.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
-import { GridOverlayType } from "../base/GridOverlays.js";
-type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
-  hasScrollX: boolean;
-  hasPinnedRight: boolean;
-  overlayType: GridOverlayType;
-  loadingOverlayVariant: GridLoadingOverlayVariant | null;
-};
-export declare const GridMainContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<{
-  className: string;
-  ownerState: OwnerState;
-}>> | React.ForwardRefExoticComponent<{
-  className: string;
-  ownerState: OwnerState;
-} & {
-  children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export {};

package/modern/components/virtualization/GridMainContainer.js

@@ -1,51 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridPanelAnchor = styled('div')({
-  position: 'absolute',
-  top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0,
-  width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))'
-});
-const Element = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'Main',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState,
-      loadingOverlayVariant,
-      overlayType
-    } = props;
-    const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay';
-    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], hideContent && styles['main--hiddenContent']];
-  }
-})({
-  flexGrow: 1,
-  position: 'relative',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column'
-});
-export const GridMainContainer = forwardRef((props, ref) => {
-  const {
-    ownerState
-  } = props;
-  const rootProps = useGridRootProps();
-  const configuration = useGridConfiguration();
-  const ariaAttributes = configuration.hooks.useGridAriaAttributes();
-  return /*#__PURE__*/_jsxs(Element, _extends({
-    ownerState: ownerState,
-    className: props.className,
-    tabIndex: -1
-  }, ariaAttributes, rootProps.slotProps?.main, {
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
-      role: "presentation",
-      "data-id": "gridPanelAnchor"
-    }), props.children]
-  }));
-});

package/modern/components/virtualization/GridTopContainer.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare function GridTopContainer(props: React.PropsWithChildren): React.JSX.Element;

package/modern/components/virtualization/GridTopContainer.js

@@ -1,25 +0,0 @@
-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 { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = () => {
-  const slots = {
-    root: ['topContainer']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, {});
-};
-const Element = styled('div')({
-  position: 'sticky',
-  zIndex: 40,
-  top: 0
-});
-export function GridTopContainer(props) {
-  const classes = useUtilityClasses();
-  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
-    className: clsx(classes.root, gridClasses['container--top']),
-    role: "presentation"
-  }));
-}

package/modern/components/virtualization/GridVirtualScrollbar.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-type Position = 'vertical' | 'horizontal';
-type GridVirtualScrollbarProps = {
-  position: Position;
-  scrollPosition: React.RefObject<{
-    left: number;
-    top: number;
-  }>;
-};
-declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
-export { GridVirtualScrollbar };