@tw1934/mui-material 7.3.7

package/esm/locale/viVN.js

@@ -0,0 +1,73 @@
+export const viVN = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Mở ra'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Tới trang đầu tiên';
+          }
+          if (type === 'last') {
+            return 'Tới trang cuối cùng';
+          }
+          if (type === 'next') {
+            return 'Tới trang tiếp theo';
+          }
+          // if (type === 'previous') {
+          return 'Về trang trước đó';
+        },
+        labelRowsPerPage: 'Số hàng mỗi trang:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} trong ${count !== -1 ? count : `nhiều hơn ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} sao`,
+        emptyLabelText: 'Không có dữ liệu'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Xóa',
+        closeText: 'Đóng',
+        loadingText: 'Đang tải…',
+        noOptionsText: 'Không có lựa chọn nào',
+        openText: 'Mở'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Đóng'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Thanh điều khiển trang',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Tới '}trang ${page}`;
+          }
+          if (type === 'first') {
+            return 'Tới trang đầu tiên';
+          }
+          if (type === 'last') {
+            return 'Tới trang cuối cùng';
+          }
+          if (type === 'next') {
+            return 'Tới trang tiếp theo';
+          }
+          // if (type === 'previous') {
+          return 'Về trang trước đó';
+        }
+      }
+    }
+  }
+};

package/esm/locale/zhCN.d.ts

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

package/esm/locale/zhCN.js

@@ -0,0 +1,51 @@
+export const zhCN = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: '展开'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return '第一页';
+          }
+          if (type === 'last') {
+            return '最后一页';
+          }
+          if (type === 'next') {
+            return '下一页';
+          }
+          return '上一页';
+        },
+        labelRowsPerPage: '每页行数:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `第 ${from} 条到第 ${to} 条，${count !== -1 ? `共 ${count} 条` : `至少 ${to} 条`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} 颗星`,
+        emptyLabelText: '无标签'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: '清空',
+        closeText: '关闭',
+        loadingText: '加载中……',
+        noOptionsText: '没有可用选项',
+        openText: '打开'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: '关闭'
+      }
+    }
+  }
+};

package/esm/locale/zhHK.d.ts

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

package/esm/locale/zhHK.js

@@ -0,0 +1,51 @@
+export const zhHK = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: '展開'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return '第一頁';
+          }
+          if (type === 'last') {
+            return '最後一頁';
+          }
+          if (type === 'next') {
+            return '下一頁';
+          }
+          return '上一頁';
+        },
+        labelRowsPerPage: '每頁行數:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `第 ${from} 項至第 ${to} 項，${count !== -1 ? `共 ${count} 項` : `超過 ${to} 項`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} 粒星`,
+        emptyLabelText: '無標籤'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: '清除',
+        closeText: '關閉',
+        loadingText: '載入中……',
+        noOptionsText: '沒有可用選項',
+        openText: '開啟'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: '關閉'
+      }
+    }
+  }
+};

package/esm/locale/zhTW.d.ts

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

package/esm/locale/zhTW.js

@@ -0,0 +1,51 @@
+export const zhTW = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: '展開'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return '第一頁';
+          }
+          if (type === 'last') {
+            return '最後一頁';
+          }
+          if (type === 'next') {
+            return '下一頁';
+          }
+          return '上一頁';
+        },
+        labelRowsPerPage: '每頁數量:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from} ~ ${to} / ${count !== -1 ? count : `${to} 以上`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} 顆星`,
+        emptyLabelText: '無標籤'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: '清空',
+        closeText: '關閉',
+        loadingText: '載入中…',
+        noOptionsText: '沒有可用選項',
+        openText: '打開'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: '關閉'
+      }
+    }
+  }
+};

package/esm/package.json

@@ -0,0 +1 @@
+{"type":"module","sideEffects":false}

package/esm/styles/ThemeProvider.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { DefaultTheme } from '@mui/system';
+import { StorageManager } from '@mui/system/cssVars';
+import { CssThemeVariables } from "./createThemeNoVars.js";
+type ThemeProviderCssVariablesProps = CssThemeVariables extends {
+  enabled: true;
+} ? {
+  /**
+   * The node for attaching the `theme.colorSchemeSelector`.
+   * @default document
+   */
+  colorSchemeNode?: Element | null;
+  /**
+   * If `true`, the provider creates its own context and generate stylesheet as if it is a root `ThemeProvider`.
+   */
+  disableNestedContext?: boolean;
+  /**
+   * If `true`, the style sheet for CSS theme variables won't be generated.
+   *
+   * This is useful for controlling nested ThemeProvider behavior.
+   * @default false
+   */
+  disableStyleSheetGeneration?: boolean;
+  /**
+   * If `true`, theme values are recalculated when the mode changes.
+   * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
+   * @default false
+   */
+  forceThemeRerender?: boolean;
+} : {};
+export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderCssVariablesProps {
+  children?: React.ReactNode;
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  /**
+   * The document used to perform `disableTransitionOnChange` feature
+   * @default document
+   */
+  documentNode?: Document | null;
+  /**
+   * The default mode when the local storage has no mode yet,
+   * requires the theme to have `colorSchemes` with light and dark.
+   * @default 'system'
+   */
+  defaultMode?: 'light' | 'dark' | 'system';
+  /**
+   * The window that attaches the 'storage' event listener
+   * @default window
+   */
+  storageWindow?: Window | null;
+  /**
+   * The storage manager to be used for storing the mode and color scheme
+   * @default using `window.localStorage`
+   */
+  storageManager?: StorageManager | null;
+  /**
+   * localStorage key used to store application `mode`
+   * @default 'mui-mode'
+   */
+  modeStorageKey?: string;
+  /**
+   * localStorage key used to store `colorScheme`
+   * @default 'mui-color-scheme'
+   */
+  colorSchemeStorageKey?: string;
+  noSsr?: boolean;
+  /**
+   * Disable CSS transitions when switching between modes or color schemes
+   * @default false
+   */
+  disableTransitionOnChange?: boolean;
+}
+export default function ThemeProvider<Theme = DefaultTheme>({
+  theme,
+  ...props
+}: ThemeProviderProps<Theme>): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/styles/ThemeProvider.js

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import ThemeProviderNoVars from "./ThemeProviderNoVars.js";
+import { CssVarsProvider } from "./ThemeProviderWithVars.js";
+import THEME_ID from "./identifier.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ThemeProvider({
+  theme,
+  ...props
+}) {
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
+    if (!('colorSchemes' in muiTheme)) {
+      if (!('vars' in muiTheme)) {
+        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+        return {
+          ...theme,
+          vars: null
+        };
+      }
+      return theme;
+    }
+    return null;
+  }, [theme]);
+  if (noVarsTheme) {
+    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
+      theme: noVarsTheme,
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(CssVarsProvider, {
+    theme: theme,
+    ...props
+  });
+}

package/esm/styles/ThemeProviderNoVars.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { DefaultTheme } from '@mui/system';
+export interface ThemeProviderNoVarsProps<Theme = DefaultTheme> {
+  children?: React.ReactNode;
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+export default function ThemeProviderNoVars<Theme = DefaultTheme>({
+  theme: themeInput,
+  ...props
+}: ThemeProviderNoVarsProps<Theme>): React.ReactElement<ThemeProviderNoVarsProps<Theme>>;

package/esm/styles/ThemeProviderNoVars.js

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as SystemThemeProvider } from '@mui/system';
+import THEME_ID from "./identifier.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ThemeProviderNoVars({
+  theme: themeInput,
+  ...props
+}) {
+  const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
+  return /*#__PURE__*/_jsx(SystemThemeProvider, {
+    ...props,
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  });
+}

package/esm/styles/ThemeProviderWithVars.d.ts

@@ -0,0 +1,50 @@
+import { SupportedColorScheme } from "./createThemeWithVars.js";
+declare const useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, deprecatedGetInitColorSchemeScript: typeof import("@mui/system/InitColorSchemeScript").default;
+declare function Experimental_CssVarsProvider(props: any): import("react/jsx-runtime").JSX.Element;
+declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript;
+/**
+ * TODO: remove this export in v7
+ * @deprecated
+ * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
+ *
+ * You should use `ThemeProvider` and `createTheme()` instead:
+ *
+ * ```diff
+ * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
+ * + import { ThemeProvider, createTheme } from '@mui/material/styles';
+ *
+ * - const theme = extendTheme();
+ * + const theme = createTheme({
+ * +   cssVariables: true,
+ * +   colorSchemes: { light: true, dark: true },
+ * + });
+ *
+ * - <CssVarsProvider theme={theme}>
+ * + <ThemeProvider theme={theme}>
+ * ```
+ *
+ * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
+ */
+export declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+  theme?: {
+    cssVariables?: false;
+    cssVarPrefix?: string;
+    colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+    colorSchemeSelector?: "media" | "class" | "data" | string;
+  } | {
+    $$material: {
+      cssVariables?: false;
+      cssVarPrefix?: string;
+      colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+      colorSchemeSelector?: "media" | "class" | "data" | string;
+    };
+  } | undefined;
+  defaultMode?: "light" | "dark" | "system";
+  documentNode?: Document | null;
+  colorSchemeNode?: Element | null;
+  storageManager?: import("@mui/system").StorageManager | null;
+  storageWindow?: Window | null;
+  disableNestedContext?: boolean;
+  disableStyleSheetGeneration?: boolean;
+}>) => React.JSX.Element;
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/esm/styles/ThemeProviderWithVars.js

@@ -0,0 +1,90 @@
+'use client';
+
+import styleFunctionSx from '@mui/system/styleFunctionSx';
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import createTheme from "./createTheme.js";
+import createTypography from "./createTypography.js";
+import THEME_ID from "./identifier.js";
+import { defaultConfig } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  CssVarsProvider: InternalCssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
+} = createCssVarsProvider({
+  themeId: THEME_ID,
+  // @ts-ignore ignore module augmentation tests
+  theme: () => createTheme({
+    cssVariables: true
+  }),
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
+  defaultColorScheme: {
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme
+  },
+  resolveTheme: theme => {
+    const newTheme = {
+      ...theme,
+      typography: createTypography(theme.palette, theme.typography)
+    };
+    newTheme.unstable_sx = function sx(props) {
+      return styleFunctionSx({
+        sx: props,
+        theme: this
+      });
+    };
+    return newTheme;
+  }
+});
+let warnedOnce = false;
+
+// TODO: remove in v7
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Experimental_CssVarsProvider(props) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce) {
+      console.warn(['MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.', '', "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.", 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/'].join('\n'));
+      warnedOnce = true;
+    }
+  }
+  return /*#__PURE__*/_jsx(InternalCssVarsProvider, {
+    ...props
+  });
+}
+let warnedInitScriptOnce = false;
+
+// TODO: remove in v7
+const getInitColorSchemeScript = params => {
+  if (!warnedInitScriptOnce) {
+    console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+
+/**
+ * TODO: remove this export in v7
+ * @deprecated
+ * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
+ *
+ * You should use `ThemeProvider` and `createTheme()` instead:
+ *
+ * ```diff
+ * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
+ * + import { ThemeProvider, createTheme } from '@mui/material/styles';
+ *
+ * - const theme = extendTheme();
+ * + const theme = createTheme({
+ * +   cssVariables: true,
+ * +   colorSchemes: { light: true, dark: true },
+ * + });
+ *
+ * - <CssVarsProvider theme={theme}>
+ * + <ThemeProvider theme={theme}>
+ * ```
+ *
+ * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
+ */
+export const CssVarsProvider = InternalCssVarsProvider;
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/esm/styles/adaptV4Theme.d.ts

@@ -0,0 +1,36 @@
+import { BreakpointsOptions, ShapeOptions, SpacingOptions } from '@mui/system';
+import { MixinsOptions } from "./createMixins.js";
+import { Palette, PaletteOptions } from "./createPalette.js";
+import { TypographyVariantsOptions } from "./createTypography.js";
+import { Shadows } from "./shadows.js";
+import { TransitionsOptions } from "./createTransitions.js";
+import { ZIndexOptions } from "./zIndex.js";
+import { ComponentsOverrides } from "./overrides.js";
+import { ComponentsVariants } from "./variants.js";
+import { ComponentsProps } from "./props.js";
+import { Theme } from "./createTheme.js";
+export type Direction = 'ltr' | 'rtl';
+export interface DeprecatedThemeOptions {
+  shape?: ShapeOptions;
+  breakpoints?: BreakpointsOptions;
+  direction?: Direction;
+  mixins?: MixinsOptions;
+  overrides?: ComponentsOverrides;
+  palette?: PaletteOptions;
+  props?: ComponentsProps;
+  shadows?: Shadows;
+  spacing?: SpacingOptions;
+  transitions?: TransitionsOptions;
+  typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions);
+  variants?: ComponentsVariants;
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+}
+
+/**
+ * Generate a theme base on the V4 theme options received.
+ * @deprecated Follow the upgrade guide on https://mui.com/r/migration-v4#theme
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function adaptV4Theme(options?: DeprecatedThemeOptions): Theme;

package/esm/styles/adaptV4Theme.js

@@ -0,0 +1,83 @@
+'use client';
+
+import { createBreakpoints, createSpacing } from '@mui/system';
+export default function adaptV4Theme(inputTheme) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
+  }
+  const {
+    defaultProps = {},
+    mixins = {},
+    overrides = {},
+    palette = {},
+    props = {},
+    styleOverrides = {},
+    ...other
+  } = inputTheme;
+  const theme = {
+    ...other,
+    components: {}
+  };
+
+  // default props
+  Object.keys(defaultProps).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.defaultProps = defaultProps[component];
+    theme.components[component] = componentValue;
+  });
+  Object.keys(props).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.defaultProps = props[component];
+    theme.components[component] = componentValue;
+  });
+
+  // CSS overrides
+  Object.keys(styleOverrides).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.styleOverrides = styleOverrides[component];
+    theme.components[component] = componentValue;
+  });
+  Object.keys(overrides).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.styleOverrides = overrides[component];
+    theme.components[component] = componentValue;
+  });
+
+  // theme.spacing
+  theme.spacing = createSpacing(inputTheme.spacing);
+
+  // theme.mixins.gutters
+  const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
+  const spacing = theme.spacing;
+  theme.mixins = {
+    gutters: (styles = {}) => {
+      return {
+        paddingLeft: spacing(2),
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
+          paddingLeft: spacing(3),
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')]
+        }
+      };
+    },
+    ...mixins
+  };
+  const {
+    type: typeInput,
+    mode: modeInput,
+    ...paletteRest
+  } = palette;
+  const finalMode = modeInput || typeInput || 'light';
+  theme.palette = {
+    // theme.palette.text.hint
+    text: {
+      hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
+    },
+    mode: finalMode,
+    type: finalMode,
+    ...paletteRest
+  };
+  return theme;
+}