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

package/components/columnsPanel/ColumnsPanelTrigger.js

@@ -0,0 +1,209 @@
+"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.ColumnsPanelTrigger = 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _hooks = require("../../hooks");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+/**
+ * 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 = exports.ColumnsPanelTrigger = (0, _forwardRef.forwardRef)(function ColumnsPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick,
+      onPointerUp
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const buttonId = (0, _useId.default)();
+  const panelId = (0, _useId.default)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const panelState = (0, _hooks.useGridSelector)(apiRef, _hooks.gridPreferencePanelStateSelector);
+  const open = panelState.open && panelState.openedPanelValue === _hooks.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(_hooks.GridPreferencePanelsValue.columns, panelId, buttonId);
+    }
+    onClick?.(event);
+  };
+  const handlePointerUp = event => {
+    if (open) {
+      event.stopPropagation();
+    }
+    onPointerUp?.(event);
+  };
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.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.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,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _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).
+   * @default 'primary'
+   */
+  color: _propTypes.default.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  component: _propTypes.default.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: _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,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: _propTypes.default.node,
+  /**
+   * 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,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: _propTypes.default.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.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']),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: _propTypes.default.node,
+  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,
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: _propTypes.default.oneOf(['contained', 'outlined', 'text'])
+} : void 0;

package/components/columnsPanel/index.d.ts

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

package/components/columnsPanel/index.js

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

package/components/containers/GridOverlay.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 _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,21 +30,18 @@ const useUtilityClasses = ownerState => {
 };
 const GridOverlayRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'Overlay',
-  overridesResolver: (_, styles) => styles.overlay
-})(({
-  theme
-}) => ({
+  slot: 'Overlay'
+})({
   width: '100%',
   height: '100%',
   display: 'flex',
-  gap: theme.spacing(1),
+  gap: _cssVariables.vars.spacing(1),
   flexDirection: 'column',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
-}));
+  backgroundColor: _cssVariables.vars.colors.background.backdrop
+});
 const GridOverlay = exports.GridOverlay = (0, _forwardRef.forwardRef)(function GridOverlay(props, ref) {
   const {
       className

package/components/containers/GridRoot.js

@@ -15,6 +15,7 @@ var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
+var _context = require("../../utils/css/context");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -55,18 +56,19 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
+  const cssVariables = (0, _context.useCSSVariablesContext)();
   const isSSR = (0, _useIsSSR.useIsSSR)();
   if (isSSR) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(classes.root, className, cssVariables.className),
     ownerState: ownerState
   }, other, {
     ref: handleRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeader.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridBody, {
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {}), cssVariables.tag]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {

package/components/containers/GridRootStyles.d.ts

@@ -1,6 +1,5 @@
-import { Theme } from '@mui/material/styles';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
   ownerState: OwnerState;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;