@mui/material 7.3.2 → 7.3.3

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.3
+
+<!-- generated comparing v7.3.2..master -->
+
+_Sep 30, 2025_
+
+A big thanks to the 14 contributors who made this release possible.
+
+### `@mui/material@7.3.3`
+
+- [Autocomplete] Sync highlighted index when popup is opened (#46894) @ZeeshanTamboli
+- [CircularProgress] Add track slot via enableTrackSlot (#46907) @monam2
+- [locale] Split locales into separate files (#46933) @christopherschroer
+- [Tabs] Fix not scrolling to correct tab after refresh when auto scrollable (#46869) @Jayesh-11
+
+### Docs
+
+- Add a guide for building extensible themes (#46896) @siriwatknp
+- Add v7 community course to resources page (#46944) @alelthomas
+- Improve performance of Default Theme Viewer (#46841) @sai6855
+- Fix typo in blog component MainContent (#46868) @jonyen
+- [Steppers] Replace TransitionProps with slotProps.transition (#46898) @sai6855
+
+### Core
+
+- [blog] Fix year in Punta Cana retreat post (#46943) @mapache-salvaje
+- [blog] Punta Cana retreat post (#46892) @mapache-salvaje
+- [code-infra] Publish from CI (#46851) @Janpot
+- [code-infra] Convert reportBrokenLink script to ts (#47002) @brijeshb42
+- [code-infra] Update module resolution for typescript@next (#46940) @Janpot
+- [code-infra] Run continuous releases during ci-check (#46948) @Janpot
+- [code-infra] Fix github actions check for continuous release (#46941) @Janpot
+- [code-infra] Address high/critical dependabot reports (#46937) @Janpot
+- [code-infra] Update ci.yml triggers (#46860) @Janpot
+- [code-infra] Exact match for renovate file name (#46916) @Janpot
+- [code-infra] Disable dependency update for `@material-ui/core` in codemod (#46899) @Janpot
+- [code-infra] Transpile `assertion-error` in karma tests (#46909) @Janpot
+- [code-infra] Disable browserstack on circleci cron jobs (#46905) @Janpot
+- [code-infra] Remove `copy-files` command usage from packages (#46902) @brijeshb42
+- [code-infra] Low-hanging ts conversion (#46903) @Janpot
+- [code-infra] Bring batch of changes from vitest PR (#46795) @Janpot
+- [code-infra] Remove dependency on `fs-extra` (#46755) @bernardobelchior
+- [code-infra] Make error code extraction independent of build (#46865) @brijeshb42
+- [docs-infra] Fix markdown generation script to find correct files (#46954) @siriwatknp
+- [docs-infra] Fix unnecessary redirects (#46951) @Janpot
+- [docs-infra] Remove `dangerouslySetInnerHTML` for ad description (#46936) @Janpot
+- [docs-infra] Display "View as Markdown" only on Material UI (#46861) @siriwatknp
+- [infra] Fix JSON files not being imported in TS demos (#47000) @bernardobelchior
+- [infra] Turn `literal | (string & {})` to `PropTypes.string` (#46934) @siriwatknp
+- [infra] Bump node.js version and make local usage strict (#46834) @brijeshb42
+- [infra] Remove "main" fields from publishable packages (#46856) @brijeshb42
+- [internal] Refactor `useForkRef` TS types: tighten `cleanupRef` and simplify ref typing (#46967) @wo-o29
+- [internal] Fix naming to match convention (2099cb0) @oliviertassinari
+- [internal] Fix naming to match convention (29aad62) @oliviertassinari
+- [internal] Use same option as other repositories (eabda77) @oliviertassinari
+- [internal] Normalize <meta name='viewport' (9d1922a) @oliviertassinari
+- [internal] Normalize charset='utf-8' (f1aae00) @oliviertassinari
+- [test] Split infinitive (0237fda) @oliviertassinari
+
+All contributors of this release in alphabetical order: @alelthomas, @bernardobelchior, @brijeshb42, @christopherschroer, @Janpot, @Jayesh-11, @jonyen, @mapache-salvaje, @monam2, @oliviertassinari, @sai6855, @siriwatknp, @wo-o29, @ZeeshanTamboli
+
 ## 7.3.2
 
 <!-- generated comparing v7.3.1..master -->

package/CircularProgress/CircularProgress.d.ts

@@ -24,6 +24,12 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   disableShrink?: boolean;
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot?: boolean;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.

package/CircularProgress/CircularProgress.js

@@ -65,6 +65,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `color${(0, _capitalize.default)(color)}`],
     svg: ['svg'],
+    track: ['track'],
     circle: ['circle', `circle${(0, _capitalize.default)(variant)}`, disableShrink && 'circleDisableShrink']
   };
   return (0, _composeClasses.default)(slots, _circularProgressClasses.getCircularProgressUtilityClass, classes);
@@ -150,6 +151,15 @@ const CircularProgressCircle = (0, _zeroStyled.styled)('circle', {
     }
   }]
 })));
+const CircularProgressTrack = (0, _zeroStyled.styled)('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Track'
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  opacity: (theme.vars || theme).palette.action.activatedOpacity
+})));
 
 /**
  * ## ARIA
@@ -167,6 +177,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     className,
     color = 'primary',
     disableShrink = false,
+    enableTrackSlot = false,
     size = 40,
     style,
     thickness = 3.6,
@@ -181,7 +192,8 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     size,
     thickness,
     value,
-    variant
+    variant,
+    enableTrackSlot
   };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
@@ -207,11 +219,20 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressSVG, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressCircle, {
+      children: [enableTrackSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressTrack, {
+        className: classes.track,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        "aria-hidden": "true"
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState: ownerState,
@@ -220,7 +241,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         r: (SIZE - thickness) / 2,
         fill: "none",
         strokeWidth: thickness
-      })
+      })]
     })
   });
 });
@@ -255,6 +276,12 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
     }
     return null;
   }),
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot: _propTypes.default.bool,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.

package/CircularProgress/circularProgressClasses.d.ts

@@ -11,6 +11,8 @@ export interface CircularProgressClasses {
   colorSecondary: string;
   /** Styles applied to the svg element. */
   svg: string;
+  /** Styles applied to the track slot if `enableTrackSlot={true}`. */
+  track: string;
   /** Styles applied to the `circle` svg path. */
   circle: string;
   /** Styles applied to the `circle` svg path if `variant="determinate"`.

package/CircularProgress/circularProgressClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getCircularProgressUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiCircularProgress', slot);
 }
-const circularProgressClasses = (0, _generateUtilityClasses.default)('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+const circularProgressClasses = (0, _generateUtilityClasses.default)('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'track', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 var _default = exports.default = circularProgressClasses;

package/Divider/Divider.js

@@ -301,7 +301,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  role: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  role: _propTypes.default.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/MenuItem/MenuItem.js

@@ -272,7 +272,7 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
   /**
    * @ignore
    */
-  role: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  role: _propTypes.default.string,
   /**
    * If `true`, the component is selected.
    * @default false

package/SnackbarContent/SnackbarContent.js

@@ -124,7 +124,7 @@ process.env.NODE_ENV !== "production" ? SnackbarContent.propTypes /* remove-prop
    * The ARIA role attribute of the element.
    * @default 'alert'
    */
-  role: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  role: _propTypes.default.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Tabs/Tabs.js

@@ -645,6 +645,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
+  React.useEffect(() => {
+    if (scrollable && scrollButtons === 'auto' && (displayEndScroll || displayStartScroll)) {
+      scrollSelectedIntoView(true);
+    }
+  }, [displayEndScroll, displayStartScroll, scrollable, scrollButtons, scrollSelectedIntoView]);
   React.useEffect(() => {
     setMounted(true);
   }, []);

package/TextField/TextField.js

@@ -449,7 +449,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    */
-  type: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  type: _propTypes.default.string,
   /**
    * The value of the `input` element, required for a controlled component.
    */

package/esm/CircularProgress/CircularProgress.d.ts

@@ -24,6 +24,12 @@ export interface CircularProgressProps extends StandardProps<React.HTMLAttribute
    * @default false
    */
   disableShrink?: boolean;
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot?: boolean;
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.

package/esm/CircularProgress/CircularProgress.js

@@ -11,7 +11,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
   0% {
@@ -58,6 +58,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `color${capitalize(color)}`],
     svg: ['svg'],
+    track: ['track'],
     circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']
   };
   return composeClasses(slots, getCircularProgressUtilityClass, classes);
@@ -143,6 +144,15 @@ const CircularProgressCircle = styled('circle', {
     }
   }]
 })));
+const CircularProgressTrack = styled('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Track'
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  opacity: (theme.vars || theme).palette.action.activatedOpacity
+})));
 
 /**
  * ## ARIA
@@ -160,6 +170,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     className,
     color = 'primary',
     disableShrink = false,
+    enableTrackSlot = false,
     size = 40,
     style,
     thickness = 3.6,
@@ -174,7 +185,8 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     size,
     thickness,
     value,
-    variant
+    variant,
+    enableTrackSlot
   };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
@@ -200,11 +212,20 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /*#__PURE__*/_jsx(CircularProgressSVG, {
+    children: /*#__PURE__*/_jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /*#__PURE__*/_jsx(CircularProgressCircle, {
+      children: [enableTrackSlot ? /*#__PURE__*/_jsx(CircularProgressTrack, {
+        className: classes.track,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        "aria-hidden": "true"
+      }) : null, /*#__PURE__*/_jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState: ownerState,
@@ -213,7 +234,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         r: (SIZE - thickness) / 2,
         fill: "none",
         strokeWidth: thickness
-      })
+      })]
     })
   });
 });
@@ -248,6 +269,12 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
     }
     return null;
   }),
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot: PropTypes.bool,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.

package/esm/CircularProgress/circularProgressClasses.d.ts

@@ -11,6 +11,8 @@ export interface CircularProgressClasses {
   colorSecondary: string;
   /** Styles applied to the svg element. */
   svg: string;
+  /** Styles applied to the track slot if `enableTrackSlot={true}`. */
+  track: string;
   /** Styles applied to the `circle` svg path. */
   circle: string;
   /** Styles applied to the `circle` svg path if `variant="determinate"`.

package/esm/CircularProgress/circularProgressClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getCircularProgressUtilityClass(slot) {
   return generateUtilityClass('MuiCircularProgress', slot);
 }
-const circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+const circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'track', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 export default circularProgressClasses;

package/esm/Divider/Divider.js

@@ -294,7 +294,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/MenuItem/MenuItem.js

@@ -264,7 +264,7 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * If `true`, the component is selected.
    * @default false

package/esm/SnackbarContent/SnackbarContent.js

@@ -117,7 +117,7 @@ process.env.NODE_ENV !== "production" ? SnackbarContent.propTypes /* remove-prop
    * The ARIA role attribute of the element.
    * @default 'alert'
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Tabs/Tabs.js

@@ -638,6 +638,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     }
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
+  React.useEffect(() => {
+    if (scrollable && scrollButtons === 'auto' && (displayEndScroll || displayStartScroll)) {
+      scrollSelectedIntoView(true);
+    }
+  }, [displayEndScroll, displayStartScroll, scrollable, scrollButtons, scrollSelectedIntoView]);
   React.useEffect(() => {
     setMounted(true);
   }, []);

package/esm/TextField/TextField.js

@@ -442,7 +442,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    */
-  type: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  type: PropTypes.string,
   /**
    * The value of the `input` element, required for a controlled component.
    */

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.2
+ * @mui/material v7.3.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/locale/amET.d.ts

@@ -0,0 +1,2 @@
+import type { Localization } from "./utils/LocaleTextApi.js";
+export declare const amET: Localization;

package/esm/locale/amET.js

@@ -0,0 +1,73 @@
+export const amET = {
+  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 => `${value} ኮከ${value !== 1 ? 'ቦች' : 'ብ'}`,
+        emptyLabelText: 'ባዶ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'አጽዳ',
+        closeText: 'ዝጋ',
+        loadingText: 'በመጫን ላይ…',
+        noOptionsText: 'አማራጮች የሉም',
+        openText: 'ክፈት'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'ዝጋ'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'የገጽ አሰሳ',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'ወደ '}ገጽ ${page}${selected ? '' : ' ሂድ'}`;
+          }
+          if (type === 'first') {
+            return 'ወደ መጀመሪያው ገጽ ይሂዱ';
+          }
+          if (type === 'last') {
+            return 'ወደ መጨረሻው ገጽ ይሂዱ';
+          }
+          if (type === 'next') {
+            return 'ወደ ቀጣዩ ገጽ ይሂዱ';
+          }
+          // if (type === 'previous') {
+          return 'ወደ ቀዳሚው ገጽ ይሂዱ';
+        }
+      }
+    }
+  }
+};

package/esm/locale/arEG.d.ts

@@ -0,0 +1,2 @@
+import type { Localization } from "./utils/LocaleTextApi.js";
+export declare const arEG: Localization;

package/esm/locale/arEG.js

@@ -0,0 +1,73 @@
+export const arEG = {
+  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 => `${value} ${value !== 1 ? 'نجوم' : 'نجمة'}`,
+        emptyLabelText: 'فارغ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'مسح',
+        closeText: 'إغلاق',
+        loadingText: 'جار التحميل...',
+        noOptionsText: 'لا يوجد خيارات',
+        openText: 'فتح'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'إغلاق'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'التنقل عبر الصفحات',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
+          }
+          if (type === 'first') {
+            return 'انتقل إلى الصفحة الأولى';
+          }
+          if (type === 'last') {
+            return 'انتقل إلى الصفحة الأخيرة';
+          }
+          if (type === 'next') {
+            return 'انتقل إلى الصفحة التالية';
+          }
+          // if (type === 'previous') {
+          return 'انتقل إلى الصفحة السابقة';
+        }
+      }
+    }
+  }
+};

package/esm/locale/arSA.d.ts

@@ -0,0 +1,2 @@
+import type { Localization } from "./utils/LocaleTextApi.js";
+export declare const arSA: Localization;

package/esm/locale/arSA.js

@@ -0,0 +1,73 @@
+export const arSA = {
+  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 => `${value} ${value !== 1 ? 'نجوم' : 'نجمة'}`,
+        emptyLabelText: 'فارغ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'مسح',
+        closeText: 'إغلاق',
+        loadingText: 'جار التحميل...',
+        noOptionsText: 'لا توجد خيارات',
+        openText: 'فتح'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'إغلاق'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'التنقل عبر الصفحات',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'الانتقال إلى '} صفحة ${page}`;
+          }
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+          if (type === 'last') {
+            return 'الانتقال الي الصفحة الأخيرة';
+          }
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          }
+          // if (type === 'previous') {
+          return 'الانتقال إلى الصفحة السابقة';
+        }
+      }
+    }
+  }
+};

package/esm/locale/arSD.d.ts

@@ -0,0 +1,2 @@
+import type { Localization } from "./utils/LocaleTextApi.js";
+export declare const arSD: Localization;