@mui/x-data-grid 5.17.20 → 5.17.21

package/modern/lib/createDetectElementResize/index.js

@@ -86,11 +86,11 @@ export default function createDetectElementResize(nonce, hostWindow) {
   var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
   var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
 
-  var createStyles = function createStyles(doc) {
-    if (!doc.getElementById('muiDetectElementResize')) {
+  var createStyles = function createStyles(doc, root) {
+    if (!root.getElementById('muiDetectElementResize')) {
       //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
       var css = (animationKeyframes ? animationKeyframes : '') + '.Mui-resizeTriggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.Mui-resizeTriggers, .Mui-resizeTriggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .Mui-resizeTriggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-          head = doc.head || doc.getElementsByTagName('head')[0],
+          container = root.constructor.name === 'ShadowRoot' ? root : doc.head || doc.getElementsByTagName('head')[0],
           style = doc.createElement('style');
       style.id = 'muiDetectElementResize';
       style.type = 'text/css';
@@ -105,7 +105,7 @@ export default function createDetectElementResize(nonce, hostWindow) {
         style.appendChild(doc.createTextNode(css));
       }
 
-      head.appendChild(style);
+      container.appendChild(style);
     }
   };
 
@@ -118,7 +118,7 @@ export default function createDetectElementResize(nonce, hostWindow) {
         element.style.position = 'relative';
       }
 
-      createStyles(doc);
+      createStyles(doc, element.getRootNode());
       element.__resizeLast__ = {};
       element.__resizeListeners__ = [];
       (element.__resizeTriggers__ = doc.createElement('div')).className = 'Mui-resizeTriggers';

package/modern/locales/beBY.js

@@ -0,0 +1,149 @@
+import { beBYCore } from './coreLocales';
+import { getGridLocalization } from '../utils/getGridLocalization';
+
+const getPluralForm = (count, options) => {
+  let pluralForm = options.other;
+  const lastDigit = count % 10;
+
+  if (lastDigit > 1 && lastDigit < 5 && (count < 10 || count > 20)) {
+    pluralForm = options.twoToFour;
+  } else if (lastDigit === 1 && count % 100 !== 11) {
+    pluralForm = options.one;
+  }
+
+  return `${count} ${pluralForm}`;
+};
+
+const beBYGrid = {
+  // Root
+  noRowsLabel: 'Няма радкоў',
+  noResultsOverlayLabel: 'Дадзеныя не знойдзены.',
+  // errorOverlayDefaultLabel: 'An error occurred.',
+  // Density selector toolbar button text
+  toolbarDensity: 'Вышыня радка',
+  toolbarDensityLabel: 'Вышыня радка',
+  toolbarDensityCompact: 'Кампактны',
+  toolbarDensityStandard: 'Стандартны',
+  toolbarDensityComfortable: 'Камфортны',
+  // Columns selector toolbar button text
+  toolbarColumns: 'Слупкі',
+  toolbarColumnsLabel: 'Выберыце слупкі',
+  // Filters toolbar button text
+  toolbarFilters: 'Фільтры',
+  toolbarFiltersLabel: 'Паказаць фільтры',
+  toolbarFiltersTooltipHide: 'Схаваць фільтры',
+  toolbarFiltersTooltipShow: 'Паказаць фільтры',
+  toolbarFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'актыўны фільтр',
+    twoToFour: 'актыўных фільтра',
+    other: 'актыўных фільтраў'
+  }),
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Пошук…',
+  toolbarQuickFilterLabel: 'Пошук',
+  toolbarQuickFilterDeleteIconLabel: 'Ачысціць',
+  // Export selector toolbar button text
+  toolbarExport: 'Экспарт',
+  toolbarExportLabel: 'Экспарт',
+  toolbarExportCSV: 'Спампаваць у фармаце CSV',
+  toolbarExportPrint: 'Друк',
+  toolbarExportExcel: 'Спампаваць у фармаце Excel',
+  // Columns panel text
+  columnsPanelTextFieldLabel: 'Знайсці слупок',
+  columnsPanelTextFieldPlaceholder: 'Загаловак слупка',
+  columnsPanelDragIconLabel: 'Змяніць чарговасць слупкоў',
+  columnsPanelShowAllButton: 'Паказаць усе',
+  columnsPanelHideAllButton: 'Схаваць усе',
+  // Filter panel text
+  filterPanelAddFilter: 'Дадаць фільтр',
+  filterPanelDeleteIconLabel: 'Выдаліць',
+  filterPanelLinkOperator: 'Лагічныя аператары',
+  filterPanelOperators: 'Аператары',
+  // TODO v6: rename to filterPanelOperator
+  filterPanelOperatorAnd: 'І',
+  filterPanelOperatorOr: 'Або',
+  filterPanelColumns: 'Слупкі',
+  filterPanelInputLabel: 'Значэнне',
+  filterPanelInputPlaceholder: 'Значэнне фільтра',
+  // Filter operators text
+  filterOperatorContains: 'змяшчае',
+  filterOperatorEquals: 'роўны',
+  filterOperatorStartsWith: 'пачынаецца з',
+  filterOperatorEndsWith: 'скончваецца на',
+  filterOperatorIs: 'роўны',
+  filterOperatorNot: 'не роўны',
+  filterOperatorAfter: 'больш чым',
+  filterOperatorOnOrAfter: 'больш ці роўны',
+  filterOperatorBefore: 'меньш чым',
+  filterOperatorOnOrBefore: 'меньш ці роўны',
+  filterOperatorIsEmpty: 'пусты',
+  filterOperatorIsNotEmpty: 'не пусты',
+  filterOperatorIsAnyOf: 'усякі з',
+  // Filter values text
+  filterValueAny: 'усякі',
+  filterValueTrue: 'праўда',
+  filterValueFalse: 'няпраўда',
+  // Column menu text
+  columnMenuLabel: 'Меню',
+  columnMenuShowColumns: 'Паказаць слупкі',
+  columnMenuFilter: 'Фільтр',
+  columnMenuHideColumn: 'Схаваць',
+  columnMenuUnsort: 'Скасаваць сартыроўку',
+  columnMenuSortAsc: 'Сартыраваць па нарастанню',
+  columnMenuSortDesc: 'Сартыраваць па спаданню',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
+    one: 'актыўны фільтр',
+    twoToFour: 'актыўных фільтра',
+    other: 'актыўных фільтраў'
+  }),
+  columnHeaderFiltersLabel: 'Паказаць фільтры',
+  columnHeaderSortIconLabel: 'Сартыраваць',
+  // Rows selected footer text
+  footerRowSelected: count => getPluralForm(count, {
+    one: 'абраны радок',
+    twoToFour: 'абраных радка',
+    other: 'абраных радкоў'
+  }),
+  // Total row amount footer text
+  footerTotalRows: 'Усяго радкоў:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} з ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'Выбар сцяжка',
+  checkboxSelectionSelectAllRows: 'Абраць усе радкі',
+  checkboxSelectionUnselectAllRows: 'Скасаваць выбар усіх радкоў',
+  checkboxSelectionSelectRow: 'Абраць радок',
+  checkboxSelectionUnselectRow: 'Скасаваць выбар радка',
+  // Boolean cell text
+  booleanCellTrueLabel: 'праўда',
+  booleanCellFalseLabel: 'няпраўда',
+  // Actions cell more text
+  actionsCellMore: 'больш',
+  // Column pinning text
+  pinToLeft: 'Замацаваць злева',
+  pinToRight: 'Замацаваць справа',
+  unpin: 'Адмацаваць',
+  // Tree Data
+  treeDataGroupingHeaderName: 'Група',
+  treeDataExpand: 'паказаць даччыныя элементы',
+  treeDataCollapse: 'схаваць даччыныя элементы',
+  // Grouping columns
+  groupingColumnHeaderName: 'Група',
+  groupColumn: name => `Групаваць па ${name}`,
+  unGroupColumn: name => `Разгрупаваць па ${name}`,
+  // Master/detail
+  detailPanelToggle: 'Дэталі',
+  expandDetailPanel: 'Разгарнуць',
+  collapseDetailPanel: 'Згарнуць',
+  // Row reordering text
+  rowReorderingHeaderName: 'Змяненне чарговасці радкоў',
+  // Aggregation
+  aggregationMenuItemHeader: "Аб'яднанне дадзеных",
+  aggregationFunctionLabelSum: 'сума',
+  aggregationFunctionLabelAvg: 'сярэдняе',
+  aggregationFunctionLabelMin: 'мінімум',
+  aggregationFunctionLabelMax: 'максімум',
+  aggregationFunctionLabelSize: 'памер'
+};
+export const beBY = getGridLocalization(beBYGrid, beBYCore);

package/modern/locales/coreLocales.js

@@ -0,0 +1,65 @@
+// This file contains copies of the core locales for `MuiTablePagination` released
+// after the `@mui/material` package `v5.4.1` (peer dependency of `@mui/x-data-grid`).
+// This allows not to bump the minimal version of `@mui/material` in peerDependencies which results
+// in broader compatibility between the packages.
+// See https://github.com/mui/mui-x/pull/7646#issuecomment-1404605556 for additional context.
+export const beBYCore = {
+  components: {
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Перайсці на першую старонку';
+          }
+
+          if (type === 'last') {
+            return 'Перайсці на апошнюю старонку';
+          }
+
+          if (type === 'next') {
+            return 'Перайсці на наступную старонку';
+          } // if (type === 'previous') {
+
+
+          return 'Перайсці на папярэднюю старонку';
+        },
+        labelRowsPerPage: 'Радкоў на старонцы:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} з ${count !== -1 ? count : `больш чым ${to}`}`
+      }
+    }
+  }
+};
+export const urPKCore = {
+  components: {
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'پہلے صفحے پر جائیں';
+          }
+
+          if (type === 'last') {
+            return 'آخری صفحے پر جائیں';
+          }
+
+          if (type === 'next') {
+            return 'اگلے صفحے پر جائیں';
+          } // if (type === 'previous') {
+
+
+          return 'پچھلے صفحے پر جائیں';
+        },
+        labelRowsPerPage: 'ایک صفحے پر قطاریں:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${count !== -1 ? `${count} میں سے` : `${to} سے ذیادہ میں سے`} ${from} سے ${to} قطاریں`
+      }
+    }
+  }
+};

package/modern/locales/esES.js

@@ -99,25 +99,25 @@ const esESGrid = {
   pinToRight: 'Anclar a la derecha',
   unpin: 'Desanclar',
   // Tree Data
-  // treeDataGroupingHeaderName: 'Group',
-  // treeDataExpand: 'see children',
-  // treeDataCollapse: 'hide children',
+  treeDataGroupingHeaderName: 'Grupo',
+  treeDataExpand: 'mostrar hijos',
+  treeDataCollapse: 'ocultar hijos',
   // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
+  groupingColumnHeaderName: 'Grupo',
+  groupColumn: name => `Agrupar por ${name}`,
+  unGroupColumn: name => `No agrupar por ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Alternar detalle',
   expandDetailPanel: 'Expandir',
-  collapseDetailPanel: 'reducirse',
+  collapseDetailPanel: 'Contraer',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  rowReorderingHeaderName: 'Reordenar filas',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
+  aggregationMenuItemHeader: 'Agregación',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'avg',
   aggregationFunctionLabelMin: 'min',
-  aggregationFunctionLabelMax: 'max' // aggregationFunctionLabelSize: 'size',
-
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'tamaño'
 };
 export const esES = getGridLocalization(esESGrid, esESCore);

package/modern/locales/index.js

@@ -1,5 +1,6 @@
 // Keys are translated from enUS
 export * from './arSD';
+export * from './beBY';
 export * from './bgBG';
 export * from './csCZ';
 export * from './daDK';

package/modern/locales/jaJP.js

@@ -10,7 +10,7 @@ const jaJPGrid = {
   toolbarDensityLabel: '行間隔',
   toolbarDensityCompact: 'コンパクト',
   toolbarDensityStandard: '標準',
-  toolbarDensityComfortable: 'ひろめ',
+  toolbarDensityComfortable: '広め',
   // Columns selector toolbar button text
   toolbarColumns: '列一覧',
   toolbarColumnsLabel: '列選択',
@@ -39,8 +39,8 @@ const jaJPGrid = {
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelDeleteIconLabel: '削除',
-  // filterPanelLinkOperator: 'Logic operator',
-  filterPanelOperators: 'オペレータ',
+  filterPanelLinkOperator: '論理演算子',
+  filterPanelOperators: '演算子',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'And',
   filterPanelOperatorOr: 'Or',
@@ -62,9 +62,9 @@ const jaJPGrid = {
   filterOperatorIsNotEmpty: '...空でない',
   filterOperatorIsAnyOf: '...のいずれか',
   // Filter values text
-  // filterValueAny: 'any',
-  // filterValueTrue: 'true',
-  // filterValueFalse: 'false',
+  filterValueAny: 'いずれか',
+  filterValueTrue: '真',
+  filterValueFalse: '偽',
   // Column menu text
   columnMenuLabel: 'メニュー',
   columnMenuShowColumns: '列表示',
@@ -93,7 +93,7 @@ const jaJPGrid = {
   booleanCellTrueLabel: '真',
   booleanCellFalseLabel: '偽',
   // Actions cell more text
-  // actionsCellMore: 'more',
+  actionsCellMore: 'もっと見る',
   // Column pinning text
   pinToLeft: '左側に固定',
   pinToRight: '右側に固定',
@@ -107,17 +107,17 @@ const jaJPGrid = {
   groupColumn: name => `${name}でグループ化`,
   unGroupColumn: name => `${name}のグループを解除`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: '詳細パネルの切り替え',
   expandDetailPanel: '展開',
   collapseDetailPanel: '折りたたみ',
   // Row reordering text
-  rowReorderingHeaderName: '行並び替え' // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  rowReorderingHeaderName: '行並び替え',
+  // Aggregation
+  aggregationMenuItemHeader: '合計',
+  aggregationFunctionLabelSum: '和',
+  aggregationFunctionLabelAvg: '平均',
+  aggregationFunctionLabelMin: '最小値',
+  aggregationFunctionLabelMax: '最大値',
+  aggregationFunctionLabelSize: 'サイズ'
 };
 export const jaJP = getGridLocalization(jaJPGrid, jaJPCore);

package/modern/locales/skSK.js

@@ -146,13 +146,13 @@ const skSKGrid = {
   expandDetailPanel: 'Rozbaliť',
   collapseDetailPanel: 'Zbaliť',
   // Row reordering text
-  rowReorderingHeaderName: 'Preusporiadávanie riadkov' // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  rowReorderingHeaderName: 'Preusporiadávanie riadkov',
+  // Aggregation
+  aggregationMenuItemHeader: 'Agregácia',
+  aggregationFunctionLabelSum: 'suma',
+  aggregationFunctionLabelAvg: 'priemer',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'počet'
 };
 export const skSK = getGridLocalization(skSKGrid, skSKCore);

package/modern/locales/viVN.js

@@ -21,15 +21,15 @@ const viVNGrid = {
   toolbarFiltersTooltipShow: 'Hiện',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} bộ lọc hoạt động` : `${count} bộ lọc hoạt động`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Tìm kiếm…',
+  toolbarQuickFilterLabel: 'Tìm kiếm',
+  toolbarQuickFilterDeleteIconLabel: 'Xóa tìm kiếm',
   // Export selector toolbar button text
   toolbarExport: 'Xuất',
   toolbarExportLabel: 'Xuất',
   toolbarExportCSV: 'Xuất CSV',
   toolbarExportPrint: 'In',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Xuất Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Tìm kiếm',
   columnsPanelTextFieldPlaceholder: 'Tiêu đề cột',
@@ -39,7 +39,7 @@ const viVNGrid = {
   // Filter panel text
   filterPanelAddFilter: 'Thêm bộ lọc',
   filterPanelDeleteIconLabel: 'Xóa',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'Toán tử logic',
   filterPanelOperators: 'Toán tử',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Và',
@@ -85,10 +85,10 @@ const viVNGrid = {
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} / ${totalCount.toLocaleString()}`,
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Tích vào ô trống',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: 'Chọn tất cả hàng',
+  checkboxSelectionUnselectAllRows: 'Bỏ chọn tất cả hàng',
+  checkboxSelectionSelectRow: 'Chọn hàng',
+  checkboxSelectionUnselectRow: 'Bỏ chọn hàng',
   // Boolean cell text
   booleanCellTrueLabel: 'Có',
   booleanCellFalseLabel: 'Không',
@@ -101,17 +101,17 @@ const viVNGrid = {
   // Tree Data
   treeDataGroupingHeaderName: 'Nhóm',
   treeDataExpand: 'mở rộng',
-  treeDataCollapse: 'ẩn đi' // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
+  treeDataCollapse: 'ẩn đi',
+  // Grouping columns
+  groupingColumnHeaderName: 'Nhóm',
+  groupColumn: name => `Nhóm theo ${name}`,
+  unGroupColumn: name => `Hủy nhóm theo ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  detailPanelToggle: 'Ẩn/hiện chi tiết',
+  expandDetailPanel: 'Mở rộng',
+  collapseDetailPanel: 'Thu nhỏ',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-  // Aggregation
+  rowReorderingHeaderName: 'Sắp xếp hàng' // Aggregation
   // aggregationMenuItemHeader: 'Aggregation',
   // aggregationFunctionLabelSum: 'sum',
   // aggregationFunctionLabelAvg: 'avg',

package/node/components/cell/GridCell.js

@@ -203,9 +203,11 @@ function GridCell(props) {
 
   const renderChildren = () => {
     if (children == null) {
+      const valueString = valueToRender == null ? void 0 : valueToRender.toString();
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        title: valueString,
         className: classes.content,
-        children: valueToRender == null ? void 0 : valueToRender.toString()
+        children: valueString
       });
     }
 

package/node/components/panel/GridColumnsPanel.js

@@ -137,11 +137,19 @@ function GridColumnsPanel(props) {
 
   const toggleAllColumns = React.useCallback(isVisible => {
     if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      if (isVisible) {
-        return apiRef.current.setColumnVisibilityModel({});
-      }
-
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
+      const currentModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+      const newModel = (0, _extends2.default)({}, currentModel);
+      columns.forEach(col => {
+        if (col.hideable) {
+          if (isVisible) {
+            // delete the key from the model instead of setting it to `true`
+            delete newModel[col.field];
+          } else {
+            newModel[col.field] = false;
+          }
+        }
+      });
+      return apiRef.current.setColumnVisibilityModel(newModel);
     } // TODO v6: Remove
 
 

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

@@ -253,10 +253,14 @@ const useGridPrintExport = (apiRef, props) => {
     } else {
       printWindow.onload = () => {
         handlePrintWindowLoad(printWindow, options);
+        const mediaQueryList = printWindow.contentWindow.matchMedia('print');
+        mediaQueryList.addEventListener('change', mql => {
+          const isAfterPrint = mql.matches === false;
 
-        printWindow.contentWindow.onafterprint = () => {
-          handlePrintWindowAfterPrint(printWindow);
-        };
+          if (isAfterPrint) {
+            handlePrintWindowAfterPrint(printWindow);
+          }
+        });
       };
 
       doc.current.body.appendChild(printWindow);

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI X v5.17.20
+/** @license MUI X v5.17.21
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/lib/createDetectElementResize/index.js

@@ -93,11 +93,11 @@ function createDetectElementResize(nonce, hostWindow) {
   var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
   var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
 
-  var createStyles = function createStyles(doc) {
-    if (!doc.getElementById('muiDetectElementResize')) {
+  var createStyles = function createStyles(doc, root) {
+    if (!root.getElementById('muiDetectElementResize')) {
       //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
       var css = (animationKeyframes ? animationKeyframes : '') + '.Mui-resizeTriggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.Mui-resizeTriggers, .Mui-resizeTriggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .Mui-resizeTriggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-          head = doc.head || doc.getElementsByTagName('head')[0],
+          container = root.constructor.name === 'ShadowRoot' ? root : doc.head || doc.getElementsByTagName('head')[0],
           style = doc.createElement('style');
       style.id = 'muiDetectElementResize';
       style.type = 'text/css';
@@ -112,7 +112,7 @@ function createDetectElementResize(nonce, hostWindow) {
         style.appendChild(doc.createTextNode(css));
       }
 
-      head.appendChild(style);
+      container.appendChild(style);
     }
   };
 
@@ -125,7 +125,7 @@ function createDetectElementResize(nonce, hostWindow) {
         element.style.position = 'relative';
       }
 
-      createStyles(doc);
+      createStyles(doc, element.getRootNode());
       element.__resizeLast__ = {};
       element.__resizeListeners__ = [];
       (element.__resizeTriggers__ = doc.createElement('div')).className = 'Mui-resizeTriggers';