@mui/x-data-grid 6.2.1 → 6.3.1

package/node/joy/joySlots.js

@@ -12,10 +12,54 @@ var _Checkbox = _interopRequireDefault(require("@mui/joy/Checkbox"));
 var _Input = _interopRequireDefault(require("@mui/joy/Input"));
 var _FormControl = _interopRequireDefault(require("@mui/joy/FormControl"));
 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"];
+const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _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) {
+  if (color === 'secondary') {
+    return 'primary';
+  }
+  if (color === 'error') {
+    return 'danger';
+  }
+  if (color === 'default' || color === 'inherit') {
+    return 'neutral';
+  }
+  return color;
+}
+function convertSize(size) {
+  return size ? {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+  }[size] : size;
+}
+function convertVariant(variant, defaultVariant = 'plain') {
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
+    outlined: 'outlined',
+    contained: 'solid',
+    text: 'plain',
+    filled: 'soft'
+  }[variant] || defaultVariant;
+}
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       inputProps,
@@ -35,43 +79,206 @@ 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(_ref3, ref) {
+  let {
+      startIcon,
+      color,
+      endIcon,
+      size,
+      sx,
+      variant
+    } = _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),
+    ref: ref,
+    startDecorator: startIcon,
+    endDecorator: endIcon,
+    sx: sx
+  }));
+});
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+  let {
+      color,
+      size,
+      sx
+    } = _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',
+    variant: "plain",
+    ref: ref,
+    sx: sx
+  }));
+});
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
+  let {
+      name,
+      color: colorProp,
+      edge,
+      icon,
+      inputProps,
+      inputRef,
+      size,
+      sx,
+      onChange,
+      onClick
+    } = _ref5,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, props, {
+    onChange: onChange,
+    size: convertSize(size),
+    color: convertColor(colorProp),
+    ref: ref,
+    slotProps: {
+      input: (0, _extends2.default)({}, inputProps, {
+        name,
+        onClick: onClick,
+        ref: inputRef
+      }),
+      thumb: {
+        children: icon
+      }
+    },
+    sx: [(0, _extends2.default)({}, edge === 'start' && {
+      ml: '-8px'
+    }, edge === 'end' && {
+      mr: '-8px'
+    }), ...(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
-  // BaseFormControl: MUIFormControl,
-  // BaseSelect: MUISelect,
-  // BaseSwitch: MUISwitch,
-  // BaseButton: MUIButton,
-  // BaseIconButton: MUIIconButton,
+  baseTextField: TextField,
+  baseButton: Button,
+  baseIconButton: IconButton,
+  baseSwitch: Switch,
+  baseSelect: Select,
+  baseSelectOption: Option,
+  baseInputLabel: InputLabel,
+  baseFormControl: _FormControl.default
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
 };

package/node/locales/frFR.js

@@ -43,7 +43,7 @@ const frFRGrid = {
   columnsPanelHideAllButton: 'Tout cacher',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Tout supprimer',
   filterPanelDeleteIconLabel: 'Supprimer',
   filterPanelLogicOperator: 'Opérateur logique',
   filterPanelOperator: 'Opérateur',
@@ -73,7 +73,7 @@ const frFRGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Afficher les colonnes',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
   columnMenuHideColumn: 'Cacher',
   columnMenuUnsort: 'Annuler le tri',

package/node/locales/trTR.js

@@ -43,7 +43,7 @@ const trTRGrid = {
   columnsPanelHideAllButton: 'Hepsini gizle',
   // Filter panel text
   filterPanelAddFilter: 'Filtre Ekle',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Hepsini kaldır',
   filterPanelDeleteIconLabel: 'Kaldır',
   filterPanelLogicOperator: 'Mantıksal operatörler',
   filterPanelOperator: 'Operatör',
@@ -73,7 +73,7 @@ const trTRGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre uygula',
   columnMenuHideColumn: 'Gizle',
   columnMenuUnsort: 'Sıralama',

package/node/locales/zhCN.js

@@ -43,7 +43,7 @@ const zhCNGrid = {
   columnsPanelHideAllButton: '隐藏所有',
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '清除全部',
   filterPanelDeleteIconLabel: '删除',
   filterPanelLogicOperator: '逻辑操作器',
   filterPanelOperator: '操作器',
@@ -73,7 +73,7 @@ const zhCNGrid = {
   // Column menu text
   columnMenuLabel: '菜单',
   columnMenuShowColumns: '显示',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',
   columnMenuHideColumn: '隐藏',
   columnMenuUnsort: '恢复默认',

package/package.json

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