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

package/esm/components/promptField/PromptField.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "lang", "onRecordError", "onSubmit"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridComponentRenderer } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { PromptFieldContext } from "./PromptFieldContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The top level Prompt Field component that provides context to child components.
+ * It renders a `<div />` element.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptField API](https://mui.com/x/api/data-grid/prompt-field/)
+ */
+const PromptField = forwardRef(function PromptField(props, ref) {
+  const {
+      render,
+      className,
+      lang,
+      onRecordError,
+      onSubmit
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [value, setValue] = React.useState('');
+  const [recording, setRecording] = React.useState(false);
+  const [disabled, setDisabled] = React.useState(false);
+  const state = React.useMemo(() => ({
+    value,
+    recording,
+    disabled
+  }), [value, recording, disabled]);
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleOnSubmit = React.useCallback(async prompt => {
+    setDisabled(true);
+    setValue('');
+    await onSubmit(prompt);
+    setDisabled(false);
+  }, [onSubmit]);
+  const contextValue = React.useMemo(() => ({
+    state,
+    lang,
+    onValueChange: setValue,
+    onRecordingChange: setRecording,
+    onSubmit: handleOnSubmit,
+    onError: onRecordError
+  }), [state, lang, onRecordError, handleOnSubmit]);
+  const element = useGridComponentRenderer('div', render, _extends({
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(PromptFieldContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? PromptField.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Called when an speech recognition error occurs.
+   * @param {string} error The error message
+   */
+  onRecordError: PropTypes.func,
+  /**
+   * Called when the user submits the prompt.
+   * @param {string} prompt The prompt
+   */
+  onSubmit: PropTypes.func.isRequired,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+} : void 0;
+export { PromptField };

package/esm/components/promptField/PromptFieldContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface PromptFieldState {
+  value: string;
+  disabled: boolean;
+  recording: boolean;
+}
+export interface PromptFieldContextValue {
+  state: PromptFieldState;
+  lang: string | undefined;
+  onValueChange: (value: string) => void;
+  onRecordingChange: (recording: boolean) => void;
+  onSubmit: (prompt: string) => void;
+  onError: ((error: string) => void) | undefined;
+}
+export declare const PromptFieldContext: React.Context<PromptFieldContextValue | undefined>;
+export declare function usePromptFieldContext(): PromptFieldContextValue;

package/esm/components/promptField/PromptFieldContext.js

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

package/esm/components/promptField/PromptFieldControl.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridSlotProps, RenderProp } from '@mui/x-data-grid-pro';
+import { PromptFieldState } from "./PromptFieldContext.js";
+export type PromptFieldControlProps = Omit<GridSlotProps['baseTextField'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseTextField'], PromptFieldState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: PromptFieldState) => string);
+};
+/**
+ * A component that takes user input.
+ * It renders the `baseTextField` slot.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptFieldControl API](https://mui.com/x/api/data-grid/prompt-field-control/)
+ */
+declare const PromptFieldControl: React.ForwardRefExoticComponent<PromptFieldControlProps> | React.ForwardRefExoticComponent<Omit<PromptFieldControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { PromptFieldControl };

package/esm/components/promptField/PromptFieldControl.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "onChange", "onKeyDown"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridComponentRenderer } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { usePromptFieldContext } from "./PromptFieldContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component that takes user input.
+ * It renders the `baseTextField` slot.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptFieldControl API](https://mui.com/x/api/data-grid/prompt-field-control/)
+ */
+const PromptFieldControl = forwardRef(function PromptFieldControl(props, ref) {
+  const {
+      render,
+      className,
+      onChange,
+      onKeyDown
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const {
+    state,
+    onValueChange,
+    onSubmit
+  } = usePromptFieldContext();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleChange = event => {
+    onValueChange(event.target.value);
+    onChange?.(event);
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' && state.value.trim()) {
+      onSubmit(state.value);
+    }
+    onKeyDown?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseTextField, render, _extends({}, rootProps.slotProps?.baseTextField, {
+    value: state.value,
+    className: resolvedClassName
+  }, other, {
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? PromptFieldControl.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  color: PropTypes.oneOf(['error', 'primary']),
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  helperText: PropTypes.string,
+  id: PropTypes.string,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  label: PropTypes.node,
+  multiline: PropTypes.bool,
+  placeholder: PropTypes.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  role: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'small']),
+  slotProps: PropTypes.object,
+  style: PropTypes.object,
+  tabIndex: PropTypes.number,
+  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), PropTypes.object]),
+  value: PropTypes.string
+} : void 0;
+export { PromptFieldControl };

package/esm/components/promptField/PromptFieldRecord.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridSlotProps, RenderProp } from '@mui/x-data-grid-pro';
+import { PromptFieldState } from "./PromptFieldContext.js";
+export type PromptFieldRecordProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseIconButton'], PromptFieldState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: PromptFieldState) => string);
+};
+/**
+ * A button that records the user's voice when clicked.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptFieldRecord API](https://mui.com/x/api/data-grid/prompt-field-record/)
+ */
+declare const PromptFieldRecord: React.ForwardRefExoticComponent<PromptFieldRecordProps> | React.ForwardRefExoticComponent<Omit<PromptFieldRecordProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { PromptFieldRecord };

package/esm/components/promptField/PromptFieldRecord.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Timeout } from '@mui/utils/useTimeout';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridComponentRenderer } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { usePromptFieldContext } from "./PromptFieldContext.js";
+import { BrowserSpeechRecognition } from "../../utils/speechRecognition.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that records the user's voice when clicked.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptFieldRecord API](https://mui.com/x/api/data-grid/prompt-field-record/)
+ */
+const PromptFieldRecord = forwardRef(function PromptFieldRecord(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const {
+    state,
+    lang,
+    onRecordingChange,
+    onValueChange,
+    onSubmit,
+    onError
+  } = usePromptFieldContext();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const recognition = useLazyRef(() => {
+    if (!BrowserSpeechRecognition) {
+      return {
+        start: () => {},
+        abort: () => {}
+      };
+    }
+    const timeout = new Timeout();
+    const instance = new BrowserSpeechRecognition();
+    instance.continuous = true;
+    instance.interimResults = true;
+    instance.lang = lang;
+    let finalResult = '';
+    let interimResult = '';
+    function start(options) {
+      if (state.recording) {
+        return;
+      }
+      onRecordingChange(true);
+      instance.onresult = event => {
+        finalResult = '';
+        interimResult = '';
+        if (typeof event.results === 'undefined') {
+          instance.stop();
+          return;
+        }
+        for (let i = event.resultIndex; i < event.results.length; i += 1) {
+          if (event.results[i].isFinal) {
+            finalResult += event.results[i][0].transcript;
+          } else {
+            interimResult += event.results[i][0].transcript;
+          }
+        }
+        if (finalResult === '') {
+          options.onUpdate(interimResult);
+        }
+        timeout.start(1000, () => instance.stop());
+      };
+      instance.onsoundend = () => {
+        instance.stop();
+      };
+      instance.onend = () => {
+        options.onDone(finalResult);
+        onRecordingChange(false);
+      };
+      instance.onerror = error => {
+        options.onError(error.message);
+        instance.stop();
+        onRecordingChange(false);
+      };
+      instance.start();
+    }
+    function abort() {
+      instance.abort();
+    }
+    return {
+      start,
+      abort
+    };
+  }).current;
+  const handleClick = event => {
+    if (!state.recording) {
+      recognition.start({
+        onDone: onSubmit,
+        onUpdate: onValueChange,
+        onError: onError ?? (() => {})
+      });
+      return;
+    }
+    recognition.abort();
+    onClick?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+    className: resolvedClassName,
+    disabled: state.disabled
+  }, other, {
+    ref,
+    onClick: handleClick
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? PromptFieldRecord.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
+  disabled: PropTypes.bool,
+  edge: PropTypes.oneOf(['end', 'start', false]),
+  id: PropTypes.string,
+  label: PropTypes.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  role: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  style: PropTypes.object,
+  tabIndex: PropTypes.number,
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
+} : void 0;
+export { PromptFieldRecord };

package/esm/components/promptField/PromptFieldSend.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridSlotProps, RenderProp } from '@mui/x-data-grid-pro';
+import { PromptFieldState } from "./PromptFieldContext.js";
+export type PromptFieldSendProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseIconButton'], PromptFieldState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: PromptFieldState) => string);
+};
+/**
+ * A button that processes the prompt when clicked.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptFieldSend API](https://mui.com/x/api/data-grid/prompt-field-send/)
+ */
+declare const PromptFieldSend: React.ForwardRefExoticComponent<PromptFieldSendProps> | React.ForwardRefExoticComponent<Omit<PromptFieldSendProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { PromptFieldSend };

package/{modern/components/export/ExportExcel.js → esm/components/promptField/PromptFieldSend.js}

@@ -1,84 +1,76 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "options", "onClick"];
+const _excluded = ["render", "className", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridComponentRenderer } from '@mui/x-data-grid/internals';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridComponentRenderer } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { usePromptFieldContext } from "./PromptFieldContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A button that triggers an Excel export.
- * It renders the `baseButton` slot.
+ * A button that processes the prompt when clicked.
+ * It renders the `baseIconButton` slot.
  *
  * Demos:
  *
- * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
  *
  * API:
  *
- * - [ExportExcel API](https://mui.com/x/api/data-grid/export-excel/)
+ * - [PromptFieldSend API](https://mui.com/x/api/data-grid/prompt-field-send/)
  */
-const ExportExcel = forwardRef(function ExportExcel(props, ref) {
+const PromptFieldSend = forwardRef(function PromptFieldSend(props, ref) {
   const {
       render,
-      options,
+      className,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const apiRef = useGridApiContext();
+  const {
+    state,
+    onSubmit
+  } = usePromptFieldContext();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const handleClick = event => {
-    apiRef.current.exportDataAsExcel(options);
+    onSubmit(state.value);
     onClick?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({
-    onClick: handleClick
-  }, rootProps.slotProps?.baseButton, other, {
+  const element = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
+    className: resolvedClassName,
+    disabled: state.disabled || state.recording || !state.value.trim()
+  }, other, {
+    onClick: handleClick,
     ref
-  }));
+  }), state);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: element
   });
 });
-process.env.NODE_ENV !== "production" ? ExportExcel.propTypes = {
+process.env.NODE_ENV !== "production" ? PromptFieldSend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
   /**
-   * The options to apply on the Excel export.
-   * @demos
-   *   - [Excel export](/x/react-data-grid/export/#excel-export)
+   * Override or extend the styles applied to the component.
    */
-  options: PropTypes.shape({
-    allColumns: PropTypes.bool,
-    columnsStyles: PropTypes.object,
-    escapeFormulas: PropTypes.bool,
-    exceljsPostProcess: PropTypes.func,
-    exceljsPreProcess: PropTypes.func,
-    fields: PropTypes.arrayOf(PropTypes.string),
-    fileName: PropTypes.string,
-    getRowsToExport: PropTypes.func,
-    includeColumnGroupsHeaders: PropTypes.bool,
-    includeHeaders: PropTypes.bool,
-    valueOptionsSheetName: PropTypes.string,
-    worker: PropTypes.func
-  }),
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
+  disabled: PropTypes.bool,
+  edge: PropTypes.oneOf(['end', 'start', false]),
+  id: PropTypes.string,
+  label: PropTypes.string,
   /**
    * A function to customize rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   role: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small']),
-  startIcon: PropTypes.node,
   style: PropTypes.object,
   tabIndex: PropTypes.number,
   title: PropTypes.string,
   touchRippleRef: PropTypes.any
 } : void 0;
-export { ExportExcel };
+export { PromptFieldSend };

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

@@ -0,0 +1,4 @@
+export * from "./PromptField.js";
+export * from "./PromptFieldControl.js";
+export * from "./PromptFieldRecord.js";
+export * from "./PromptFieldSend.js";

package/esm/components/promptField/index.js

@@ -0,0 +1,4 @@
+export * from "./PromptField.js";
+export * from "./PromptFieldControl.js";
+export * from "./PromptFieldRecord.js";
+export * from "./PromptFieldSend.js";

package/esm/components/resizablePanel/ResizablePanel.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type ResizablePanelProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * The direction to resize the panel.
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical';
+};
+declare function ResizablePanel(props: ResizablePanelProps): React.JSX.Element;
+export { ResizablePanel };

package/esm/components/resizablePanel/ResizablePanel.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "children", "direction"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { ResizablePanelContext } from "./ResizablePanelContext.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: ['resizablePanel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const ResizablePanelRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ResizablePanel'
+})({
+  position: 'relative'
+});
+function ResizablePanel(props) {
+  const {
+      className,
+      children,
+      direction = 'horizontal'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const ref = React.useRef(null);
+  const contextValue = React.useMemo(() => ({
+    rootRef: ref,
+    direction
+  }), [direction]);
+  return /*#__PURE__*/_jsx(ResizablePanelContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ResizablePanelRoot, _extends({
+      className: clsx(classes.root, className),
+      ownerState: rootProps
+    }, other, {
+      ref: ref,
+      children: children
+    }))
+  });
+}
+export { ResizablePanel };

package/esm/components/resizablePanel/ResizablePanelContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface ResizablePanelContextValue {
+  rootRef: React.RefObject<HTMLDivElement | null>;
+  direction: 'horizontal' | 'vertical';
+}
+export declare const ResizablePanelContext: React.Context<ResizablePanelContextValue | undefined>;
+export declare function useResizablePanelContext(): ResizablePanelContextValue;

package/esm/components/resizablePanel/ResizablePanelContext.js

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

package/esm/components/resizablePanel/ResizablePanelHandle.d.ts

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