@mui/x-data-grid 6.3.0 → 6.3.1

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -76,7 +76,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.field] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ? getFilterItemValue(item) : ''}`
+                  ${
+          // implicit check for null and undefined
+          item.value != null ? getFilterItemValue(item) : ''}`
         }, index)))
       })]
     });

package/node/hooks/features/focus/useGridFocus.js

@@ -308,9 +308,9 @@ const useGridFocus = (apiRef, props) => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, focusPrivateApi, 'private');
   React.useEffect(() => {
     const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
-    doc.addEventListener('click', handleDocumentClick);
+    doc.addEventListener('mouseup', handleDocumentClick);
     return () => {
-      doc.removeEventListener('click', handleDocumentClick);
+      doc.removeEventListener('mouseup', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.3.0
+ * @mui/x-data-grid v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/joy/joySlots.js

@@ -15,11 +15,18 @@ var _FormLabel = _interopRequireDefault(require("@mui/joy/FormLabel"));
 var _Button = _interopRequireDefault(require("@mui/joy/Button"));
 var _IconButton = _interopRequireDefault(require("@mui/joy/IconButton"));
 var _Switch = _interopRequireDefault(require("@mui/joy/Switch"));
+var _Select = _interopRequireDefault(require("@mui/joy/Select"));
+var _Option = _interopRequireDefault(require("@mui/joy/Option"));
+var _utils = require("@mui/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
-  _excluded2 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
-  _excluded3 = ["color", "size", "sx"],
-  _excluded4 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"];
+  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded5 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"],
+  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded7 = ["native"],
+  _excluded8 = ["shrink", "variant", "sx"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function convertColor(color) {
@@ -41,14 +48,17 @@ function convertSize(size) {
     large: 'lg'
   }[size] : size;
 }
-function convertVariant(variant) {
-  return variant ? {
+function convertVariant(variant, defaultVariant = 'plain') {
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
     outlined: 'outlined',
     contained: 'solid',
     text: 'plain',
-    standard: 'plain',
     filled: 'soft'
-  }[variant] : variant;
+  }[variant] || defaultVariant;
 }
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -69,36 +79,46 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef(({
-  onChange,
-  label,
-  placeholder,
-  value,
-  inputRef,
-  type
-}, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+      onChange,
+      label,
+      placeholder,
+      value,
+      inputRef,
+      type,
+      size,
+      variant
+    } = _ref2,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+  const rootRef = (0, _utils.unstable_useForkRef)(ref, props.InputProps?.ref);
+  const inputForkRef = (0, _utils.unstable_useForkRef)(inputRef, props?.inputProps?.ref);
+  const {
+    startAdornment,
+    endAdornment
+  } = props.InputProps || {};
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
-    ref: ref,
+    ref: rootRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
-      sx: {
-        fontSize: 12
-      },
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
       type: type,
       value: value,
       onChange: onChange,
       placeholder: placeholder,
-      size: "sm",
+      variant: convertVariant(variant, 'outlined'),
+      size: convertSize(size),
       slotProps: {
-        input: {
-          ref: inputRef
-        }
-      }
+        input: (0, _extends2.default)({}, props?.inputProps, {
+          ref: inputForkRef
+        })
+      },
+      startDecorator: startAdornment,
+      endDecorator: endAdornment
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
   let {
       startIcon,
       color,
@@ -106,25 +126,25 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
       size,
       sx,
       variant
-    } = _ref2,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+    } = _ref3,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, props, {
     size: convertSize(size),
     color: convertColor(color),
-    variant: convertVariant(variant) ?? 'plain',
+    variant: convertVariant(variant),
     ref: ref,
     startDecorator: startIcon,
     endDecorator: endIcon,
     sx: sx
   }));
 });
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
   let {
       color,
       size,
       sx
-    } = _ref3,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
+    } = _ref4,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, props, {
     size: convertSize(size),
     color: convertColor(color) ?? 'neutral',
@@ -133,7 +153,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref)
     sx: sx
   }));
 });
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
   let {
       name,
       color: colorProp,
@@ -145,8 +165,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
       sx,
       onChange,
       onClick
-    } = _ref4,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
+    } = _ref5,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref5, _excluded5);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, props, {
     onChange: onChange,
     size: convertSize(size),
@@ -169,15 +189,96 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
     }), ...(Array.isArray(sx) ? sx : [sx])]
   }));
 });
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+      open,
+      onOpen,
+      value,
+      onChange,
+      size,
+      color,
+      variant,
+      MenuProps,
+      inputRef,
+      labelId
+    } = _ref6,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref6, _excluded6);
+  const handleChange = (event, newValue) => {
+    if (event && onChange) {
+      // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
+
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = event.nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: newValue,
+          name: props.name
+        }
+      });
+      onChange(clonedEvent, null);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({}, props, {
+    listboxOpen: open,
+    onListboxOpenChange: isOpen => {
+      if (isOpen) {
+        onOpen?.({});
+      } else {
+        MenuProps?.onClose?.({}, undefined);
+      }
+    },
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant, 'outlined'),
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    slotProps: {
+      button: {
+        'aria-labelledby': labelId,
+        ref: inputRef
+      },
+      listbox: {
+        disablePortal: false,
+        sx: {
+          zIndex: 1350
+        }
+      }
+    }
+  }));
+});
+const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let props = (0, _objectWithoutPropertiesLoose2.default)(_ref7, _excluded7);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
+});
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+  let {
+      sx
+    } = _ref8,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref8, _excluded8);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, (0, _extends2.default)({}, props, {
+    ref: ref,
+    sx: sx
+  }));
+});
 const joySlots = {
   baseCheckbox: Checkbox,
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,
-  baseSwitch: Switch
-  // BaseFormControl: MUIFormControl,
-  // baseSelect: Select,
-  // baseSelectOption: Option,
+  baseSwitch: Switch,
+  baseSelect: Select,
+  baseSelectOption: Option,
+  baseInputLabel: InputLabel,
+  baseFormControl: _FormControl.default
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"