@mui/x-data-grid 6.2.0 → 6.3.0

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -9,10 +9,7 @@ import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector,
-// GridColumnsState,
-gridVisibleColumnFieldsSelector } from '../columns';
-import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
 var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   var groupLookup = {};
   columnGroupingModel.forEach(function (node) {
@@ -100,19 +97,15 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
       });
     });
   }, [apiRef, props.columnGroupingModel]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  var columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
-  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  /**
-   * EFFECTS
-   */
-  React.useEffect(function () {
-    var _props$experimentalFe2, _props$columnGrouping4, _props$columnGrouping5;
+  var updateColumnGroupingState = React.useCallback(function (columnGroupingModel) {
+    var _props$experimentalFe2;
     if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
-    var groupLookup = createGroupLookup((_props$columnGrouping4 = props.columnGroupingModel) != null ? _props$columnGrouping4 : []);
-    var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    var columnFields = gridColumnFieldsSelector(apiRef);
+    var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    var groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
+    var unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
     var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
     var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
       var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
@@ -128,5 +121,19 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
         }
       });
     });
-  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
 };

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -1,5 +1,6 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -10,6 +11,7 @@ import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
+import { gridClasses } from '../../../constants/gridClasses';
 var isTestEnvironment = process.env.NODE_ENV === 'test';
 var hasScroll = function hasScroll(_ref) {
   var content = _ref.content,
@@ -113,10 +115,25 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, totalHeaderHeight]);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    savedSize = _React$useState2[0],
+    setSavedSize = _React$useState2[1];
+  var debouncedSetSavedSize = React.useMemo(function () {
+    return debounce(setSavedSize, 60);
+  }, []);
+  var previousSize = React.useRef();
+  useEnhancedEffect(function () {
+    if (savedSize) {
+      updateGridDimensionsRef();
+      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+    }
+  }, [apiRef, savedSize, updateGridDimensionsRef]);
+
+  // This is the function called by apiRef.current.resize()
   var resize = React.useCallback(function () {
-    updateGridDimensionsRef();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, [apiRef, updateGridDimensionsRef]);
+    apiRef.current.computeSizeAndPublishResizeEvent();
+  }, [apiRef]);
   var getRootDimensions = React.useCallback(function () {
     return fullDimensionsRef.current;
   }, []);
@@ -140,19 +157,45 @@ export function useGridDimensions(apiRef, props) {
     var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  var computeSizeAndPublishResizeEvent = React.useCallback(function () {
+    var _apiRef$current$rootE2, _previousSize$current, _previousSize$current2;
+    var rootEl = (_apiRef$current$rootE2 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE2.current;
+    var mainEl = rootEl == null ? void 0 : rootEl.querySelector(".".concat(gridClasses.main));
+    if (!mainEl) {
+      return;
+    }
+    var height = mainEl.offsetHeight || 0;
+    var width = mainEl.offsetWidth || 0;
+    var win = ownerWindow(mainEl);
+    var computedStyle = win.getComputedStyle(mainEl);
+    var paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+    var paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+    var paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+    var paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+    var newHeight = height - paddingTop - paddingBottom;
+    var newWidth = width - paddingLeft - paddingRight;
+    var hasHeightChanged = newHeight !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
+    var hasWidthChanged = newWidth !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
+    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
+      var size = {
+        width: newWidth,
+        height: newHeight
+      };
+      apiRef.current.publishEvent('resize', size);
+      previousSize.current = size;
+    }
+  }, [apiRef]);
   var dimensionsApi = {
     resize: resize,
     getRootDimensions: getRootDimensions
   };
   var dimensionsPrivateApi = {
     getViewportPageSize: getViewportPageSize,
-    updateGridDimensionsRef: updateGridDimensionsRef
+    updateGridDimensionsRef: updateGridDimensionsRef,
+    computeSizeAndPublishResizeEvent: computeSizeAndPublishResizeEvent
   };
   useGridApiMethod(apiRef, dimensionsApi, 'public');
   useGridApiMethod(apiRef, dimensionsPrivateApi, 'private');
-  var debounceResize = React.useMemo(function () {
-    return debounce(resize, 60);
-  }, [resize]);
   var isFirstSizing = React.useRef(true);
   var handleResize = React.useCallback(function (size) {
     rootDimensionsRef.current = size;
@@ -169,18 +212,18 @@ export function useGridDimensions(apiRef, props) {
     }
     if (isTestEnvironment) {
       // We don't need to debounce the resize for tests.
-      resize();
+      setSavedSize(size);
       isFirstSizing.current = false;
       return;
     }
     if (isFirstSizing.current) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      resize();
+      setSavedSize(size);
       isFirstSizing.current = false;
       return;
     }
-    debounceResize();
-  }, [props.autoHeight, debounceResize, logger, resize]);
+    debouncedSetSavedSize(size);
+  }, [props.autoHeight, debouncedSetSavedSize, logger]);
   useEnhancedEffect(function () {
     return updateGridDimensionsRef();
   }, [updateGridDimensionsRef]);

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -132,7 +132,9 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
       (_printDoc$body$classL = printDoc.body.classList).add.apply(_printDoc$body$classL, _toConsumableArray(normalizeOptions.bodyClassName.split(' ')));
     }
     if (normalizeOptions.copyStyles) {
-      var headStyleElements = doc.current.querySelectorAll("style, link[rel='stylesheet']");
+      var rootCandidate = gridRootElement.getRootNode();
+      var root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc.current;
+      var headStyleElements = root.querySelectorAll("style, link[rel='stylesheet']");
       for (var i = 0; i < headStyleElements.length; i += 1) {
         var node = headStyleElements[i];
         if (node.tagName === 'STYLE') {

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -186,11 +186,13 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       height: rootRef.current.clientHeight
     });
   }, [rowsMeta.currentPageTotalHeight]);
-  var handleResize = React.useCallback(function (params) {
-    setContainerDimensions({
-      width: params.width,
-      height: params.height
-    });
+  var handleResize = React.useCallback(function () {
+    if (rootRef.current) {
+      setContainerDimensions({
+        width: rootRef.current.clientWidth,
+        height: rootRef.current.clientHeight
+      });
+    }
   }, []);
   useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
@@ -323,7 +325,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       renderContext: renderContext
     };
-    var nextRenderContext = params.renderContext,
+    var onRowRender = params.onRowRender,
+      nextRenderContext = params.renderContext,
       _params$minFirstColum = params.minFirstColumn,
       minFirstColumn = _params$minFirstColum === void 0 ? renderZoneMinColumnIndex : _params$minFirstColum,
       _params$maxLastColumn = params.maxLastColumn,
@@ -414,6 +417,9 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       } else {
         isSelected = apiRef.current.isRowSelectable(_id);
       }
+      if (onRowRender) {
+        onRowRender(_id);
+      }
       var focusedCell = cellFocus !== null && cellFocus.id === _id ? cellFocus.field : null;
       var tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === _id) {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.2.0
+ * @mui/x-data-grid v6.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/joy/index.js

@@ -0,0 +1,2 @@
+import joySlots from './joySlots';
+export { joySlots as unstable_joySlots };

package/legacy/joy/joySlots.js

@@ -0,0 +1,180 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _excluded2 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded3 = ["color", "size", "sx"],
+  _excluded4 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"];
+import * as React from 'react';
+import JoyCheckbox from '@mui/joy/Checkbox';
+import JoyInput from '@mui/joy/Input';
+import JoyFormControl from '@mui/joy/FormControl';
+import JoyFormLabel from '@mui/joy/FormLabel';
+import JoyButton from '@mui/joy/Button';
+import JoyIconButton from '@mui/joy/IconButton';
+import JoySwitch from '@mui/joy/Switch';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function convertColor(color) {
+  if (color === 'secondary') {
+    return 'primary';
+  }
+  if (color === 'error') {
+    return 'danger';
+  }
+  if (color === 'default' || color === 'inherit') {
+    return 'neutral';
+  }
+  return color;
+}
+function convertSize(size) {
+  return size ? {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+  }[size] : size;
+}
+function convertVariant(variant) {
+  return variant ? {
+    outlined: 'outlined',
+    contained: 'solid',
+    text: 'plain',
+    standard: 'plain',
+    filled: 'soft'
+  }[variant] : variant;
+}
+var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var touchRippleRef = _ref.touchRippleRef,
+    inputProps = _ref.inputProps,
+    onChange = _ref.onChange,
+    color = _ref.color,
+    size = _ref.size,
+    checked = _ref.checked,
+    sx = _ref.sx,
+    value = _ref.value,
+    inputRef = _ref.inputRef,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(JoyCheckbox, _extends({}, props, {
+    slotProps: {
+      input: _extends({}, inputProps, {
+        ref: inputRef
+      })
+    },
+    ref: ref,
+    checked: checked,
+    onChange: onChange
+  }));
+});
+var TextField = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var onChange = _ref2.onChange,
+    label = _ref2.label,
+    placeholder = _ref2.placeholder,
+    value = _ref2.value,
+    inputRef = _ref2.inputRef,
+    type = _ref2.type;
+  return /*#__PURE__*/_jsxs(JoyFormControl, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(JoyFormLabel, {
+      sx: {
+        fontSize: 12
+      },
+      children: label
+    }), /*#__PURE__*/_jsx(JoyInput, {
+      type: type,
+      value: value,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: "sm",
+      slotProps: {
+        input: {
+          ref: inputRef
+        }
+      }
+    })]
+  });
+});
+var Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
+  var _convertVariant;
+  var startIcon = _ref3.startIcon,
+    color = _ref3.color,
+    endIcon = _ref3.endIcon,
+    size = _ref3.size,
+    sx = _ref3.sx,
+    variant = _ref3.variant,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: (_convertVariant = convertVariant(variant)) != null ? _convertVariant : 'plain',
+    ref: ref,
+    startDecorator: startIcon,
+    endDecorator: endIcon,
+    sx: sx
+  }));
+});
+var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+  var _convertColor;
+  var color = _ref4.color,
+    size = _ref4.size,
+    sx = _ref4.sx,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
+    size: convertSize(size),
+    color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
+    variant: "plain",
+    ref: ref,
+    sx: sx
+  }));
+});
+var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
+  var name = _ref5.name,
+    checkedIcon = _ref5.checkedIcon,
+    colorProp = _ref5.color,
+    disableRipple = _ref5.disableRipple,
+    disableFocusRipple = _ref5.disableFocusRipple,
+    disableTouchRipple = _ref5.disableTouchRipple,
+    edge = _ref5.edge,
+    icon = _ref5.icon,
+    inputProps = _ref5.inputProps,
+    inputRef = _ref5.inputRef,
+    size = _ref5.size,
+    sx = _ref5.sx,
+    onChange = _ref5.onChange,
+    onClick = _ref5.onClick,
+    props = _objectWithoutProperties(_ref5, _excluded4);
+  return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
+    onChange: onChange,
+    size: convertSize(size),
+    color: convertColor(colorProp),
+    ref: ref,
+    slotProps: {
+      input: _extends({}, inputProps, {
+        name: name,
+        onClick: onClick,
+        ref: inputRef
+      }),
+      thumb: {
+        children: icon
+      }
+    },
+    sx: [_extends({}, edge === 'start' && {
+      ml: '-8px'
+    }, edge === 'end' && {
+      mr: '-8px'
+    })].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]))
+  }));
+});
+var joySlots = {
+  baseCheckbox: Checkbox,
+  baseTextField: TextField,
+  baseButton: Button,
+  baseIconButton: IconButton,
+  baseSwitch: Switch
+  // BaseFormControl: MUIFormControl,
+  // baseSelect: Select,
+  // baseSelectOption: Option,
+  // BaseTooltip: MUITooltip,
+  // BasePopper: MUIPopper,
+};
+
+export default joySlots;

package/legacy/locales/frFR.js

@@ -39,7 +39,7 @@ var frFRGrid = {
   columnsPanelHideAllButton: 'Tout cacher',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Tout supprimer',
   filterPanelDeleteIconLabel: 'Supprimer',
   filterPanelLogicOperator: 'Opérateur logique',
   filterPanelOperator: 'Opérateur',
@@ -69,7 +69,7 @@ var frFRGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Afficher les colonnes',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
   columnMenuHideColumn: 'Cacher',
   columnMenuUnsort: 'Annuler le tri',

package/legacy/locales/trTR.js

@@ -39,7 +39,7 @@ var trTRGrid = {
   columnsPanelHideAllButton: 'Hepsini gizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Hepsini kaldır',
   filterPanelDeleteIconLabel: 'Kaldır',
   filterPanelLogicOperator: 'Mantıksal operatörler',
   filterPanelOperator: 'Operatör',
@@ -69,7 +69,7 @@ var trTRGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre uygula',
   columnMenuHideColumn: 'Gizle',
   columnMenuUnsort: 'Sıralama',

package/legacy/locales/zhCN.js

@@ -39,7 +39,7 @@ var zhCNGrid = {
   columnsPanelHideAllButton: '隐藏所有',
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '清除全部',
   filterPanelDeleteIconLabel: '删除',
   filterPanelLogicOperator: '逻辑操作器',
   filterPanelOperator: '操作器',
@@ -69,7 +69,7 @@ var zhCNGrid = {
   // Column menu text
   columnMenuLabel: '菜单',
   columnMenuShowColumns: '显示',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',
   columnMenuHideColumn: '隐藏',
   columnMenuUnsort: '恢复默认',

package/locales/frFR.js

@@ -37,7 +37,7 @@ const frFRGrid = {
   columnsPanelHideAllButton: 'Tout cacher',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Tout supprimer',
   filterPanelDeleteIconLabel: 'Supprimer',
   filterPanelLogicOperator: 'Opérateur logique',
   filterPanelOperator: 'Opérateur',
@@ -67,7 +67,7 @@ const frFRGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Afficher les colonnes',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
   columnMenuHideColumn: 'Cacher',
   columnMenuUnsort: 'Annuler le tri',

package/locales/trTR.js

@@ -37,7 +37,7 @@ const trTRGrid = {
   columnsPanelHideAllButton: 'Hepsini gizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Hepsini kaldır',
   filterPanelDeleteIconLabel: 'Kaldır',
   filterPanelLogicOperator: 'Mantıksal operatörler',
   filterPanelOperator: 'Operatör',
@@ -67,7 +67,7 @@ const trTRGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre uygula',
   columnMenuHideColumn: 'Gizle',
   columnMenuUnsort: 'Sıralama',

package/locales/zhCN.js

@@ -37,7 +37,7 @@ const zhCNGrid = {
   columnsPanelHideAllButton: '隐藏所有',
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '清除全部',
   filterPanelDeleteIconLabel: '删除',
   filterPanelLogicOperator: '逻辑操作器',
   filterPanelOperator: '操作器',
@@ -67,7 +67,7 @@ const zhCNGrid = {
   // Column menu text
   columnMenuLabel: '菜单',
   columnMenuShowColumns: '显示',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',
   columnMenuHideColumn: '隐藏',
   columnMenuUnsort: '恢复默认',

package/material/index.d.ts

@@ -15,12 +15,12 @@ declare const materialSlots: {
     BaseButton: import("@mui/material").ExtendButtonBase<import("@mui/material/Button").ButtonTypeMap<{}, "button">>;
     BaseIconButton: import("@mui/material").ExtendButtonBase<import("@mui/material/IconButton").IconButtonTypeMap<{}, "button">>;
     BaseTooltip: typeof MUITooltip;
-    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperUnstyledProps<"div", {}>, "direction"> & {
+    BasePopper: import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps<"div", {}>, "direction"> & {
         components?: {
             Root?: import("react").ElementType<any> | undefined;
         } | undefined;
         componentsProps?: {
-            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnerState> | undefined;
+            root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
         } | undefined;
         sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/models/gridSlotsComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { UncapitalizeObjectKeys } from '../internals/utils';
-import { GridIconSlotsComponent } from './gridIconSlotsComponent';
+import type { UncapitalizeObjectKeys } from '../internals/utils';
+import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
 /**
  * Grid components React prop interface containing all the overridable components.
  */

package/modern/components/GridHeader.js

@@ -3,11 +3,9 @@ import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
+export function GridHeader() {
   const rootProps = useGridRootProps();
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, rootProps.slotProps?.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, rootProps.slotProps?.toolbar))]
-  }));
-});
+  });
+}