@mui/x-data-grid 6.2.0 → 6.3.0

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

@@ -16,6 +16,7 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+var _gridClasses = require("../../../constants/gridClasses");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const isTestEnvironment = process.env.NODE_ENV === 'test';
@@ -121,10 +122,20 @@ function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, totalHeaderHeight]);
+  const [savedSize, setSavedSize] = React.useState();
+  const debouncedSetSavedSize = React.useMemo(() => (0, _utils.unstable_debounce)(setSavedSize, 60), []);
+  const previousSize = React.useRef();
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (savedSize) {
+      updateGridDimensionsRef();
+      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+    }
+  }, [apiRef, savedSize, updateGridDimensionsRef]);
+
+  // This is the function called by apiRef.current.resize()
   const resize = React.useCallback(() => {
-    updateGridDimensionsRef();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, [apiRef, updateGridDimensionsRef]);
+    apiRef.current.computeSizeAndPublishResizeEvent();
+  }, [apiRef]);
   const getRootDimensions = React.useCallback(() => fullDimensionsRef.current, []);
   const getViewportPageSize = React.useCallback(() => {
     const dimensions = apiRef.current.getRootDimensions();
@@ -146,17 +157,44 @@ function useGridDimensions(apiRef, props) {
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  const computeSizeAndPublishResizeEvent = React.useCallback(() => {
+    const rootEl = apiRef.current.rootElementRef?.current;
+    const mainEl = rootEl?.querySelector(`.${_gridClasses.gridClasses.main}`);
+    if (!mainEl) {
+      return;
+    }
+    const height = mainEl.offsetHeight || 0;
+    const width = mainEl.offsetWidth || 0;
+    const win = (0, _utils.unstable_ownerWindow)(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+    const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+    const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+    const newHeight = height - paddingTop - paddingBottom;
+    const newWidth = width - paddingLeft - paddingRight;
+    const hasHeightChanged = newHeight !== previousSize.current?.height;
+    const hasWidthChanged = newWidth !== previousSize.current?.width;
+    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
+      const size = {
+        width: newWidth,
+        height: newHeight
+      };
+      apiRef.current.publishEvent('resize', size);
+      previousSize.current = size;
+    }
+  }, [apiRef]);
   const dimensionsApi = {
     resize,
     getRootDimensions
   };
   const dimensionsPrivateApi = {
     getViewportPageSize,
-    updateGridDimensionsRef
+    updateGridDimensionsRef,
+    computeSizeAndPublishResizeEvent
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, dimensionsApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, dimensionsPrivateApi, 'private');
-  const debounceResize = React.useMemo(() => (0, _utils.unstable_debounce)(resize, 60), [resize]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
@@ -173,18 +211,18 @@ 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]);
   (0, _utils.unstable_useEnhancedEffect)(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'paginationModelChange', updateGridDimensionsRef);

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

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

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

@@ -185,11 +185,13 @@ const useGridVirtualScroller = props => {
       height: rootRef.current.clientHeight
     });
   }, [rowsMeta.currentPageTotalHeight]);
-  const handleResize = React.useCallback(params => {
-    setContainerDimensions({
-      width: params.width,
-      height: params.height
-    });
+  const handleResize = React.useCallback(() => {
+    if (rootRef.current) {
+      setContainerDimensions({
+        width: rootRef.current.clientWidth,
+        height: rootRef.current.clientHeight
+      });
+    }
   }, []);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'debouncedResize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
@@ -315,6 +317,7 @@ const useGridVirtualScroller = props => {
     renderContext
   }) => {
     const {
+      onRowRender,
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
@@ -398,6 +401,9 @@ const useGridVirtualScroller = props => {
       } else {
         isSelected = apiRef.current.isRowSelectable(id);
       }
+      if (onRowRender) {
+        onRowRender(id);
+      }
       const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
       let tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === id) {

package/node/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/node/joy/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "unstable_joySlots", {
+  enumerable: true,
+  get: function () {
+    return _joySlots.default;
+  }
+});
+var _joySlots = _interopRequireDefault(require("./joySlots"));

package/node/joy/joySlots.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _Checkbox = _interopRequireDefault(require("@mui/joy/Checkbox"));
+var _Input = _interopRequireDefault(require("@mui/joy/Input"));
+var _FormControl = _interopRequireDefault(require("@mui/joy/FormControl"));
+var _FormLabel = _interopRequireDefault(require("@mui/joy/FormLabel"));
+var _Button = _interopRequireDefault(require("@mui/joy/Button"));
+var _IconButton = _interopRequireDefault(require("@mui/joy/IconButton"));
+var _Switch = _interopRequireDefault(require("@mui/joy/Switch"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _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"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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;
+}
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      inputProps,
+      onChange,
+      checked,
+      inputRef
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, props, {
+    slotProps: {
+      input: (0, _extends2.default)({}, inputProps, {
+        ref: inputRef
+      })
+    },
+    ref: ref,
+    checked: checked,
+    onChange: onChange
+  }));
+});
+const TextField = /*#__PURE__*/React.forwardRef(({
+  onChange,
+  label,
+  placeholder,
+  value,
+  inputRef,
+  type
+}, ref) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
+      sx: {
+        fontSize: 12
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      type: type,
+      value: value,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: "sm",
+      slotProps: {
+        input: {
+          ref: inputRef
+        }
+      }
+    })]
+  });
+});
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
+  let {
+      startIcon,
+      color,
+      endIcon,
+      size,
+      sx,
+      variant
+    } = _ref2,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, props, {
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant) ?? 'plain',
+    ref: ref,
+    startDecorator: startIcon,
+    endDecorator: endIcon,
+    sx: sx
+  }));
+});
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref) {
+  let {
+      color,
+      size,
+      sx
+    } = _ref3,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, props, {
+    size: convertSize(size),
+    color: convertColor(color) ?? 'neutral',
+    variant: "plain",
+    ref: ref,
+    sx: sx
+  }));
+});
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
+  let {
+      name,
+      color: colorProp,
+      edge,
+      icon,
+      inputProps,
+      inputRef,
+      size,
+      sx,
+      onChange,
+      onClick
+    } = _ref4,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, props, {
+    onChange: onChange,
+    size: convertSize(size),
+    color: convertColor(colorProp),
+    ref: ref,
+    slotProps: {
+      input: (0, _extends2.default)({}, inputProps, {
+        name,
+        onClick: onClick,
+        ref: inputRef
+      }),
+      thumb: {
+        children: icon
+      }
+    },
+    sx: [(0, _extends2.default)({}, edge === 'start' && {
+      ml: '-8px'
+    }, edge === 'end' && {
+      mr: '-8px'
+    }), ...(Array.isArray(sx) ? sx : [sx])]
+  }));
+});
+const joySlots = {
+  baseCheckbox: Checkbox,
+  baseTextField: TextField,
+  baseButton: Button,
+  baseIconButton: IconButton,
+  baseSwitch: Switch
+  // BaseFormControl: MUIFormControl,
+  // baseSelect: Select,
+  // baseSelectOption: Option,
+  // BaseTooltip: MUITooltip,
+  // BasePopper: MUIPopper,
+};
+var _default = joySlots;
+exports.default = _default;

package/node/locales/frFR.js

@@ -43,7 +43,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',
@@ -73,7 +73,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/node/locales/trTR.js

@@ -43,7 +43,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',
@@ -73,7 +73,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/node/locales/zhCN.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,10 +36,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.11.13",
+    "@mui/utils": "^5.12.0",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
-    "reselect": "^4.1.7"
+    "reselect": "^4.1.8"
   },
   "peerDependencies": {
     "@mui/material": "^5.4.1",

package/components/GridAutoSizer.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-export interface AutoSizerSize {
-    height: number;
-    width: number;
-}
-export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onResize'> {
-    /**
-     * Function responsible for rendering children.
-     * @param {AutoSizerSize} size The grid's size.
-     * @returns {React.ReactNode} The children to render.
-     */
-    children: React.ReactNode;
-    /**
-     * Default height to use for initial render; useful for SSR.
-     * @default null
-     */
-    defaultHeight?: number;
-    /**
-     * Default width to use for initial render; useful for SSR.
-     * @default null
-     */
-    defaultWidth?: number;
-    /**
-     * If `true`, disable dynamic :height property.
-     * @default false
-     */
-    disableHeight?: boolean;
-    /**
-     * If `true`, disable dynamic :width property.
-     * @default false
-     */
-    disableWidth?: boolean;
-    /**
-     * Nonce of the inlined stylesheet for Content Security Policy.
-     */
-    nonce?: string;
-    /**
-     * Callback to be invoked on-resize.
-     * @param {AutoSizerSize} size The grid's size.
-     */
-    onResize?: (size: AutoSizerSize) => void;
-}
-declare const GridAutoSizer: React.ForwardRefExoticComponent<AutoSizerProps & React.RefAttributes<HTMLDivElement>>;
-export { GridAutoSizer };

package/components/GridAutoSizer.js

@@ -1,126 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useForkRef as useForkRef, unstable_ownerWindow as ownerWindow, unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createDetectElementResize from '../lib/createDetectElementResize';
-// TODO replace with https://caniuse.com/resizeobserver.
-
-// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
-// for the sources.
-import { jsx as _jsx } from "react/jsx-runtime";
-const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
-  const {
-      children,
-      defaultHeight = null,
-      defaultWidth = null,
-      disableHeight = false,
-      disableWidth = false,
-      nonce,
-      onResize,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [state, setState] = React.useState({
-    height: defaultHeight,
-    width: defaultWidth
-  });
-  const rootRef = React.useRef(null);
-  const parentElement = React.useRef(null);
-  const handleResize = useEventCallback(() => {
-    // Guard against AutoSizer component being removed from the DOM immediately after being added.
-    // This can result in invalid style values which can result in NaN values if we don't handle them.
-    // See issue #150 for more context.
-    if (parentElement.current) {
-      const height = parentElement.current.offsetHeight || 0;
-      const width = parentElement.current.offsetWidth || 0;
-      const win = ownerWindow(parentElement.current);
-      const computedStyle = win.getComputedStyle(parentElement.current);
-      const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
-      const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
-      const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
-      const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
-      const newHeight = height - paddingTop - paddingBottom;
-      const newWidth = width - paddingLeft - paddingRight;
-      if (!disableHeight && state.height !== newHeight || !disableWidth && state.width !== newWidth) {
-        setState({
-          height: newHeight,
-          width: newWidth
-        });
-        if (onResize) {
-          onResize({
-            height: newHeight,
-            width: newWidth
-          });
-        }
-      }
-    }
-  });
-  useEnhancedEffect(() => {
-    var _parentElement$curren;
-    parentElement.current = rootRef.current.parentElement;
-    if (!parentElement) {
-      return undefined;
-    }
-    const win = ownerWindow((_parentElement$curren = parentElement.current) != null ? _parentElement$curren : undefined);
-    const detectElementResize = createDetectElementResize(nonce, win);
-    detectElementResize.addResizeListener(parentElement.current, handleResize);
-    handleResize();
-    return () => {
-      detectElementResize.removeResizeListener(parentElement.current, handleResize);
-    };
-  }, [nonce, handleResize]);
-  const handleRef = useForkRef(rootRef, ref);
-  return /*#__PURE__*/_jsx("div", _extends({
-    ref: handleRef,
-    style: _extends({
-      flex: disableHeight ? 0 : '1 1 0px',
-      overflow: disableHeight ? 'visible' : 'auto'
-    }, style)
-  }, other, {
-    children: state.height === null && state.width === null ? null : children
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Function responsible for rendering children.
-   * @param {AutoSizerSize} size The grid's size.
-   * @returns {React.ReactNode} The children to render.
-   */
-  children: PropTypes.node,
-  /**
-   * Default height to use for initial render; useful for SSR.
-   * @default null
-   */
-  defaultHeight: PropTypes.number,
-  /**
-   * Default width to use for initial render; useful for SSR.
-   * @default null
-   */
-  defaultWidth: PropTypes.number,
-  /**
-   * If `true`, disable dynamic :height property.
-   * @default false
-   */
-  disableHeight: PropTypes.bool,
-  /**
-   * If `true`, disable dynamic :width property.
-   * @default false
-   */
-  disableWidth: PropTypes.bool,
-  /**
-   * Nonce of the inlined stylesheet for Content Security Policy.
-   */
-  nonce: PropTypes.string,
-  /**
-   * Callback to be invoked on-resize.
-   * @param {AutoSizerSize} size The grid's size.
-   */
-  onResize: PropTypes.func
-} : void 0;
-export { GridAutoSizer };