@mui/x-data-grid-premium 8.0.0-beta.2 → 8.0.0

package/esm/components/collapsible/Collapsible.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "children"];
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import useId from '@mui/utils/useId';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import clsx from 'clsx';
+import { CollapsibleContext } from "./CollapsibleContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['collapsible']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const CollapsibleRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Collapsible'
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: ownerState.open ? '1 0 auto' : '0 0 auto',
+  borderRadius: vars.radius.base
+}));
+function Collapsible(props) {
+  const {
+      className,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [open, setOpen] = React.useState(true);
+  const panelId = useId();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes,
+    open
+  };
+  const classes = useUtilityClasses(ownerState);
+  const contextValue = React.useMemo(() => ({
+    open,
+    onOpenChange: setOpen,
+    panelId
+  }), [open, setOpen, panelId]);
+  return /*#__PURE__*/_jsx(CollapsibleContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(CollapsibleRoot, _extends({
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
+    }, other, {
+      children: children
+    }))
+  });
+}
+export { Collapsible };

package/esm/components/collapsible/CollapsibleContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CollapsibleContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  panelId: string | undefined;
+}
+export declare const CollapsibleContext: React.Context<CollapsibleContextValue | undefined>;
+export declare function useCollapsibleContext(): CollapsibleContextValue;

package/esm/components/collapsible/CollapsibleContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const CollapsibleContext = /*#__PURE__*/React.createContext(undefined);
+export function useCollapsibleContext() {
+  const context = React.useContext(CollapsibleContext);
+  if (context === undefined) {
+    throw new Error('MUI X: Missing context. Collapsible subcomponents must be placed within a <Collapsible /> component.');
+  }
+  return context;
+}

package/esm/components/collapsible/CollapsiblePanel.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type CollapsiblePanelProps = React.HTMLAttributes<HTMLDivElement>;
+declare function CollapsiblePanel(props: CollapsiblePanelProps): React.JSX.Element | null;
+export { CollapsiblePanel };

package/esm/components/collapsible/CollapsiblePanel.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["aria-label", "children", "className"];
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import useId from '@mui/utils/useId';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import clsx from 'clsx';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useCollapsibleContext } from "./CollapsibleContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['collapsiblePanel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const CollapsiblePanelRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'CollapsiblePanel'
+})({
+  border: `1px solid ${vars.colors.border.base}`,
+  borderTop: 'none',
+  borderBottomLeftRadius: vars.radius.base,
+  borderBottomRightRadius: vars.radius.base,
+  flex: 1,
+  overflow: 'hidden'
+});
+function CollapsiblePanel(props) {
+  const {
+      children,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const id = useId();
+  const {
+    open
+  } = useCollapsibleContext();
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(CollapsiblePanelRoot, _extends({
+    ownerState: rootProps,
+    className: clsx(classes.root, className),
+    id: id
+  }, other, {
+    children: children
+  }));
+}
+export { CollapsiblePanel };

package/esm/components/collapsible/CollapsibleTrigger.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type CollapsibleTriggerProps = React.HTMLAttributes<HTMLButtonElement>;
+declare function CollapsibleTrigger(props: CollapsibleTriggerProps): React.JSX.Element;
+export { CollapsibleTrigger };

package/esm/components/collapsible/CollapsibleTrigger.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className"];
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import clsx from 'clsx';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useCollapsibleContext } from "./CollapsibleContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['collapsibleTrigger'],
+    icon: ['collapsibleIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const CollapsibleTriggerRoot = styled('button', {
+  name: 'MuiDataGrid',
+  slot: 'CollapsibleTrigger'
+})(({
+  ownerState
+}) => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: 40,
+  padding: vars.spacing(0, 1.5),
+  border: `1px solid ${vars.colors.border.base}`,
+  background: 'none',
+  outline: 'none',
+  borderTopLeftRadius: vars.radius.base,
+  borderTopRightRadius: vars.radius.base,
+  borderBottomLeftRadius: ownerState.open ? 0 : vars.radius.base,
+  borderBottomRightRadius: ownerState.open ? 0 : vars.radius.base,
+  '&:hover': {
+    backgroundColor: vars.colors.interactive.hover,
+    cursor: 'pointer'
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${vars.colors.interactive.selected}`,
+    outlineOffset: -2
+  }
+}));
+const CollapsibleIcon = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'CollapsibleIcon'
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.foreground.muted,
+  transform: ownerState.open ? 'none' : 'rotate(180deg)',
+  transition: vars.transition(['transform'], {
+    duration: vars.transitions.duration.short,
+    easing: vars.transitions.easing.easeInOut
+  })
+}));
+function CollapsibleTrigger(props) {
+  const {
+      children,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const {
+    open,
+    onOpenChange,
+    panelId
+  } = useCollapsibleContext();
+  const ownerState = {
+    classes: rootProps.classes,
+    open
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(CollapsibleTriggerRoot, _extends({
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    tabIndex: 0,
+    "aria-controls": open ? panelId : undefined,
+    "aria-expanded": !open,
+    onClick: () => onOpenChange(!open)
+  }, other, {
+    children: [children, /*#__PURE__*/_jsx(CollapsibleIcon, {
+      ownerState: ownerState,
+      className: classes.icon,
+      children: /*#__PURE__*/_jsx(rootProps.slots.collapsibleIcon, {})
+    })]
+  }));
+}
+export { CollapsibleTrigger };

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

@@ -0,0 +1,4 @@
+export * from "./Collapsible.js";
+export * from "./CollapsibleContext.js";
+export * from "./CollapsibleTrigger.js";
+export * from "./CollapsiblePanel.js";

package/esm/components/collapsible/index.js

@@ -0,0 +1,4 @@
+export * from "./Collapsible.js";
+export * from "./CollapsibleContext.js";
+export * from "./CollapsibleTrigger.js";
+export * from "./CollapsiblePanel.js";

package/esm/components/export/ExportExcel.js

@@ -47,113 +47,9 @@ process.env.NODE_ENV !== "production" ? ExportExcel.propTypes = {
   // | 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,
   className: 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,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: PropTypes.func,
+  id: PropTypes.string,
   /**
    * The options to apply on the Excel export.
    * @demos
@@ -177,33 +73,12 @@ process.env.NODE_ENV !== "production" ? ExportExcel.propTypes = {
    * 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.
-   */
+  role: PropTypes.string,
   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'])
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
 } : void 0;
 export { ExportExcel };

package/esm/components/index.d.ts

@@ -1,6 +1,9 @@
 export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
 export * from "./GridColumnMenuAggregationItem.js";
-export * from "./promptControl/index.js";
+export * from "./promptField/index.js";
 export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
-export * from "./export/index.js";
+export * from "./export/index.js";
+export * from "./GridEmptyPivotOverlay.js";
+export * from "./pivotPanel/index.js";
+export * from "./aiAssistantPanel/index.js";

package/esm/components/index.js

@@ -1,6 +1,9 @@
 export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
 export * from "./GridColumnMenuAggregationItem.js";
-export * from "./promptControl/index.js";
+export * from "./promptField/index.js";
 export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
-export * from "./export/index.js";
+export * from "./export/index.js";
+export * from "./GridEmptyPivotOverlay.js";
+export * from "./pivotPanel/index.js";
+export * from "./aiAssistantPanel/index.js";

package/esm/components/pivotPanel/GridPivotPanel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function GridPivotPanel(): React.JSX.Element;
+export { GridPivotPanel };

package/esm/components/pivotPanel/GridPivotPanel.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { GridPivotPanelHeader } from "./GridPivotPanelHeader.js";
+import { GridPivotPanelBody } from "./GridPivotPanelBody.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GridPivotPanel() {
+  const [searchValue, setSearchValue] = React.useState('');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridPivotPanelHeader, {
+      searchValue: searchValue,
+      onSearchValueChange: setSearchValue
+    }), /*#__PURE__*/_jsx(GridPivotPanelBody, {
+      searchValue: searchValue
+    })]
+  });
+}
+export { GridPivotPanel };

package/esm/components/pivotPanel/GridPivotPanelBody.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface FieldTransferObject {
+  field: string;
+  modelKey: 'columns' | 'rows' | 'values' | null;
+}
+declare function GridPivotPanelBody({
+  searchValue
+}: {
+  searchValue: string;
+}): React.JSX.Element;
+export { GridPivotPanelBody };