@mui/material 5.11.4 → 5.11.6

package/node/SwipeableDrawer/SwipeableDrawer.js

@@ -25,7 +25,7 @@ var _utils2 = require("../transitions/utils");
 var _SwipeArea = _interopRequireDefault(require("./SwipeArea"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
+  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 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; }
 // This value is closed to what browsers are using internally to
@@ -141,6 +141,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       disableSwipeToOpen = iOS,
       hideBackdrop,
       hysteresis = 0.52,
+      allowSwipeInChildren = false,
       minFlingVelocity = 450,
       ModalProps: {
         BackdropProps
@@ -260,6 +261,30 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       });
     }
   });
+  const startMaybeSwiping = (force = false) => {
+    if (!maybeSwiping) {
+      // on Safari Mobile, if you want to be able to have the 'click' event fired on child elements, nothing in the DOM can be changed.
+      // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
+      // so do this change on first touchmove instead of touchstart
+      if (force || !(disableDiscovery && allowSwipeInChildren)) {
+        (0, _reactDom.flushSync)(() => {
+          setMaybeSwiping(true);
+        });
+      }
+      const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
+      if (!open && paperRef.current) {
+        // The ref may be null when a parent component updates while swiping.
+        setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
+          changeTransition: false
+        });
+      }
+      swipeInstance.current.velocity = 0;
+      swipeInstance.current.lastTime = null;
+      swipeInstance.current.lastTranslate = null;
+      swipeInstance.current.paperHit = false;
+      touchDetected.current = true;
+    }
+  };
   const handleBodyTouchMove = (0, _useEventCallback.default)(nativeEvent => {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
@@ -270,6 +295,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (claimedSwipeInstance !== null && claimedSwipeInstance !== swipeInstance.current) {
       return;
     }
+    startMaybeSwiping(true);
     const anchorRtl = (0, _Drawer.getAnchor)(theme, anchor);
     const horizontalSwipe = (0, _Drawer.isHorizontal)(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
@@ -380,7 +406,12 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, (0, _ownerDocument.default)(nativeEvent.currentTarget));
     const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, (0, _ownerWindow.default)(nativeEvent.currentTarget));
     if (!open) {
-      if (disableSwipeToOpen || nativeEvent.target !== swipeAreaRef.current) {
+      var _paperRef$current;
+      // logic for if swipe should be ignored:
+      // if disableSwipeToOpen
+      // if target != swipeArea, and target is not a child of paper ref
+      // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {
@@ -395,20 +426,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    (0, _reactDom.flushSync)(() => {
-      setMaybeSwiping(true);
-    });
-    if (!open && paperRef.current) {
-      // The ref may be null when a parent component updates while swiping.
-      setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
-        changeTransition: false
-      });
-    }
-    swipeInstance.current.velocity = 0;
-    swipeInstance.current.lastTime = null;
-    swipeInstance.current.lastTranslate = null;
-    swipeInstance.current.paperHit = false;
-    touchDetected.current = true;
+    startMaybeSwiping();
   });
   React.useEffect(() => {
     if (variant === 'temporary') {
@@ -456,7 +474,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       hideBackdrop: hideBackdrop,
       PaperProps: (0, _extends2.default)({}, PaperProps, {
         style: (0, _extends2.default)({
-          pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
         }, PaperProps.style),
         ref: handleRef
       }),
@@ -478,6 +496,19 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
+  /**
+   * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
+   * This can be useful in scenarios where the drawer is partially visible.
+   * You can customize it further with a callback that determines which children the user can drag over to open the drawer
+   * (for example, to ignore other elements that handle touch move events, like sliders).
+   *
+   * @param {TouchEvent} event The 'touchstart' event
+   * @param {HTMLDivElement} swipeArea The swipe area element
+   * @param {HTMLDivElement} paper The drawer's paper element
+   *
+   * @default false
+   */
+  allowSwipeInChildren: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
   /**
    * @ignore
    */

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.4
+ * @mui/material v5.11.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/locale/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = exports.urPK = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.srRS = exports.skSK = exports.siLK = exports.ruRU = exports.roRO = exports.ptPT = exports.ptBR = exports.plPL = exports.nlNL = exports.nbNO = exports.mkMK = exports.kuLatn = exports.koKR = exports.kkKZ = exports.khKH = exports.jaJP = exports.itIT = exports.isIS = exports.idID = exports.hyAM = exports.huHU = exports.hrHR = exports.hiIN = exports.heIL = exports.frFR = exports.fiFI = exports.faIR = exports.etEE = exports.esES = exports.enUS = exports.elGR = exports.deDE = exports.daDK = exports.csCZ = exports.caES = exports.bnBD = exports.bgBG = exports.azAZ = exports.arSD = exports.arSA = exports.arEG = exports.amET = void 0;
+exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = exports.urPK = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.srRS = exports.skSK = exports.siLK = exports.ruRU = exports.roRO = exports.ptPT = exports.ptBR = exports.plPL = exports.nlNL = exports.nbNO = exports.mkMK = exports.kuLatn = exports.koKR = exports.kkKZ = exports.khKH = exports.jaJP = exports.itIT = exports.isIS = exports.idID = exports.hyAM = exports.huHU = exports.hrHR = exports.hiIN = exports.heIL = exports.frFR = exports.fiFI = exports.faIR = exports.etEE = exports.esES = exports.enUS = exports.elGR = exports.deDE = exports.daDK = exports.csCZ = exports.caES = exports.bnBD = exports.bgBG = exports.beBY = exports.azAZ = exports.arSD = exports.arSA = exports.arEG = exports.amET = void 0;
 const amET = {
   components: {
     MuiBreadcrumbs: {
@@ -453,6 +453,92 @@ const bnBD = {
   }
 };
 exports.bnBD = bnBD;
+const beBY = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Паказаць шлях'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Перайсці на першую старонку';
+          }
+          if (type === 'last') {
+            return 'Перайсці на апошнюю старонку';
+          }
+          if (type === 'next') {
+            return 'Перайсці на наступную старонку';
+          }
+          // if (type === 'previous') {
+          return 'Перайсці на папярэднюю старонку';
+        },
+        labelRowsPerPage: 'Радкоў на старонцы:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} з ${count !== -1 ? count : `больш чым ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          let pluralForm = 'Зорак';
+          const lastDigit = value % 10;
+          if (lastDigit > 1 && lastDigit < 5 && (value < 10 || value > 20)) {
+            pluralForm = 'Зоркі';
+          } else if (lastDigit === 1 && value % 100 !== 11) {
+            pluralForm = 'Зорка';
+          }
+          return `${value} ${pluralForm}`;
+        },
+        emptyLabelText: 'Рэйтынг адсутнічае'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Ачысціць',
+        closeText: 'Закрыць',
+        loadingText: 'Загрузка…',
+        noOptionsText: 'Няма варыянтаў',
+        openText: 'Адкрыць'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Закрыць'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Навігацыя па старонкам',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            if (selected) {
+              return `${page} старонка`;
+            }
+            return `Перайсці на ${page} старонку`;
+          }
+          if (type === 'first') {
+            return 'Перайсці на першую старонку';
+          }
+          if (type === 'last') {
+            return 'Перайсці на апошнюю старонку';
+          }
+          if (type === 'next') {
+            return 'Перайсці на наступную старонку';
+          }
+          // if (type === 'previous') {
+          return 'Перайсці на папярэднюю старонку';
+        }
+      }
+    }
+  }
+};
+exports.beBY = beBY;
 const bgBG = {
   components: {
     MuiBreadcrumbs: {

package/node/styles/experimental_extendTheme.js

@@ -33,6 +33,13 @@ function setColor(obj, key, defaultValue) {
     obj[key] = defaultValue;
   }
 }
+function setColorChannel(obj, key) {
+  if (!(`${key}Channel` in obj)) {
+    // custom channel token is not provided, generate one.
+    // if channel token can't be generated, show a warning.
+    obj[`${key}Channel`] = (0, _system.private_safeColorChannel)(obj[key], `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+  }
+}
 const silent = fn => {
   try {
     return fn();
@@ -224,11 +231,12 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', (0, _system.private_safeDarken)((0, _system.private_safeAlpha)(palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', (0, _system.private_safeAlpha)(palette.grey[700], 0.92));
     }
-    setColor(palette.background, 'defaultChannel', (0, _system.private_safeColorChannel)(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
 
-    setColor(palette.common, 'backgroundChannel', (0, _system.private_safeColorChannel)(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-    setColor(palette.common, 'onBackgroundChannel', (0, _system.private_safeColorChannel)(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-    setColor(palette, 'dividerChannel', (0, _system.private_safeColorChannel)(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    // MUI X - DataGrid needs this token.
+    setColorChannel(palette.background, 'default');
+    setColorChannel(palette.common, 'background');
+    setColorChannel(palette.common, 'onBackground');
+    setColorChannel(palette, 'divider');
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
@@ -250,16 +258,16 @@ function extendTheme(options = {}, ...args) {
         }
         if (color === 'text') {
           // Text colors: text.primary, text.secondary
-          setColor(palette[color], 'primaryChannel', (0, _system.private_safeColorChannel)(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-          setColor(palette[color], 'secondaryChannel', (0, _system.private_safeColorChannel)(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          setColorChannel(palette[color], 'primary');
+          setColorChannel(palette[color], 'secondary');
         }
         if (color === 'action') {
           // Action colors: action.active, action.selected
           if (colors.active) {
-            setColor(palette[color], 'activeChannel', (0, _system.private_safeColorChannel)(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'active');
           }
           if (colors.selected) {
-            setColor(palette[color], 'selectedChannel', (0, _system.private_safeColorChannel)(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'selected');
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.4",
+  "version": "5.11.6",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
-    "@mui/base": "5.0.0-alpha.113",
-    "@mui/core-downloads-tracker": "^5.11.4",
-    "@mui/system": "^5.11.4",
+    "@mui/base": "5.0.0-alpha.115",
+    "@mui/core-downloads-tracker": "^5.11.6",
+    "@mui/system": "^5.11.5",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.2",
     "@types/react-transition-group": "^4.4.5",

package/styles/experimental_extendTheme.js

@@ -25,6 +25,13 @@ function setColor(obj, key, defaultValue) {
     obj[key] = defaultValue;
   }
 }
+function setColorChannel(obj, key) {
+  if (!(`${key}Channel` in obj)) {
+    // custom channel token is not provided, generate one.
+    // if channel token can't be generated, show a warning.
+    obj[`${key}Channel`] = safeColorChannel(obj[key], `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+  }
+}
 const silent = fn => {
   try {
     return fn();
@@ -215,11 +222,12 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
     }
-    setColor(palette.background, 'defaultChannel', safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
 
-    setColor(palette.common, 'backgroundChannel', safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-    setColor(palette.common, 'onBackgroundChannel', safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-    setColor(palette, 'dividerChannel', safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    // MUI X - DataGrid needs this token.
+    setColorChannel(palette.background, 'default');
+    setColorChannel(palette.common, 'background');
+    setColorChannel(palette.common, 'onBackground');
+    setColorChannel(palette, 'divider');
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
@@ -241,16 +249,16 @@ export default function extendTheme(options = {}, ...args) {
         }
         if (color === 'text') {
           // Text colors: text.primary, text.secondary
-          setColor(palette[color], 'primaryChannel', safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-          setColor(palette[color], 'secondaryChannel', safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          setColorChannel(palette[color], 'primary');
+          setColorChannel(palette[color], 'secondary');
         }
         if (color === 'action') {
           // Action colors: action.active, action.selected
           if (colors.active) {
-            setColor(palette[color], 'activeChannel', safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'active');
           }
           if (colors.selected) {
-            setColor(palette[color], 'selectedChannel', safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'selected');
           }
         }
       }