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

package/components/toolbarV8/GridToolbar.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbar = GridToolbar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _system = require("@mui/system");
+var _Toolbar = require("./Toolbar");
+var _ToolbarButton = require("./ToolbarButton");
+var _filterPanel = require("../filterPanel");
+var _columnsPanel = require("../columnsPanel");
+var _export = require("../export");
+var _GridToolbarQuickFilter = require("../toolbar/GridToolbarQuickFilter");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _assert = require("../../utils/assert");
+var _cssVariables = require("../../constants/cssVariables");
+var _jsxRuntime = require("react/jsx-runtime");
+const Divider = (0, _system.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarDivider'
+})({
+  height: '50%',
+  margin: _cssVariables.vars.spacing(0, 0.5)
+});
+function GridToolbar(props) {
+  const {
+    showQuickFilter = true,
+    quickFilterProps,
+    csvOptions,
+    printOptions,
+    additionalExportMenuItems
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = (0, _useId.default)();
+  const exportMenuTriggerId = (0, _useId.default)();
+  const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
+  const closeExportMenu = () => setExportMenuOpen(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.Toolbar, {
+    children: [!rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('toolbarColumns'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsPanel.ColumnsPanelTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {
+          fontSize: "small"
+        })
+      })
+    }), !rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('toolbarFilters'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterPanel.FilterPanelTrigger, {
+        render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+          color: "default",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+            badgeContent: state.filterCount,
+            color: "primary",
+            variant: "dot",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {
+              fontSize: "small"
+            })
+          })
+        }))
+      })
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+      as: rootProps.slots.baseDivider,
+      orientation: "vertical"
+    }), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarExport'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(true),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.exportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+        id: exportMenuId,
+        anchorEl: exportMenuTriggerRef.current,
+        open: exportMenuOpen,
+        onClose: closeExportMenu,
+        MenuListProps: {
+          'aria-labelledby': exportMenuTriggerId
+        },
+        children: [!printOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportPrint, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
+          options: printOptions,
+          onClick: closeExportMenu,
+          children: apiRef.current.getLocaleText('toolbarExportPrint')
+        }), !csvOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportCsv, {
+          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
+          options: csvOptions,
+          onClick: closeExportMenu,
+          children: apiRef.current.getLocaleText('toolbarExportCSV')
+        }), additionalExportMenuItems?.(closeExportMenu)]
+      })]
+    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  additionalExportMenuItems: _propTypes.default.func,
+  csvOptions: _propTypes.default.object,
+  printOptions: _propTypes.default.object,
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    debounceMs: _propTypes.default.number,
+    quickFilterFormatter: _propTypes.default.func,
+    quickFilterParser: _propTypes.default.func,
+    slotProps: _propTypes.default.object
+  }),
+  /**
+   * Show the quick filter component.
+   * @default true
+   */
+  showQuickFilter: _propTypes.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/components/toolbarV8/Toolbar.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
+export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
+};
+type OwnerState = DataGridProcessedProps;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: OwnerState;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * 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/)
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Toolbar };

package/components/toolbarV8/Toolbar.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _ToolbarContext = require("./ToolbarContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbar']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const ToolbarRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'Toolbar'
+})({
+  flex: 0,
+  display: 'flex',
+  alignItems: 'center',
+  gap: _cssVariables.vars.spacing(0.25),
+  padding: _cssVariables.vars.spacing(0.75),
+  borderBottom: `1px solid ${_cssVariables.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 = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(props, ref) {
+  const {
+      render,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.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 = (0, _useGridComponentRenderer.useGridComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
+    role: 'toolbar',
+    'aria-orientation': 'horizontal',
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
+  }, other, {
+    ref
+  }));
+  React.useEffect(() => {
+    if (items.length > 0) {
+      setFocusableItemId(items[0]);
+    }
+  }, [items]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.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.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+} : void 0;

package/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/components/toolbarV8/ToolbarButton.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _ToolbarContext = require("./ToolbarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render"];
+/**
+ * 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 = exports.ToolbarButton = (0, _forwardRef.forwardRef)(function ToolbarButton(props, ref) {
+  const {
+      render
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const id = (0, _useId.default)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const buttonRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(buttonRef, ref);
+  const {
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown
+  } = (0, _ToolbarContext.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 = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+    tabIndex: focusableItemId === id ? 0 : -1,
+    onKeyDown: onItemKeyDown
+  }, other, {
+    ref: handleRef
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focusVisible: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: _propTypes.default.bool,
+  className: _propTypes.default.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.default.oneOf(['default', 'inherit', 'primary']),
+  component: _propTypes.default.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: _propTypes.default.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.default.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: _propTypes.default.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.default.oneOf(['end', 'start', false]),
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: _propTypes.default.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.default.string,
+  label: _propTypes.default.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: _propTypes.default.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: _propTypes.default.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  tabIndex: _propTypes.default.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: _propTypes.default.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/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/components/toolbarV8/ToolbarContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarContext = void 0;
+exports.useToolbarContext = useToolbarContext;
+var React = _interopRequireWildcard(require("react"));
+const ToolbarContext = exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+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/components/toolbarV8/index.d.ts

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

package/components/toolbarV8/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Toolbar = require("./Toolbar");
+Object.keys(_Toolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toolbar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Toolbar[key];
+    }
+  });
+});
+var _ToolbarButton = require("./ToolbarButton");
+Object.keys(_ToolbarButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToolbarButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToolbarButton[key];
+    }
+  });
+});

package/components/virtualization/GridVirtualScrollbar.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,7 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useOnMount = require("../../hooks/utils/useOnMount");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -23,7 +26,7 @@ const useUtilityClasses = (ownerState, position) => {
     root: ['scrollbar', `scrollbar--${position}`],
     content: ['scrollbarContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
@@ -79,7 +82,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
   const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
   const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
-  const onScrollerScroll = (0, _utils.unstable_useEventCallback)(() => {
+  const onScrollerScroll = (0, _useEventCallback.default)(() => {
     const scrollbar = scrollbarRef.current;
     const scrollPosition = props.scrollPosition.current;
     if (!scrollbar) {
@@ -97,7 +100,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
     const value = scrollPosition[propertyScrollPosition] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
   });
-  const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
+  const onScrollbarScroll = (0, _useEventCallback.default)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
     if (!scrollbar) {
@@ -130,14 +133,20 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
   }, [scrollbarInnerSize, propertyDimension]);
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    ref: (0, _utils.unstable_useForkRef)(ref, scrollbarRef),
+    ref: (0, _useForkRef.default)(ref, scrollbarRef),
     className: classes.root,
     style: props.position === 'vertical' && rootProps.unstable_listView ? {
       height: '100%',
       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__*/(0, _jsxRuntime.jsx)("div", {
       ref: contentRef,
       className: classes.content

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -8,6 +8,7 @@ exports.GridVirtualScrollerFiller = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _cssVariables = require("../../constants/cssVariables");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _dimensions = require("../../hooks/features/dimensions");
@@ -24,7 +25,7 @@ const Pinned = (0, _system.styled)('div')({
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
-  backgroundColor: 'var(--DataGrid-pinnedBackground)'
+  backgroundColor: _cssVariables.vars.cell.background.pinned
 });
 const PinnedLeft = (0, _system.styled)(Pinned)({
   left: 0,