@mui/x-data-grid 5.4.0 → 5.6.0

package/node/components/panel/filterPanel/GridFilterPanel.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterPanel = GridFilterPanel;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _gridFilterItem = require("../../../models/gridFilterItem");
+
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+
+var _icons = require("../../icons");
+
+var _GridPanelContent = require("../GridPanelContent");
+
+var _GridPanelFooter = require("../GridPanelFooter");
+
+var _GridPanelWrapper = require("../GridPanelWrapper");
+
+var _GridFilterForm = require("./GridFilterForm");
+
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+
+var _useGridSelector = require("../../../hooks/utils/useGridSelector");
+
+var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
+
+var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps"];
+
+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 GridFilterPanel(props) {
+  var _rootProps$components;
+
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
+  const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
+  const lastFilterRef = React.useRef(null);
+  const {
+    linkOperators = [_gridFilterItem.GridLinkOperator.And, _gridFilterItem.GridLinkOperator.Or],
+    columnsSort,
+    filterFormProps
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const applyFilter = React.useCallback(item => {
+    apiRef.current.upsertFilterItem(item);
+  }, [apiRef]);
+  const applyFilterLinkOperator = React.useCallback(operator => {
+    apiRef.current.setFilterLinkOperator(operator);
+  }, [apiRef]);
+  const getDefaultItem = React.useCallback(() => {
+    const firstColumnWithOperator = filterableColumns.find(colDef => {
+      var _colDef$filterOperato;
+
+      return (_colDef$filterOperato = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato.length;
+    });
+
+    if (!firstColumnWithOperator) {
+      return null;
+    }
+
+    return {
+      columnField: firstColumnWithOperator.field,
+      operatorValue: firstColumnWithOperator.filterOperators[0].value,
+      id: Math.round(Math.random() * 1e5)
+    };
+  }, [filterableColumns]);
+  const items = React.useMemo(() => {
+    if (filterModel.items.length) {
+      return filterModel.items;
+    }
+
+    const defaultItem = getDefaultItem();
+    return defaultItem ? [defaultItem] : [];
+  }, [filterModel.items, getDefaultItem]);
+  const hasMultipleFilters = items.length > 1;
+
+  const addNewFilter = () => {
+    const defaultItem = getDefaultItem();
+
+    if (!defaultItem) {
+      return;
+    }
+
+    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      items: [...items, defaultItem]
+    }));
+  };
+
+  const deleteFilter = React.useCallback(item => {
+    const shouldCloseFilterPanel = items.length === 1;
+    apiRef.current.deleteFilterItem(item);
+
+    if (shouldCloseFilterPanel) {
+      apiRef.current.hideFilterPanel();
+    }
+  }, [apiRef, items.length]);
+  React.useEffect(() => {
+    if (linkOperators.length > 0 && filterModel.linkOperator && !linkOperators.includes(filterModel.linkOperator)) {
+      applyFilterLinkOperator(linkOperators[0]);
+    }
+  }, [linkOperators, applyFilterLinkOperator, filterModel.linkOperator]);
+  React.useEffect(() => {
+    if (items.length > 0) {
+      lastFilterRef.current.focus();
+    }
+  }, [items.length]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
+      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
+        item: item,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: index > 0,
+        multiFilterOperator: filterModel.linkOperator,
+        disableMultiFilterOperator: index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLinkOperator,
+        focusElementRef: index === items.length - 1 ? lastFilterRef : null,
+        linkOperators: linkOperators,
+        columnsSort: columnsSort
+      }, filterFormProps), item.id == null ? index : item.id))
+    }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelFooter.GridPanelFooter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
+        onClick: addNewFilter,
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {}),
+        color: "primary"
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
+        children: apiRef.current.getLocaleText('filterPanelAddFilter')
+      }))
+    })]
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+  filterFormProps: _propTypes.default.shape({
+    columnInputProps: _propTypes.default.any,
+    columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+    deleteIconProps: _propTypes.default.any,
+    linkOperatorInputProps: _propTypes.default.any,
+    operatorInputProps: _propTypes.default.any,
+    valueInputProps: _propTypes.default.any
+  }),
+  linkOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/panel/filterPanel/filterPanelUtils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValueFromOption = getValueFromOption;
+exports.getValueFromValueOptions = getValueFromValueOptions;
+
+function getValueFromOption(option) {
+  if (typeof option === 'object' && option !== null) {
+    return option.value;
+  }
+
+  return option;
+}
+
+function getValueFromValueOptions(value, valueOptions) {
+  if (valueOptions === undefined) {
+    return undefined;
+  }
+
+  const result = valueOptions.find(option => {
+    const optionValue = getValueFromOption(option);
+    return String(optionValue) === String(value);
+  });
+  return getValueFromOption(result);
+}

package/node/components/panel/filterPanel/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _GridFilterForm = require("./GridFilterForm");
+
+Object.keys(_GridFilterForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterForm[key];
+    }
+  });
+});
+
+var _GridFilterInputValue = require("./GridFilterInputValue");
+
+Object.keys(_GridFilterInputValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputValue[key];
+    }
+  });
+});
+
+var _GridFilterInputDate = require("./GridFilterInputDate");
+
+Object.keys(_GridFilterInputDate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterInputDate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputDate[key];
+    }
+  });
+});
+
+var _GridFilterInputSingleSelect = require("./GridFilterInputSingleSelect");
+
+Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterInputSingleSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputSingleSelect[key];
+    }
+  });
+});
+
+var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
+
+Object.keys(_GridFilterInputValueProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputValueProps[key];
+    }
+  });
+});
+
+var _GridFilterPanel = require("./GridFilterPanel");
+
+Object.keys(_GridFilterPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterPanel[key];
+    }
+  });
+});
+
+var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
+
+Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterInputMultipleValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputMultipleValue[key];
+    }
+  });
+});
+
+var _GridFilterInputMultipleSingleSelect = require("./GridFilterInputMultipleSingleSelect");
+
+Object.keys(_GridFilterInputMultipleSingleSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridFilterInputMultipleSingleSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridFilterInputMultipleSingleSelect[key];
+    }
+  });
+});

package/node/components/panel/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _GridColumnsPanel = require("./GridColumnsPanel");
+
+Object.keys(_GridColumnsPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnsPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnsPanel[key];
+    }
+  });
+});
+
+var _GridPanel = require("./GridPanel");
+
+Object.keys(_GridPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanel[key];
+    }
+  });
+});
+
+var _GridPanelContent = require("./GridPanelContent");
+
+Object.keys(_GridPanelContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelContent[key];
+    }
+  });
+});
+
+var _GridPanelFooter = require("./GridPanelFooter");
+
+Object.keys(_GridPanelFooter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelFooter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelFooter[key];
+    }
+  });
+});
+
+var _GridPanelHeader = require("./GridPanelHeader");
+
+Object.keys(_GridPanelHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelHeader[key];
+    }
+  });
+});
+
+var _GridPanelWrapper = require("./GridPanelWrapper");
+
+Object.keys(_GridPanelWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPanelWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPanelWrapper[key];
+    }
+  });
+});
+
+var _GridPreferencesPanel = require("./GridPreferencesPanel");
+
+Object.keys(_GridPreferencesPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPreferencesPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPreferencesPanel[key];
+    }
+  });
+});
+
+var _filterPanel = require("./filterPanel");
+
+Object.keys(_filterPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _filterPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _filterPanel[key];
+    }
+  });
+});

package/node/components/toolbar/GridToolbar.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _GridToolbarContainer = require("../containers/GridToolbarContainer");
+
+var _GridToolbarColumnsButton = require("./GridToolbarColumnsButton");
+
+var _GridToolbarDensitySelector = require("./GridToolbarDensitySelector");
+
+var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
+
+var _GridToolbarExport = require("./GridToolbarExport");
+
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["className", "csvOptions", "printOptions"];
+
+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 GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+  const {
+    csvOptions,
+    printOptions
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+
+  if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({
+    ref: ref
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
+      csvOptions: csvOptions,
+      printOptions: printOptions
+    })]
+  }));
+});
+exports.GridToolbar = GridToolbar;
+process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  csvOptions: _propTypes.default.object,
+  printOptions: _propTypes.default.object
+} : void 0;

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarColumnsButton = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+
+var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
+
+var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
+
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["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; }
+
+const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+  var _rootProps$components;
+
+  const {
+    onClick
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    open,
+    openedPanelValue
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+
+  const showColumns = event => {
+    if (open && openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.columns);
+    }
+
+    onClick == null ? void 0 : onClick(event);
+  }; // Disable the button if the corresponding is disabled
+
+
+  if (rootProps.disableColumnSelector) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
+    ref: ref,
+    size: "small",
+    color: "primary",
+    "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnSelectorIcon, {})
+  }, other, {
+    onClick: showColumns
+  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
+    children: apiRef.current.getLocaleText('toolbarColumns')
+  }));
+});
+exports.GridToolbarColumnsButton = GridToolbarColumnsButton;