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

package/components/collapsible/Collapsible.js

@@ -0,0 +1,70 @@
+"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.Collapsible = Collapsible;
+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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _CollapsibleContext = require("./CollapsibleContext");
+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: ['collapsible']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const CollapsibleRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'Collapsible'
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: ownerState.open ? '1 0 auto' : '0 0 auto',
+  borderRadius: _internals.vars.radius.base
+}));
+function Collapsible(props) {
+  const {
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [open, setOpen] = React.useState(true);
+  const panelId = (0, _useId.default)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = {
+    classes: rootProps.classes,
+    open
+  };
+  const classes = useUtilityClasses(ownerState);
+  const contextValue = React.useMemo(() => ({
+    open,
+    onOpenChange: setOpen,
+    panelId
+  }), [open, setOpen, panelId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleContext.CollapsibleContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleRoot, (0, _extends2.default)({
+      ownerState: ownerState,
+      className: (0, _clsx.default)(classes.root, className)
+    }, other, {
+      children: children
+    }))
+  });
+}

package/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/components/collapsible/CollapsibleContext.js

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

@@ -0,0 +1,64 @@
+"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.CollapsiblePanel = CollapsiblePanel;
+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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _utils = require("@mui/utils");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _CollapsibleContext = require("./CollapsibleContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["aria-label", "children", "className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['collapsiblePanel']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const CollapsiblePanelRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'CollapsiblePanel'
+})({
+  border: `1px solid ${_internals.vars.colors.border.base}`,
+  borderTop: 'none',
+  borderBottomLeftRadius: _internals.vars.radius.base,
+  borderBottomRightRadius: _internals.vars.radius.base,
+  flex: 1,
+  overflow: 'hidden'
+});
+function CollapsiblePanel(props) {
+  const {
+      children,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  const id = (0, _useId.default)();
+  const {
+    open
+  } = (0, _CollapsibleContext.useCollapsibleContext)();
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsiblePanelRoot, (0, _extends2.default)({
+    ownerState: rootProps,
+    className: (0, _clsx.default)(classes.root, className),
+    id: id
+  }, other, {
+    children: children
+  }));
+}

package/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/components/collapsible/CollapsibleTrigger.js

@@ -0,0 +1,106 @@
+"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.CollapsibleTrigger = CollapsibleTrigger;
+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 _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _CollapsibleContext = require("./CollapsibleContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['collapsibleTrigger'],
+    icon: ['collapsibleIcon']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const CollapsibleTriggerRoot = (0, _system.styled)('button', {
+  name: 'MuiDataGrid',
+  slot: 'CollapsibleTrigger'
+})(({
+  ownerState
+}) => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: 40,
+  padding: _internals.vars.spacing(0, 1.5),
+  border: `1px solid ${_internals.vars.colors.border.base}`,
+  background: 'none',
+  outline: 'none',
+  borderTopLeftRadius: _internals.vars.radius.base,
+  borderTopRightRadius: _internals.vars.radius.base,
+  borderBottomLeftRadius: ownerState.open ? 0 : _internals.vars.radius.base,
+  borderBottomRightRadius: ownerState.open ? 0 : _internals.vars.radius.base,
+  '&:hover': {
+    backgroundColor: _internals.vars.colors.interactive.hover,
+    cursor: 'pointer'
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${_internals.vars.colors.interactive.selected}`,
+    outlineOffset: -2
+  }
+}));
+const CollapsibleIcon = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'CollapsibleIcon'
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: _internals.vars.colors.foreground.muted,
+  transform: ownerState.open ? 'none' : 'rotate(180deg)',
+  transition: _internals.vars.transition(['transform'], {
+    duration: _internals.vars.transitions.duration.short,
+    easing: _internals.vars.transitions.easing.easeInOut
+  })
+}));
+function CollapsibleTrigger(props) {
+  const {
+      children,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    open,
+    onOpenChange,
+    panelId
+  } = (0, _CollapsibleContext.useCollapsibleContext)();
+  const ownerState = {
+    classes: rootProps.classes,
+    open
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CollapsibleTriggerRoot, (0, _extends2.default)({
+    ownerState: ownerState,
+    className: (0, _clsx.default)(classes.root, className),
+    tabIndex: 0,
+    "aria-controls": open ? panelId : undefined,
+    "aria-expanded": !open,
+    onClick: () => onOpenChange(!open)
+  }, other, {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsibleIcon, {
+      ownerState: ownerState,
+      className: classes.icon,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.collapsibleIcon, {})
+    })]
+  }));
+}

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Collapsible = require("./Collapsible");
+Object.keys(_Collapsible).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Collapsible[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Collapsible[key];
+    }
+  });
+});
+var _CollapsibleContext = require("./CollapsibleContext");
+Object.keys(_CollapsibleContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CollapsibleContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CollapsibleContext[key];
+    }
+  });
+});
+var _CollapsibleTrigger = require("./CollapsibleTrigger");
+Object.keys(_CollapsibleTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CollapsibleTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CollapsibleTrigger[key];
+    }
+  });
+});
+var _CollapsiblePanel = require("./CollapsiblePanel");
+Object.keys(_CollapsiblePanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CollapsiblePanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CollapsiblePanel[key];
+    }
+  });
+});

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

@@ -48,15 +48,15 @@ Object.keys(_GridColumnMenuAggregationItem).forEach(function (key) {
     }
   });
 });
-var _promptControl = require("./promptControl");
-Object.keys(_promptControl).forEach(function (key) {
+var _promptField = require("./promptField");
+Object.keys(_promptField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _promptControl[key]) return;
+  if (key in exports && exports[key] === _promptField[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _promptControl[key];
+      return _promptField[key];
     }
   });
 });
@@ -72,4 +72,40 @@ Object.keys(_export).forEach(function (key) {
       return _export[key];
     }
   });
+});
+var _GridEmptyPivotOverlay = require("./GridEmptyPivotOverlay");
+Object.keys(_GridEmptyPivotOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridEmptyPivotOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridEmptyPivotOverlay[key];
+    }
+  });
+});
+var _pivotPanel = require("./pivotPanel");
+Object.keys(_pivotPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _pivotPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pivotPanel[key];
+    }
+  });
+});
+var _aiAssistantPanel = require("./aiAssistantPanel");
+Object.keys(_aiAssistantPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _aiAssistantPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _aiAssistantPanel[key];
+    }
+  });
 });

package/components/pivotPanel/GridPivotPanel.d.ts

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

package/components/pivotPanel/GridPivotPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPivotPanel = GridPivotPanel;
+var React = _interopRequireWildcard(require("react"));
+var _GridPivotPanelHeader = require("./GridPivotPanelHeader");
+var _GridPivotPanelBody = require("./GridPivotPanelBody");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridPivotPanel() {
+  const [searchValue, setSearchValue] = React.useState('');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelHeader.GridPivotPanelHeader, {
+      searchValue: searchValue,
+      onSearchValueChange: setSearchValue
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelBody.GridPivotPanelBody, {
+      searchValue: searchValue
+    })]
+  });
+}

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