@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.14

package/modern/components/toolbarV8/Toolbar.js

@@ -0,0 +1,125 @@
+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/material/styles';
+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),
+  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(item => {
+    setItems(prevItems => [...prevItems, item]);
+  }, []);
+  const unregisterItem = React.useCallback(item => {
+    setItems(prevItems => prevItems.filter(i => i !== item));
+    if (focusableItemId === item) {
+      setFocusableItemId(null);
+    }
+  }, [focusableItemId]);
+  const onItemKeyDown = React.useCallback(event => {
+    if (!focusableItemId) {
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const nextIndex = items.indexOf(focusableItemId) + 1;
+      setFocusableItemId(items[nextIndex < items.length ? nextIndex : 0]);
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const prevIndex = items.indexOf(focusableItemId) - 1;
+      setFocusableItemId(items[prevIndex < 0 ? items.length - 1 : prevIndex]);
+    }
+    if (event.key === 'Home') {
+      event.preventDefault();
+      setFocusableItemId(items[0]);
+    }
+    if (event.key === 'End') {
+      event.preventDefault();
+      setFocusableItemId(items[items.length - 1]);
+    }
+  }, [items, focusableItemId]);
+  const contextValue = React.useMemo(() => ({
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown
+  }), [registerItem, unregisterItem, focusableItemId, onItemKeyDown]);
+  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]);
+    }
+  }, [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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,172 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render"];
+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
+    } = 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
+  } = useToolbarContext();
+  React.useEffect(() => {
+    registerItem(id);
+    return () => unregisterItem(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const isInitialFocus = React.useRef(true);
+  React.useEffect(() => {
+    // Do not focus the item on initial render
+    if (focusableItemId && isInitialFocus.current) {
+      isInitialFocus.current = false;
+      return;
+    }
+    if (focusableItemId === id) {
+      buttonRef.current?.focus();
+    }
+  }, [focusableItemId, id]);
+  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+    tabIndex: focusableItemId === id ? 0 : -1,
+    onKeyDown: onItemKeyDown
+  }, other, {
+    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,
+  /**
+   * 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

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

package/modern/components/toolbarV8/ToolbarContext.js

@@ -0,0 +1,9 @@
+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

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

package/modern/components/toolbarV8/index.js

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

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useOnMount } from "../../hooks/utils/useOnMount.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
@@ -130,7 +132,13 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
       top: 0
     } : undefined,
     tabIndex: -1,
-    "aria-hidden": "true",
+    "aria-hidden": "true"
+    // tabIndex does not prevent focus with a mouse click, throwing a console error
+    // https://github.com/mui/mui-x/issues/16706
+    ,
+    onFocus: event => {
+      event.target.blur();
+    },
     children: /*#__PURE__*/_jsx("div", {
       ref: contentRef,
       className: classes.content

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,6 +1,7 @@
 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";
@@ -17,7 +18,7 @@ const Pinned = styled('div')({
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  backgroundColor: vars.cell.background.pinned
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,