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

package/components/promptField/PromptFieldSend.js

@@ -0,0 +1,83 @@
+"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.PromptFieldSend = 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 _forwardRef = require("@mui/x-internals/forwardRef");
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _PromptFieldContext = require("./PromptFieldContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className", "onClick"];
+/**
+ * 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/)
+ */
+const PromptFieldSend = exports.PromptFieldSend = (0, _forwardRef.forwardRef)(function PromptFieldSend(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    state,
+    onSubmit
+  } = (0, _PromptFieldContext.usePromptFieldContext)();
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    onSubmit(state.value);
+    onClick?.(event);
+  };
+  const element = (0, _internals.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+    className: resolvedClassName,
+    disabled: state.disabled || state.recording || !state.value.trim()
+  }, other, {
+    onClick: handleClick,
+    ref
+  }), state);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  color: _propTypes.default.oneOf(['default', 'inherit', 'primary']),
+  disabled: _propTypes.default.bool,
+  edge: _propTypes.default.oneOf(['end', 'start', false]),
+  id: _propTypes.default.string,
+  label: _propTypes.default.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  role: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/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/components/promptField/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PromptField = require("./PromptField");
+Object.keys(_PromptField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptField[key];
+    }
+  });
+});
+var _PromptFieldControl = require("./PromptFieldControl");
+Object.keys(_PromptFieldControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptFieldControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptFieldControl[key];
+    }
+  });
+});
+var _PromptFieldRecord = require("./PromptFieldRecord");
+Object.keys(_PromptFieldRecord).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptFieldRecord[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptFieldRecord[key];
+    }
+  });
+});
+var _PromptFieldSend = require("./PromptFieldSend");
+Object.keys(_PromptFieldSend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptFieldSend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptFieldSend[key];
+    }
+  });
+});

package/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/components/resizablePanel/ResizablePanel.js

@@ -0,0 +1,59 @@
+"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.ResizablePanel = ResizablePanel;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/utils");
+var _ResizablePanelContext = require("./ResizablePanelContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "children", "direction"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['resizablePanel']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const ResizablePanelRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ResizablePanel'
+})({
+  position: 'relative'
+});
+function ResizablePanel(props) {
+  const {
+      className,
+      children,
+      direction = 'horizontal'
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  const ref = React.useRef(null);
+  const contextValue = React.useMemo(() => ({
+    rootRef: ref,
+    direction
+  }), [direction]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizablePanelContext.ResizablePanelContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizablePanelRoot, (0, _extends2.default)({
+      className: (0, _clsx.default)(classes.root, className),
+      ownerState: rootProps
+    }, other, {
+      ref: ref,
+      children: children
+    }))
+  });
+}

package/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/components/resizablePanel/ResizablePanelContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizablePanelContext = void 0;
+exports.useResizablePanelContext = useResizablePanelContext;
+var React = _interopRequireWildcard(require("react"));
+const ResizablePanelContext = exports.ResizablePanelContext = /*#__PURE__*/React.createContext(undefined);
+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/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 };

package/components/resizablePanel/ResizablePanelHandle.js

@@ -0,0 +1,115 @@
+"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.ResizablePanelHandle = ResizablePanelHandle;
+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 _internals = require("@mui/x-data-grid-pro/internals");
+var _utils = require("@mui/utils");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useResize = require("../../hooks/utils/useResize");
+var _ResizablePanelContext = require("./ResizablePanelContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "children"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    direction
+  } = ownerState;
+  const slots = {
+    root: ['resizablePanelHandle', `resizablePanelHandle--${direction}`]
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const ResizablePanelHandleRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ResizablePanelHandle',
+  overridesResolver: (props, styles) => [{
+    [`&.${_xDataGridPro.gridClasses['resizablePanelHandle--horizontal']}`]: styles['resizablePanelHandle--horizontal']
+  }, {
+    [`&.${_xDataGridPro.gridClasses['resizablePanelHandle--vertical']}`]: styles['resizablePanelHandle--vertical']
+  }, styles.resizablePanelHandle]
+})({
+  position: 'absolute',
+  zIndex: 3,
+  top: 0,
+  left: 0,
+  userSelect: 'none',
+  transition: _internals.vars.transition(['border-color'], {
+    duration: _internals.vars.transitions.duration.short,
+    easing: _internals.vars.transitions.easing.easeInOut
+  }),
+  '&:hover': {
+    borderWidth: 2,
+    borderColor: _internals.vars.colors.interactive.selected
+  },
+  variants: [{
+    props: {
+      direction: 'horizontal'
+    },
+    style: {
+      height: '100%',
+      width: 8,
+      cursor: 'ew-resize',
+      borderLeft: `1px solid ${_internals.vars.colors.border.base}`,
+      touchAction: 'pan-x'
+    }
+  }, {
+    props: {
+      direction: 'vertical'
+    },
+    style: {
+      width: '100%',
+      height: 8,
+      cursor: 'ns-resize',
+      borderTop: `1px solid ${_internals.vars.colors.border.base}`,
+      touchAction: 'pan-y'
+    }
+  }]
+});
+function ResizablePanelHandle(props) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    rootRef,
+    direction
+  } = (0, _ResizablePanelContext.useResizablePanelContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = {
+    classes: rootProps.classes,
+    direction
+  };
+  const classes = useUtilityClasses(ownerState);
+  const {
+    ref
+  } = (0, _useResize.useResize)({
+    direction,
+    getInitialSize: () => {
+      return direction === 'horizontal' ? rootRef.current.offsetWidth : rootRef.current.offsetHeight;
+    },
+    onSizeChange: newSize => {
+      if (direction === 'horizontal') {
+        rootRef.current.style.width = `${newSize}px`;
+      } else {
+        rootRef.current.style.height = `${newSize}px`;
+      }
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizablePanelHandleRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState,
+    direction: direction
+  }, other, {
+    ref: ref
+  }));
+}

package/components/resizablePanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ResizablePanel.js";
+export * from "./ResizablePanelContext.js";
+export * from "./ResizablePanelHandle.js";

package/components/resizablePanel/index.js

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

package/components/sidebar/Sidebar.d.ts

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

package/components/sidebar/Sidebar.js

@@ -0,0 +1,54 @@
+"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.Sidebar = Sidebar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/utils");
+var _resizablePanel = require("../resizablePanel");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "children"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['sidebar']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const SidebarRoot = (0, _system.styled)(_resizablePanel.ResizablePanel, {
+  name: 'MuiDataGrid',
+  slot: 'Sidebar'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  width: 300,
+  minWidth: 260,
+  maxWidth: 400,
+  overflow: 'hidden'
+});
+function Sidebar(props) {
+  const {
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SidebarRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_resizablePanel.ResizablePanelHandle, {}), children]
+  }));
+}

package/components/sidebar/SidebarHeader.d.ts

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

package/components/sidebar/SidebarHeader.js

@@ -0,0 +1,51 @@
+"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.SidebarHeader = SidebarHeader;
+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 _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _utils = require("@mui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "children"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['sidebarHeader']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const SidebarHeaderRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'SidebarHeader'
+})({
+  position: 'sticky',
+  top: 0,
+  borderBottom: `1px solid ${_internals.vars.colors.border.base}`
+});
+function SidebarHeader(props) {
+  const {
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarHeaderRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    children: children
+  }));
+}

package/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Sidebar.js";
+export * from "./SidebarHeader.js";

package/components/sidebar/index.js

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

package/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -10,9 +10,12 @@ var _internals = require("@mui/x-data-grid-pro/internals");
 var _GridPremiumColumnMenu = require("../components/GridPremiumColumnMenu");
 var _material = _interopRequireDefault(require("../material"));
 var _GridBottomContainer = require("../components/GridBottomContainer");
+var _GridEmptyPivotOverlay = require("../components/GridEmptyPivotOverlay");
 var _GridPremiumToolbar = require("../components/GridPremiumToolbar");
 const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, _material.default, {
+  aiAssistantPanel: null,
   columnMenu: _GridPremiumColumnMenu.GridPremiumColumnMenu,
   bottomContainer: _GridBottomContainer.GridBottomContainer,
+  emptyPivotOverlay: _GridEmptyPivotOverlay.GridEmptyPivotOverlay,
   toolbar: _GridPremiumToolbar.GridPremiumToolbar
 });