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

package/components/toolbarV8/ToolbarButton.js

@@ -0,0 +1,179 @@
+"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.ToolbarButton = 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 _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _ToolbarContext = require("./ToolbarContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render"];
+/**
+ * A button for performing actions from the toolbar.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+ *
+ * API:
+ *
+ * - [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
+ */
+const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(function ToolbarButton(props, ref) {
+  const {
+      render
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const id = (0, _useId.default)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const buttonRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(buttonRef, ref);
+  const {
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown
+  } = (0, _ToolbarContext.useToolbarContext)();
+  React.useEffect(() => {
+    registerItem(id);
+    return () => unregisterItem(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const isInitialFocus = React.useRef(true);
+  React.useEffect(() => {
+    // Do not focus the item on initial render
+    if (focusableItemId && isInitialFocus.current) {
+      isInitialFocus.current = false;
+      return;
+    }
+    if (focusableItemId === id) {
+      buttonRef.current?.focus();
+    }
+  }, [focusableItemId, id]);
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+    tabIndex: focusableItemId === id ? 0 : -1,
+    onKeyDown: onItemKeyDown
+  }, other, {
+    ref: handleRef
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focusVisible: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: _propTypes.default.oneOf(['default', 'inherit', 'primary']),
+  component: _propTypes.default.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: _propTypes.default.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: _propTypes.default.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: _propTypes.default.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   */
+  edge: _propTypes.default.oneOf(['end', 'start', false]),
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: _propTypes.default.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: _propTypes.default.string,
+  label: _propTypes.default.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: _propTypes.default.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: _propTypes.default.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  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]),
+  tabIndex: _propTypes.default.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: _propTypes.default.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/components/toolbarV8/ToolbarContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface ToolbarContextValue {
+  focusableItemId: string | null;
+  registerItem: (itemId: string) => void;
+  unregisterItem: (itemId: string) => void;
+  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
+export declare function useToolbarContext(): ToolbarContextValue;

package/components/toolbarV8/ToolbarContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarContext = void 0;
+exports.useToolbarContext = useToolbarContext;
+var React = _interopRequireWildcard(require("react"));
+const ToolbarContext = exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+function useToolbarContext() {
+  const context = React.useContext(ToolbarContext);
+  if (context === undefined) {
+    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
+  }
+  return context;
+}

package/components/toolbarV8/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/components/toolbarV8/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Toolbar = require("./Toolbar");
+Object.keys(_Toolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toolbar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Toolbar[key];
+    }
+  });
+});
+var _ToolbarButton = require("./ToolbarButton");
+Object.keys(_ToolbarButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToolbarButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToolbarButton[key];
+    }
+  });
+});

package/components/virtualization/GridVirtualScrollbar.js

@@ -140,7 +140,13 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       top: 0
     } : undefined,
     tabIndex: -1,
-    "aria-hidden": "true",
+    "aria-hidden": "true"
+    // tabIndex does not prevent focus with a mouse click, throwing a console error
+    // https://github.com/mui/mui-x/issues/16706
+    ,
+    onFocus: event => {
+      event.target.blur();
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: contentRef,
       className: classes.content

package/constants/defaultGridSlotsComponents.js

@@ -15,6 +15,7 @@ var _GridPinnedRows = require("../components/GridPinnedRows");
 var _GridNoResultsOverlay = require("../components/GridNoResultsOverlay");
 var _material = _interopRequireDefault(require("../material"));
 var _GridBottomContainer = require("../components/virtualization/GridBottomContainer");
+var _GridToolbar = require("../components/toolbarV8/GridToolbar");
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.
 const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _material.default, {
@@ -28,7 +29,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_DEFAULT_SLOTS_COMPO
   bottomContainer: _GridBottomContainer.GridBottomContainer,
   footer: _components.GridFooter,
   footerRowCount: _components.GridRowCount,
-  toolbar: _components.GridToolbar,
+  toolbar: _GridToolbar.GridToolbar,
   pinnedRows: _GridPinnedRows.GridPinnedRows,
   loadingOverlay: _components.GridLoadingOverlay,
   noResultsOverlay: _GridNoResultsOverlay.GridNoResultsOverlay,

package/constants/gridClasses.d.ts

@@ -594,6 +594,10 @@ export interface GridClasses {
    * Styles applied to the sort icon element.
    */
   sortIcon: string;
+  /**
+   * Styles applied to the toolbar root element.
+   */
+  toolbar: string;
   /**
    * Styles applied to the shadow scroll area element.
    * @ignore - do not document.

package/esm/colDef/gridActionsColDef.js

@@ -15,5 +15,5 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableColumnMenu: true,
   disableExport: true,
   renderCell: renderActionsCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: () => null
 });

package/esm/colDef/gridBooleanColDef.js

@@ -33,7 +33,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
-  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFn: () => null,
   // @ts-ignore
   aggregable: false,
   // @ts-ignore

package/esm/colDef/gridCheckboxSelectionColDef.js

@@ -18,7 +18,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
-  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFn: () => null,
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const rowId = gridRowIdSelector(apiRef, row);

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -246,6 +246,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
     onChange: PropTypes.func,
     onKeyDown: PropTypes.func,
     placeholder: PropTypes.string,
+    role: PropTypes.string,
     size: PropTypes.oneOf(['medium', 'small']),
     slotProps: PropTypes.object,
     style: PropTypes.object,

package/esm/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 };

package/esm/components/columnsPanel/ColumnsPanelTrigger.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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/)
+ */
+const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick,
+      onPointerUp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const buttonId = useId();
+  const panelId = useId();
+  const apiRef = useGridApiContext();
+  const panelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const open = panelState.open && panelState.openedPanelValue === GridPreferencePanelsValue.columns;
+  const state = {
+    open
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    if (open) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(GridPreferencePanelsValue.columns, panelId, buttonId);
+    }
+    onClick?.(event);
+  };
+  const handlePointerUp = event => {
+    if (open) {
+      event.stopPropagation();
+    }
+    onPointerUp?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    onClick: handleClick,
+    onPointerUp: handlePointerUp,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? ColumnsPanelTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.any,
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+} : void 0;
+export { ColumnsPanelTrigger };

package/esm/components/columnsPanel/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnsPanelTrigger.js";

package/esm/components/columnsPanel/index.js

@@ -0,0 +1 @@
+export * from "./ColumnsPanelTrigger.js";

package/esm/components/export/ExportCsv.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { GridCsvExportOptions } from "../../models/gridExport.js";
+import type { GridSlotProps } from '../../models';
+export type ExportCsvProps = GridSlotProps['baseButton'] & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton']>;
+  /**
+   * The options to apply on the CSV export.
+   * @demos
+   *   - [CSV export](/x/react-data-grid/export/#csv-export)
+   */
+  options?: GridCsvExportOptions;
+};
+/**
+ * A button that triggers a CSV export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ *
+ * API:
+ *
+ * - [ExportCsv API](https://mui.com/x/api/data-grid/export-csv/)
+ */
+declare const ExportCsv: React.ForwardRefExoticComponent<ExportCsvProps> | React.ForwardRefExoticComponent<Omit<ExportCsvProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ExportCsv };