@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.14

package/components/GridScrollArea.js

@@ -10,7 +10,8 @@ exports.GridScrollArea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -34,7 +35,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['scrollArea', `scrollArea--${scrollDirection}`]
   };
-  return (0, _utils.unstable_composeClasses)(slots, _constants.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
 const GridScrollAreaRawRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
@@ -120,7 +121,7 @@ function GridScrollAreaContent(props) {
   const handleScrolling = () => {
     setCanScrollMore(getCanScrollMore);
   };
-  const handleDragOver = (0, _utils.unstable_useEventCallback)(event => {
+  const handleDragOver = (0, _useEventCallback.default)(event => {
     let offset;
 
     // Prevents showing the forbidden cursor

package/components/GridSelectedRowCount.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../constants/cssVariables");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -32,21 +33,19 @@ const GridSelectedRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'SelectedRowCount',
   overridesResolver: (props, styles) => styles.selectedRowCount
-})(({
-  theme
-}) => ({
+})({
   alignItems: 'center',
   display: 'flex',
-  margin: theme.spacing(0, 2),
+  margin: _cssVariables.vars.spacing(0, 2),
   visibility: 'hidden',
   width: 0,
   height: 0,
-  [theme.breakpoints.up('sm')]: {
+  [_cssVariables.vars.breakpoints.up('sm')]: {
     visibility: 'visible',
     width: 'auto',
     height: 'auto'
   }
-}));
+});
 const GridSelectedRowCount = exports.GridSelectedRowCount = (0, _forwardRef.forwardRef)(function GridSelectedRowCount(props, ref) {
   const {
       className,

package/components/GridShadowScrollArea.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface GridShadowScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+/**
+ * Adds scroll shadows above and below content in a scrollable container.
+ */
+export declare function GridShadowScrollArea(props: GridShadowScrollAreaProps): React.JSX.Element;

package/components/GridShadowScrollArea.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridShadowScrollArea = GridShadowScrollArea;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
+const reveal = (0, _system.keyframes)({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+const detectScroll = (0, _system.keyframes)({
+  'from, to': {
+    '--scrollable': '" "'
+  }
+});
+const ShadowScrollArea = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ShadowScrollArea'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  animation: detectScroll,
+  animationTimeline: '--scroll-timeline',
+  animationFillMode: 'none',
+  boxSizing: 'border-box',
+  overflow: 'auto',
+  scrollTimeline: '--scroll-timeline block',
+  '&::before, &::after': {
+    content: '""',
+    flexShrink: 0,
+    display: 'block',
+    position: 'sticky',
+    left: 0,
+    width: '100%',
+    height: '4px',
+    animation: `${reveal} linear both`,
+    animationTimeline: '--scroll-timeline',
+    // Custom property toggle trick:
+    // - Detects if the element is scrollable
+    // - https://css-tricks.com/the-css-custom-property-toggle-trick/
+    '--visibility-scrollable': 'var(--scrollable) visible',
+    '--visibility-not-scrollable': 'hidden',
+    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
+  },
+  '&::before': {
+    top: 0,
+    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
+    animationRange: '0 4px'
+  },
+  '&::after': {
+    bottom: 0,
+    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
+    animationDirection: 'reverse',
+    animationRange: 'calc(100% - 4px) 100%'
+  }
+});
+
+/**
+ * Adds scroll shadows above and below content in a scrollable container.
+ */
+function GridShadowScrollArea(props) {
+  const {
+      children
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowScrollArea, (0, _extends2.default)({}, rest, {
+    children: children
+  }));
+}

package/components/cell/GridEditInputCell.js

@@ -14,6 +14,7 @@ var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _assert = require("../../utils/assert");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -31,9 +32,7 @@ const useUtilityClasses = ownerState => {
 const GridEditInputCellRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'EditInputCell'
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
+})((0, _extends2.default)({}, _cssVariables.vars.typography.body, {
   padding: '1px 0',
   '& input': {
     padding: '0 16px',

package/components/columnSelection/GridHeaderCheckbox.js

@@ -21,6 +21,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
 var _gridPaginationSelector = require("../../hooks/features/pagination/gridPaginationSelector");
+var _gridRowSelectionManager = require("../../models/gridRowSelectionManager");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "colDef"];
 const useUtilityClasses = ownerState => {
@@ -46,39 +47,72 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
   const visibleRowIds = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowIdsSelector);
   const paginatedVisibleRowIds = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginatedVisibleSortedGridRowIdsSelector);
   const filteredSelection = React.useMemo(() => {
-    if (typeof rootProps.isRowSelectable !== 'function') {
+    const isRowSelectable = rootProps.isRowSelectable;
+    if (typeof isRowSelectable !== 'function') {
       return selection;
     }
-    return selection.filter(id => {
+    if (selection.type === 'exclude') {
+      return selection;
+    }
+
+    // selection.type === 'include'
+    const selectionModel = {
+      type: 'include',
+      ids: new Set()
+    };
+    for (const id of selection.ids) {
       if (rootProps.keepNonExistentRowsSelected) {
-        return true;
+        selectionModel.ids.add(id);
       }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
-        return false;
+        continue;
+      }
+      if (isRowSelectable(apiRef.current.getRowParams(id))) {
+        selectionModel.ids.add(id);
       }
-      return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
-    });
-  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
+    }
+    return selectionModel;
+  }, [apiRef, rootProps.isRowSelectable, rootProps.keepNonExistentRowsSelected, selection]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
     const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
 
-    // Convert to an object to make O(1) checking if a row exists or not
-    // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
-    return rowIds.reduce((acc, id) => {
-      if (!apiRef.current.isRowSelectable(id)) {
-        return acc;
+    // Convert to a Set to make O(1) checking if a row exists or not
+    const candidates = new Set();
+    for (let i = 0; i < rowIds.length; i += 1) {
+      const id = rowIds[i];
+      if (apiRef.current.isRowSelectable(id)) {
+        candidates.add(id);
       }
-      acc[id] = true;
-      return acc;
-    }, {});
+    }
+    return candidates;
   }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
-  const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);
-  const isIndeterminate = currentSelectionSize > 0 && currentSelectionSize < Object.keys(selectionCandidates).length;
+  const currentSelectionSize = React.useMemo(() => {
+    const selectionManager = (0, _gridRowSelectionManager.createRowSelectionManager)(filteredSelection);
+    let size = 0;
+    for (const id of selectionCandidates) {
+      if (selectionManager.has(id)) {
+        size += 1;
+      }
+    }
+    return size;
+  }, [filteredSelection, selectionCandidates]);
+  const isIndeterminate = React.useMemo(() => {
+    if (filteredSelection.ids.size === 0) {
+      return false;
+    }
+    const selectionManager = (0, _gridRowSelectionManager.createRowSelectionManager)(filteredSelection);
+    for (const rowId of selectionCandidates) {
+      if (!selectionManager.has(rowId)) {
+        return true;
+      }
+    }
+    return false;
+  }, [filteredSelection, selectionCandidates]);
   const isChecked = currentSelectionSize > 0;
   const handleChange = event => {
     const params = {

package/components/columnsManagement/GridColumnsManagement.js

@@ -12,14 +12,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _InputBase = require("@mui/material/InputBase");
+var _cssVariables = require("../../constants/cssVariables");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
-var _useLazyRef = require("../../hooks/utils/useLazyRef");
 var _utils = require("./utils");
 var _assert = require("../../utils/assert");
+var _GridShadowScrollArea = require("../GridShadowScrollArea");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
@@ -41,7 +42,7 @@ function GridColumnsManagement(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const searchInputRef = React.useRef(null);
   const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
-  const initialColumnVisibilityModel = (0, _useLazyRef.useLazyRef)(() => (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef)).current;
+  const initialColumnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [searchValue, setSearchValue] = React.useState('');
@@ -141,20 +142,20 @@ function GridColumnsManagement(props) {
         type: "search",
         slotProps: {
           input: {
-            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-              position: "start",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
+            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+              fontSize: "small"
             }),
             endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               size: "small",
+              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
               style: searchValue ? {
                 visibility: 'visible'
               } : {
                 visibility: 'hidden'
               },
               tabIndex: -1,
-              onClick: handleSearchReset
+              onClick: handleSearchReset,
+              edge: "end"
             }, rootProps.slotProps?.baseIconButton, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
                 fontSize: "small"
@@ -168,25 +169,27 @@ function GridColumnsManagement(props) {
         autoComplete: "off",
         fullWidth: true
       }, rootProps.slotProps?.baseTextField, searchInputProps))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
-      className: classes.root,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementScrollArea, {
       ownerState: rootProps,
-      children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-        className: classes.row,
-        disabled: column.hideable === false,
-        checked: columnVisibilityModel[column.field] !== false,
-        onClick: toggleColumn,
-        name: column.field,
-        inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
-        label: column.headerName || column.field,
-        size: "medium",
-        density: "compact",
-        fullWidth: true
-      }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementEmptyText, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
+        className: classes.root,
         ownerState: rootProps,
-        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
-      })]
-    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
+        children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+          className: classes.row,
+          disabled: column.hideable === false,
+          checked: columnVisibilityModel[column.field] !== false,
+          onClick: toggleColumn,
+          name: column.field,
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
+          label: column.headerName || column.field,
+          density: "compact",
+          fullWidth: true
+        }, rootProps.slotProps?.baseCheckbox), column.field)), currentColumns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementEmptyText, {
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+        })]
+      })
+    }), !disableShowHideToggle || !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
@@ -195,7 +198,8 @@ function GridColumnsManagement(props) {
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
         name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
-        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+        density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
         disabled: isResetDisabled
@@ -251,6 +255,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
     onChange: _propTypes.default.func,
     onKeyDown: _propTypes.default.func,
     placeholder: _propTypes.default.string,
+    role: _propTypes.default.string,
     size: _propTypes.default.oneOf(['medium', 'small']),
     slotProps: _propTypes.default.object,
     style: _propTypes.default.object,
@@ -271,56 +276,50 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
 const GridColumnsManagementBody = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagement'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0, 2, 1.5),
+})({
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'auto',
-  flex: '1 1',
-  maxHeight: 400,
-  alignItems: 'flex-start'
-}));
+  padding: _cssVariables.vars.spacing(0.5, 1.5)
+});
+const GridColumnsManagementScrollArea = (0, _styles.styled)(_GridShadowScrollArea.GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementScrollArea'
+})({
+  maxHeight: 400
+});
 const GridColumnsManagementHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementHeader'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(1.5, 3)
-}));
+})({
+  padding: _cssVariables.vars.spacing(1.5, 2),
+  borderBottom: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
 const SearchInput = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput'
-})(({
-  theme
-}) => ({
-  [`& .${_InputBase.inputBaseClasses.root}`]: {
-    padding: theme.spacing(0, 1.5, 0, 1.5)
-  },
+})({
   [`& .${_InputBase.inputBaseClasses.input}::-webkit-search-decoration,
-  & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
-  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
-  & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+      & .${_InputBase.inputBaseClasses.input}::-webkit-search-cancel-button,
+      & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-button,
+      & .${_InputBase.inputBaseClasses.input}::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const GridColumnsManagementFooter = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 1, 0.5, 3),
+})({
+  padding: _cssVariables.vars.spacing(1, 1, 1, 1.5),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${theme.palette.divider}`
-}));
-const GridColumnsManagementEmptyText = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 0),
-  color: theme.palette.grey[500]
-}));
+  borderTop: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
+const GridColumnsManagementEmptyText = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementEmptyText'
+})({
+  padding: _cssVariables.vars.spacing(1, 0),
+  alignSelf: 'center',
+  fontSize: _cssVariables.vars.typography.body.fontSize
+});

package/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { GridSlotProps } from '../../models';
+export interface ColumnsPanelState {
+  /**
+   * If `true`, the columns panel is open.
+   */
+  open: boolean;
+}
+export type ColumnsPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], ColumnsPanelState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: ColumnsPanelState) => string);
+};
+/**
+ * A button that opens and closes the columns panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Columns Panel](https://mui.com/x/react-data-grid/components/columns-panel/)
+ *
+ * API:
+ *
+ * - [ColumnsPanelTrigger API](https://mui.com/x/api/data-grid/columns-panel-trigger/)
+ */
+declare const ColumnsPanelTrigger: React.ForwardRefExoticComponent<ColumnsPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<ColumnsPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ColumnsPanelTrigger };