@mui/x-data-grid 7.0.0-beta.3 → 7.0.0-beta.4

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -1,105 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import MenuList from '@mui/material/MenuList';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridMenu } from '../menu/GridMenu';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
-  var children = props.children,
-    _props$slotProps = props.slotProps,
-    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
-  var buttonProps = slotProps.button || {};
-  var tooltipProps = slotProps.tooltip || {};
-  var apiRef = useGridApiContext();
-  var rootProps = useGridRootProps();
-  var exportButtonId = useId();
-  var exportMenuId = useId();
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    open = _React$useState2[0],
-    setOpen = _React$useState2[1];
-  var buttonRef = React.useRef(null);
-  var handleRef = useForkRef(ref, buttonRef);
-  var handleMenuOpen = function handleMenuOpen(event) {
-    var _buttonProps$onClick;
-    setOpen(function (prevOpen) {
-      return !prevOpen;
-    });
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
-  };
-  var handleMenuClose = function handleMenuClose() {
-    return setOpen(false);
-  };
-  var handleListKeyDown = function handleListKeyDown(event) {
-    if (isTabKey(event.key)) {
-      event.preventDefault();
-    }
-    if (isHideMenuKey(event.key)) {
-      handleMenuClose();
-    }
-  };
-  if (children == null) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
-      title: apiRef.current.getLocaleText('toolbarExportLabel'),
-      enterDelay: 1000
-    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
-        size: "small",
-        startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
-        "aria-expanded": open,
-        "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
-        "aria-haspopup": "menu",
-        "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId
-      }, buttonProps, {
-        onClick: handleMenuOpen
-      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
-        children: apiRef.current.getLocaleText('toolbarExport')
-      }))
-    })), /*#__PURE__*/_jsx(GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      onClose: handleMenuClose,
-      position: "bottom-start",
-      children: /*#__PURE__*/_jsx(MenuList, {
-        id: exportMenuId,
-        className: gridClasses.menuList,
-        "aria-labelledby": exportButtonId,
-        onKeyDown: handleListKeyDown,
-        autoFocusItem: open,
-        children: React.Children.map(children, function (child) {
-          if (! /*#__PURE__*/React.isValidElement(child)) {
-            return child;
-          }
-          return /*#__PURE__*/React.cloneElement(child, {
-            hideMenu: handleMenuClose
-          });
-        })
-      })
-    })]
-  });
-});
-process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: PropTypes.object
-} : void 0;
-export { GridToolbarExportContainer };

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -1,136 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
-import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
-import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['toolbarFilterList']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var GridToolbarFilterListRoot = styled('ul', {
-  name: 'MuiDataGrid',
-  slot: 'ToolbarFilterList',
-  overridesResolver: function overridesResolver(_props, styles) {
-    return styles.toolbarFilterList;
-  }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    margin: theme.spacing(1, 1, 0.5),
-    padding: theme.spacing(0, 1)
-  };
-});
-var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
-  var _props$slotProps = props.slotProps,
-    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
-  var buttonProps = slotProps.button || {};
-  var tooltipProps = slotProps.tooltip || {};
-  var apiRef = useGridApiContext();
-  var rootProps = useGridRootProps();
-  var activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
-  var lookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  var classes = useUtilityClasses(rootProps);
-  var filterButtonId = useId();
-  var filterPanelId = useId();
-  var tooltipContentNode = React.useMemo(function () {
-    if (preferencePanel.open) {
-      return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
-    }
-    if (activeFilters.length === 0) {
-      return apiRef.current.getLocaleText('toolbarFiltersTooltipShow');
-    }
-    var getOperatorLabel = function getOperatorLabel(item) {
-      return lookup[item.field].filterOperators.find(function (operator) {
-        return operator.value === item.operator;
-      }).label || apiRef.current.getLocaleText("filterOperator".concat(capitalize(item.operator))).toString();
-    };
-    var getFilterItemValue = function getFilterItemValue(item) {
-      var _ref2 = lookup[item.field].filterOperators.find(function (operator) {
-          return operator.value === item.operator;
-        }),
-        getValueAsString = _ref2.getValueAsString;
-      return getValueAsString ? getValueAsString(item.value) : item.value;
-    };
-    return /*#__PURE__*/_jsxs("div", {
-      children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
-        className: classes.root,
-        ownerState: rootProps,
-        children: activeFilters.map(function (item, index) {
-          return _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
-            children: "".concat(lookup[item.field].headerName || item.field, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(
-            // implicit check for null and undefined
-            item.value != null ? getFilterItemValue(item) : '')
-          }, index));
-        })
-      })]
-    });
-  }, [apiRef, rootProps, preferencePanel.open, activeFilters, lookup, classes]);
-  var toggleFilter = function toggleFilter(event) {
-    var _buttonProps$onClick;
-    var open = preferencePanel.open,
-      openedPanelValue = preferencePanel.openedPanelValue;
-    if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
-      apiRef.current.hidePreferences();
-    } else {
-      apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
-    }
-    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
-  };
-
-  // Disable the button if the corresponding is disabled
-  if (rootProps.disableColumnFilter) {
-    return null;
-  }
-  var isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
-    title: tooltipContentNode,
-    enterDelay: 1000
-  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
-      id: filterButtonId,
-      size: "small",
-      "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
-      "aria-controls": isOpen ? filterPanelId : undefined,
-      "aria-expanded": isOpen,
-      "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(Badge, {
-        badgeContent: activeFilters.length,
-        color: "primary",
-        children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
-      onClick: toggleFilter
-    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarFilters')
-    }))
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: PropTypes.object
-} : void 0;
-export { GridToolbarFilterButton };

package/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -1,164 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import TextField from '@mui/material/TextField';
-import { styled } from '@mui/material/styles';
-import { unstable_debounce as debounce } from '@mui/utils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
-import { isDeepEqual } from '../../utils/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-var GridToolbarQuickFilterRoot = styled(TextField, {
-  name: 'MuiDataGrid',
-  slot: 'ToolbarQuickFilter',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.toolbarQuickFilter;
-  }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return _defineProperty(_defineProperty({
-    width: 'auto',
-    paddingBottom: theme.spacing(0.5),
-    '& input': {
-      marginLeft: theme.spacing(0.5)
-    },
-    '& .MuiInput-underline:before': {
-      borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider)
-    }
-  }, "& input[type=search]::-ms-clear,\n& input[type=search]::-ms-reveal", {
-    /* clears the 'X' icon from IE */
-    display: 'none',
-    width: 0,
-    height: 0
-  }), "& input[type=\"search\"]::-webkit-search-decoration,\n  & input[type=\"search\"]::-webkit-search-cancel-button,\n  & input[type=\"search\"]::-webkit-search-results-button,\n  & input[type=\"search\"]::-webkit-search-results-decoration", {
-    /* clears the 'X' icon from Chrome */
-    display: 'none'
-  });
-});
-var defaultSearchValueParser = function defaultSearchValueParser(searchText) {
-  return searchText.split(' ').filter(function (word) {
-    return word !== '';
-  });
-};
-var defaultSearchValueFormatter = function defaultSearchValueFormatter(values) {
-  return values.join(' ');
-};
-function GridToolbarQuickFilter(props) {
-  var _rootProps$slotProps, _rootProps$slotProps2;
-  var apiRef = useGridApiContext();
-  var rootProps = useGridRootProps();
-  var quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
-  var _props$quickFilterPar = props.quickFilterParser,
-    quickFilterParser = _props$quickFilterPar === void 0 ? defaultSearchValueParser : _props$quickFilterPar,
-    _props$quickFilterFor = props.quickFilterFormatter,
-    quickFilterFormatter = _props$quickFilterFor === void 0 ? defaultSearchValueFormatter : _props$quickFilterFor,
-    _props$debounceMs = props.debounceMs,
-    debounceMs = _props$debounceMs === void 0 ? rootProps.filterDebounceMs : _props$debounceMs,
-    other = _objectWithoutProperties(props, _excluded);
-  var _React$useState = React.useState(function () {
-      return quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    searchValue = _React$useState2[0],
-    setSearchValue = _React$useState2[1];
-  var prevQuickFilterValuesRef = React.useRef(quickFilterValues);
-  React.useEffect(function () {
-    if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
-      // The model of quick filter value has been updated
-      prevQuickFilterValuesRef.current = quickFilterValues;
-
-      // Update the input value if needed to match the new model
-      setSearchValue(function (prevSearchValue) {
-        return isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
-      });
-    }
-  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
-  var updateSearchValue = React.useCallback(function (newSearchValue) {
-    var newQuickFilterValues = quickFilterParser(newSearchValue);
-    prevQuickFilterValuesRef.current = newQuickFilterValues;
-    apiRef.current.setQuickFilterValues(newQuickFilterValues);
-  }, [apiRef, quickFilterParser]);
-  var debouncedUpdateSearchValue = React.useMemo(function () {
-    return debounce(updateSearchValue, debounceMs);
-  }, [updateSearchValue, debounceMs]);
-  var handleSearchValueChange = React.useCallback(function (event) {
-    var newSearchValue = event.target.value;
-    setSearchValue(newSearchValue);
-    debouncedUpdateSearchValue(newSearchValue);
-  }, [debouncedUpdateSearchValue]);
-  var handleSearchReset = React.useCallback(function () {
-    setSearchValue('');
-    updateSearchValue('');
-  }, [updateSearchValue]);
-  return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
-    as: rootProps.slots.baseTextField,
-    ownerState: rootProps,
-    variant: "standard",
-    value: searchValue,
-    onChange: handleSearchValueChange,
-    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
-    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-    type: "search"
-  }, other, {
-    InputProps: _extends({
-      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
-        fontSize: "small"
-      }),
-      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-        size: "small",
-        sx: {
-          visibility: searchValue ? 'visible' : 'hidden'
-        },
-        onClick: handleSearchReset
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
-          fontSize: "small"
-        })
-      }))
-    }, other.InputProps)
-  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTextField));
-}
-process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The debounce time in milliseconds.
-   * @default 150
-   */
-  debounceMs: PropTypes.number,
-  /**
-   * Function responsible for formatting values of quick filter in a string when the model is modified
-   * @param {any[]} values The new values passed to the quick filter model
-   * @returns {string} The string to display in the text field
-   * @default (values: string[]) => values.join(' ')
-   */
-  quickFilterFormatter: PropTypes.func,
-  /**
-   * Function responsible for parsing text input in an array of independent values for quick filtering.
-   * @param {string} input The value entered by the user
-   * @returns {any[]} The array of value on which quick filter is applied
-   * @default (searchText: string) => searchText
-   *   .split(' ')
-   *   .filter((word) => word !== '')
-   */
-  quickFilterParser: PropTypes.func
-} : void 0;
-
-/**
- * Demos:
- * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
- * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
- *
- * API:
- * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
- */
-export { GridToolbarQuickFilter };

package/legacy/components/toolbar/index.js

@@ -1,7 +0,0 @@
-export * from './GridToolbar';
-export * from './GridToolbarColumnsButton';
-export * from './GridToolbarDensitySelector';
-export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
-export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
-export * from './GridToolbarQuickFilter';

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

package/legacy/components/virtualization/GridMainContainer.js

@@ -1,20 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { styled } from '@mui/system';
-import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
-import { jsx as _jsx } from "react/jsx-runtime";
-var Element = styled('div')({
-  flexGrow: 1,
-  position: 'relative',
-  overflow: 'hidden'
-});
-export var GridMainContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var ariaAttributes = useGridAriaAttributes();
-  return /*#__PURE__*/_jsx(Element, _extends({
-    ref: ref,
-    className: props.className,
-    tabIndex: -1
-  }, ariaAttributes, {
-    children: props.children
-  }));
-});

package/legacy/components/virtualization/GridTopContainer.js

@@ -1,35 +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 { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses() {
-  var slots = {
-    root: ['topContainer']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, {});
-};
-var Element = styled('div')({
-  position: 'sticky',
-  zIndex: 2,
-  top: 0,
-  '&::after': {
-    content: '" "',
-    position: 'absolute',
-    zIndex: 5,
-    bottom: 0,
-    left: 0,
-    height: 1,
-    width: 'var(--DataGrid-rowWidth)',
-    backgroundColor: 'var(--DataGrid-rowBorderColor)'
-  }
-});
-export function GridTopContainer(props) {
-  var classes = useUtilityClasses();
-  return /*#__PURE__*/_jsx(Element, _extends({}, props, {
-    className: clsx(classes.root, props.className, gridClasses['container--top']),
-    role: "presentation"
-  }));
-}

package/legacy/components/virtualization/GridVirtualScrollbar.js

@@ -1,129 +0,0 @@
-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 { useOnMount } from '../../hooks/utils/useOnMount';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { gridDimensionsSelector, useGridSelector } from '../../hooks';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState, position) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['scrollbar', "scrollbar--".concat(position)],
-    content: ['scrollbarContent']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-var Scrollbar = styled('div')({
-  position: 'absolute',
-  display: 'inline-block',
-  zIndex: 6,
-  '& > div': {
-    display: 'inline-block'
-  },
-  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
-  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
-  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
-  // don't have a method to find the required size for scrollbars on those platforms.
-  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
-});
-var ScrollbarVertical = styled(Scrollbar)({
-  width: 'var(--size)',
-  height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  '& > div': {
-    width: 'var(--size)'
-  },
-  top: 'var(--DataGrid-topContainerHeight)',
-  right: '0px'
-});
-var ScrollbarHorizontal = styled(Scrollbar)({
-  width: '100%',
-  height: 'var(--size)',
-  overflowY: 'hidden',
-  overflowX: 'auto',
-  '& > div': {
-    height: 'var(--size)'
-  },
-  bottom: '0px'
-});
-var Content = styled('div')({
-  display: 'inline-block'
-});
-var GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
-  var apiRef = useGridPrivateApiContext();
-  var rootProps = useGridRootProps();
-  var isLocked = React.useRef(false);
-  var lastPosition = React.useRef(0);
-  var scrollbarRef = React.useRef(null);
-  var contentRef = React.useRef(null);
-  var classes = useUtilityClasses(rootProps, props.position);
-  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  var propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  var propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  var hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
-  var contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
-  var scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
-  var scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
-  var onScrollerScroll = useEventCallback(function () {
-    var scroller = apiRef.current.virtualScrollerRef.current;
-    var scrollbar = scrollbarRef.current;
-    if (scroller[propertyScroll] === lastPosition.current) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    var value = scroller[propertyScroll] / contentSize;
-    scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
-  });
-  var onScrollbarScroll = useEventCallback(function () {
-    var scroller = apiRef.current.virtualScrollerRef.current;
-    var scrollbar = scrollbarRef.current;
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    var value = scrollbar[propertyScroll] / scrollbarInnerSize;
-    scroller[propertyScroll] = value * contentSize;
-  });
-  useOnMount(function () {
-    var scroller = apiRef.current.virtualScrollerRef.current;
-    var scrollbar = scrollbarRef.current;
-    scroller.addEventListener('scroll', onScrollerScroll, {
-      capture: true
-    });
-    scrollbar.addEventListener('scroll', onScrollbarScroll, {
-      capture: true
-    });
-    return function () {
-      scroller.removeEventListener('scroll', onScrollerScroll, {
-        capture: true
-      });
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
-        capture: true
-      });
-    };
-  });
-  React.useEffect(function () {
-    var content = contentRef.current;
-    content.style.setProperty(propertyDimension, "".concat(scrollbarInnerSize, "px"));
-  }, [scrollbarInnerSize, propertyDimension]);
-  var Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
-  return /*#__PURE__*/_jsx(Container, {
-    ref: useForkRef(ref, scrollbarRef),
-    className: classes.root,
-    tabIndex: -1,
-    children: /*#__PURE__*/_jsx(Content, {
-      ref: contentRef,
-      className: classes.content
-    })
-  });
-});
-export { GridVirtualScrollbar };