@mui/docs 7.0.0-alpha.0 → 7.0.0-alpha.1

package/branding/index.d.ts

@@ -1,2 +1,2 @@
-export * from './brandingTheme';
-export * from './BrandingProvider';
+export * from "./brandingTheme.js";
+export * from "./BrandingProvider.js";

package/branding/index.js

@@ -1,2 +1,27 @@
-export * from "./brandingTheme.js";
-export * from "./BrandingProvider.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _brandingTheme = require("./brandingTheme");
+Object.keys(_brandingTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _brandingTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _brandingTheme[key];
+    }
+  });
+});
+var _BrandingProvider = require("./BrandingProvider");
+Object.keys(_BrandingProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BrandingProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BrandingProvider[key];
+    }
+  });
+});

package/esm/Ad/Ad.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const AD_MARGIN_TOP = 3;
+export declare const AD_MARGIN_BOTTOM = 3;
+export declare const AD_HEIGHT = 126;
+export declare const AD_HEIGHT_MOBILE: number;
+export declare function Ad(): React.JSX.Element;

package/{node → esm}/Ad/Ad.js

@@ -1,26 +1,17 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AD_MARGIN_TOP = exports.AD_MARGIN_BOTTOM = exports.AD_HEIGHT_MOBILE = exports.AD_HEIGHT = void 0;
-exports.Ad = Ad;
-var React = _interopRequireWildcard(require("react"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
-var _i18n = require("../i18n");
-var _AdCarbon2 = _interopRequireDefault(require("./AdCarbon"));
-var _AdInHouse = _interopRequireDefault(require("./AdInHouse"));
-var _AdManager = require("./AdManager");
-var _AdProvider = require("./AdProvider");
-var _jsxRuntime = require("react/jsx-runtime");
 var _span, _PleaseDisableAdblock, _AdCarbon;
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import { useTranslate } from "../i18n/index.js";
+import AdCarbon from "./AdCarbon.js";
+import AdInHouse from "./AdInHouse.js";
+import { AdContext, adShape } from "./AdManager.js";
+import { useAdConfig } from "./AdProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PleaseDisableAdblock() {
-  const t = (0, _i18n.useTranslate)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, {
+  const t = useTranslate();
+  return /*#__PURE__*/_jsxs(Paper, {
     component: "span",
     elevation: 0,
     sx: {
@@ -29,7 +20,7 @@ function PleaseDisableAdblock() {
       border: '2px solid',
       borderColor: 'primary.main'
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       component: "span",
       gutterBottom: true,
@@ -37,7 +28,7 @@ function PleaseDisableAdblock() {
         display: 'block'
       },
       children: t('likeMui')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       component: "span",
       gutterBottom: true,
@@ -45,13 +36,13 @@ function PleaseDisableAdblock() {
         display: 'block'
       },
       children: t('adblock')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    }), /*#__PURE__*/_jsxs(Typography, {
       variant: "body2",
       component: "span",
       sx: {
         display: 'block'
       },
-      children: [t('thanks'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [t('thanks'), ' ', /*#__PURE__*/_jsx("span", {
         role: "img",
         "aria-label": t('emojiLove'),
         children: "\u2764\uFE0F"
@@ -118,17 +109,17 @@ class AdErrorBoundary extends React.Component {
     return children;
   }
 }
-const AD_MARGIN_TOP = exports.AD_MARGIN_TOP = 3;
-const AD_MARGIN_BOTTOM = exports.AD_MARGIN_BOTTOM = 3;
-const AD_HEIGHT = exports.AD_HEIGHT = 126;
+export const AD_MARGIN_TOP = 3;
+export const AD_MARGIN_BOTTOM = 3;
+export const AD_HEIGHT = 126;
 // Add more height on mobile as the text tends to wrap beyond the image height.
-const AD_HEIGHT_MOBILE = exports.AD_HEIGHT_MOBILE = 126 + 16;
+export const AD_HEIGHT_MOBILE = 126 + 16;
 
 // https://stackoverflow.com/a/20084661
 function isBot() {
   return /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
 }
-function Ad() {
+export function Ad() {
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
   const {
@@ -141,28 +132,28 @@ function Ad() {
   let label;
   // Hide the content to google bot to avoid its indexation.
   if (typeof window !== 'undefined' && isBot() || disableAd) {
-    children = _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}));
+    children = _span || (_span = /*#__PURE__*/_jsx("span", {}));
   } else if (adblock) {
     if (randomAdblock < 0.2) {
-      children = _PleaseDisableAdblock || (_PleaseDisableAdblock = /*#__PURE__*/(0, _jsxRuntime.jsx)(PleaseDisableAdblock, {}));
+      children = _PleaseDisableAdblock || (_PleaseDisableAdblock = /*#__PURE__*/_jsx(PleaseDisableAdblock, {}));
       label = 'in-house-adblock';
     } else {
-      children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdInHouse.default, {
+      children = /*#__PURE__*/_jsx(AdInHouse, {
         ad: inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]
       });
       label = 'in-house';
     }
   } else if (carbonOut) {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdInHouse.default, {
+    children = /*#__PURE__*/_jsx(AdInHouse, {
       ad: inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]
     });
     label = 'in-house-carbon';
   } else {
-    children = _AdCarbon || (_AdCarbon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdCarbon2.default, {}));
+    children = _AdCarbon || (_AdCarbon = /*#__PURE__*/_jsx(AdCarbon, {}));
     label = 'carbon';
   }
-  const ad = React.useContext(_AdManager.AdContext);
-  const eventLabel = label ? `${label}-${ad.placement}-${_AdManager.adShape}` : null;
+  const ad = React.useContext(AdContext);
+  const eventLabel = label ? `${label}-${ad.placement}-${adShape}` : null;
   const timerAdblock = React.useRef(undefined);
   const checkAdblock = React.useCallback((attempt = 1) => {
     if (document.querySelector('.ea-placement') || document.querySelector('#carbonads') || document.querySelector('.carbonads') || carbonOut) {
@@ -192,7 +183,7 @@ function Ad() {
   }, [checkAdblock]);
   const {
     GADisplayRatio
-  } = (0, _AdProvider.useAdConfig)();
+  } = useAdConfig();
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
     if (Math.random() > (GADisplayRatio ?? 0.1) || !eventLabel) {
@@ -208,7 +199,7 @@ function Ad() {
       clearTimeout(delay);
     };
   }, [GADisplayRatio, eventLabel]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  return /*#__PURE__*/_jsx(Box, {
     component: "span",
     sx: theme => ({
       position: 'relative',
@@ -219,8 +210,8 @@ function Ad() {
       [theme.breakpoints.up('sm')]: {
         minHeight: AD_HEIGHT
       },
-      ...(_AdManager.adShape === 'image' && {}),
-      ...(_AdManager.adShape === 'inline' && {
+      ...(adShape === 'image' && {}),
+      ...(adShape === 'inline' && {
         display: 'flex',
         alignItems: 'flex-end'
       })
@@ -228,7 +219,7 @@ function Ad() {
     "data-ga-event-category": "ad",
     "data-ga-event-action": "click",
     "data-ga-event-label": eventLabel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AdErrorBoundary, {
+    children: /*#__PURE__*/_jsx(AdErrorBoundary, {
       eventLabel: eventLabel,
       children: children
     })

package/esm/Ad/AdCarbon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function AdCarbonInline(): React.JSX.Element;
+export default function AdCarbon(): React.JSX.Element;

package/{node → esm}/Ad/AdCarbon.js

@@ -1,23 +1,14 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AdCarbonInline = AdCarbonInline;
-exports.default = AdCarbon;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _loadScript = _interopRequireDefault(require("../utils/loadScript"));
-var _AdDisplay = _interopRequireDefault(require("./AdDisplay"));
-var _ad = require("./ad.styles");
-var _jsxRuntime = require("react/jsx-runtime");
 var _AdCarbonImage;
-const CarbonRoot = (0, _styles.styled)('span')(({
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import loadScript from "../utils/loadScript.js";
+import AdDisplay from "./AdDisplay.js";
+import { adBodyImageStyles } from "./ad.styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CarbonRoot = styled('span')(({
   theme
 }) => {
-  const styles = (0, _ad.adBodyImageStyles)(theme);
+  const styles = adBodyImageStyles(theme);
   return {
     width: '100%',
     '& > div': {
@@ -47,18 +38,22 @@ function AdCarbonImage() {
     //
     // To solve the issue, for example StrictModel double effect execution, we debounce the load action.
     const load = setTimeout(() => {
-      const script = (0, _loadScript.default)('https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom', ref.current);
+      // The DOM node could have unmounted at this point.
+      if (!ref.current) {
+        return;
+      }
+      const script = loadScript('https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom', ref.current);
       script.id = '_carbonads_js';
     });
     return () => {
       clearTimeout(load);
     };
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarbonRoot, {
+  return /*#__PURE__*/_jsx(CarbonRoot, {
     ref: ref
   });
 }
-function AdCarbonInline() {
+export function AdCarbonInline() {
   const [ad, setAd] = React.useState(null);
   React.useEffect(() => {
     let active = true;
@@ -93,20 +88,20 @@ function AdCarbonInline() {
       active = false;
     };
   }, []);
-  return ad ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+  return ad ? /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("img", {
       src: ad.statimp,
       alt: "",
       style: {
         display: 'none'
       }
-    }), ad.pixel && ad.pixel.split('||').map((pixel, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    }), ad.pixel && ad.pixel.split('||').map((pixel, i) => /*#__PURE__*/_jsx("img", {
       src: `${pixel.replace('[timestamp]', ad.timestamp)}`,
       style: {
         display: 'none'
       },
       alt: ""
-    }, i)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdDisplay.default, {
+    }, i)), /*#__PURE__*/_jsx(AdDisplay, {
       className: "carbonads",
       shape: "inline",
       ad: {
@@ -118,12 +113,12 @@ function AdCarbonInline() {
         label: 'carbon-demo-inline'
       }
     })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  }) : /*#__PURE__*/_jsx("div", {
     style: {
       minHeight: 52
     }
   });
 }
-function AdCarbon() {
-  return _AdCarbonImage || (_AdCarbonImage = /*#__PURE__*/(0, _jsxRuntime.jsx)(AdCarbonImage, {}));
+export default function AdCarbon() {
+  return _AdCarbonImage || (_AdCarbonImage = /*#__PURE__*/_jsx(AdCarbonImage, {}));
 }

package/esm/Ad/AdDisplay.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface AdParameters {
+  name: string;
+  link: string;
+  img?: string;
+  description: string;
+  poweredby: string;
+  label: string;
+}
+interface AdDisplayProps {
+  ad: AdParameters;
+  className?: string;
+  shape?: 'auto' | 'inline' | 'image';
+}
+export default function AdDisplay(props: AdDisplayProps): React.JSX.Element;
+export {};

package/{node → esm}/Ad/AdDisplay.js

@@ -1,21 +1,14 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = AdDisplay;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _i18n = require("../i18n");
-var _AdManager = require("./AdManager");
-var _ad = require("./ad.styles");
-var _AdProvider = require("./AdProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-const InlineShape = (0, _styles.styled)('span')(({
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useTranslate } from "../i18n/index.js";
+import { adShape } from "./AdManager.js";
+import { adBodyImageStyles, adBodyInlineStyles } from "./ad.styles.js";
+import { useAdConfig } from "./AdProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const InlineShape = styled('span')(({
   theme
 }) => {
-  const styles = (0, _ad.adBodyInlineStyles)(theme);
+  const styles = adBodyInlineStyles(theme);
   return {
     ...styles.root,
     '& img': styles.img,
@@ -25,10 +18,10 @@ const InlineShape = (0, _styles.styled)('span')(({
     '& .AdDisplay-poweredby': styles.poweredby
   };
 });
-const ImageShape = (0, _styles.styled)('span')(({
+const ImageShape = styled('span')(({
   theme
 }) => {
-  const styles = (0, _ad.adBodyImageStyles)(theme);
+  const styles = adBodyImageStyles(theme);
   return {
     ...styles.root,
     '& img': styles.img,
@@ -38,16 +31,16 @@ const ImageShape = (0, _styles.styled)('span')(({
     '& .AdDisplay-poweredby': styles.poweredby
   };
 });
-function AdDisplay(props) {
+export default function AdDisplay(props) {
   const {
     ad,
     className,
     shape: shapeProp = 'auto'
   } = props;
-  const t = (0, _i18n.useTranslate)();
+  const t = useTranslate();
   const {
     GADisplayRatio
-  } = (0, _AdProvider.useAdConfig)();
+  } = useAdConfig();
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
     if (Math.random() > (GADisplayRatio ?? 0.1) || !ad.label) {
@@ -58,13 +51,13 @@ function AdDisplay(props) {
       eventLabel: ad.label
     });
   }, [GADisplayRatio, ad.label]);
-  const shape = shapeProp === 'auto' ? _AdManager.adShape : shapeProp;
+  const shape = shapeProp === 'auto' ? adShape : shapeProp;
   const Root = shape === 'image' ? ImageShape : InlineShape;
 
   /* eslint-disable react/no-danger */
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+  return /*#__PURE__*/_jsxs(Root, {
     className: className,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+    children: [/*#__PURE__*/_jsxs("a", {
       href: ad.link,
       target: "_blank",
       rel: "noopener sponsored",
@@ -73,21 +66,21 @@ function AdDisplay(props) {
         'data-ga-event-action': 'click',
         'data-ga-event-label': ad.label
       } : {}),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [/*#__PURE__*/_jsx("span", {
         className: "AdDisplay-imageWrapper",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        children: /*#__PURE__*/_jsx("img", {
           height: "100",
           width: "130",
           src: ad.img,
           alt: ad.name
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      }), /*#__PURE__*/_jsx("span", {
         className: "AdDisplay-description",
         dangerouslySetInnerHTML: {
           __html: ad.description
         }
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), /*#__PURE__*/_jsx("span", {
       className: "AdDisplay-poweredby",
       children: t('adPublisher').replace('{{publisher}}', ad.poweredby)
     })]

package/esm/Ad/AdGuest.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface AdGuestProps {
+  /**
+   * The querySelector use to target the element which will include the ad.
+   */
+  classSelector?: string;
+  children?: React.ReactNode | undefined;
+}
+declare function AdGuest(props: AdGuestProps): React.JSX.Element | null;
+export { AdGuest };

package/esm/Ad/AdGuest.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Portal from '@mui/material/Portal';
+import { AdContext } from "./AdManager.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function AdGuest(props) {
+  const {
+    classSelector = '.description',
+    children
+  } = props;
+  const ad = React.useContext(AdContext);
+  if (!ad.element) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Portal, {
+    container: () => {
+      const element = document.querySelector(classSelector);
+      if (element) {
+        if (ad.element === element) {
+          element.classList.add('ad');
+        } else {
+          element.classList.remove('ad');
+        }
+      }
+      return ad.element;
+    },
+    children: children
+  });
+}
+export { AdGuest };

package/esm/Ad/AdInHouse.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AdParameters } from "./AdDisplay.js";
+export default function AdInHouse(props: {
+  ad: Omit<AdParameters, 'poweredby' | 'label'>;
+}): React.JSX.Element;

package/esm/Ad/AdInHouse.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import AdDisplay from "./AdDisplay.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function AdInHouse(props) {
+  const {
+    ad
+  } = props;
+  return /*#__PURE__*/_jsx(AdDisplay, {
+    ad: {
+      poweredby: 'MUI',
+      label: `in-house-${ad.name}`,
+      ...ad
+    }
+  });
+}

package/esm/Ad/AdManager.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+type AdPortal = {
+  placement: 'body-top';
+  element: Element | null;
+};
+interface AdManagerProps {
+  /**
+   * The querySelector use to target the element which will include the ad.
+   */
+  classSelector?: string;
+  children?: React.ReactNode | undefined;
+}
+export declare const AdContext: React.Context<AdPortal>;
+export declare const adShape: string;
+export declare function AdManager({
+  classSelector,
+  children
+}: AdManagerProps): React.JSX.Element;
+export {};

package/esm/Ad/AdManager.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AdContext = /*#__PURE__*/React.createContext({
+  placement: 'body-top',
+  element: null
+});
+
+// Persisted for the whole session.
+// The state is used to use different ad placements.
+const randomSession = Math.random();
+
+// Distribution profile:
+// 20% body-inline
+// 80% body-image
+export const adShape = randomSession < 0.2 ? 'inline' : 'image';
+export function AdManager({
+  classSelector = '.description',
+  children
+}) {
+  const [portal, setPortal] = React.useState({
+    placement: 'body-top',
+    element: null
+  });
+  useEnhancedEffect(() => {
+    const container = document.querySelector(classSelector);
+    setPortal({
+      placement: 'body-top',
+      element: container
+    });
+  }, [classSelector]);
+  return /*#__PURE__*/_jsx(AdContext.Provider, {
+    value: portal,
+    children: children
+  });
+}

package/esm/Ad/AdProvider.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface AdConfig {
+  /**
+   * The ratio of "ad display" event sent to Google Analytics.
+   * Used to avoid an exceed on the Google Analytics quotas.
+   * @default 0.1
+   */
+  GADisplayRatio: number;
+}
+export interface AdProviderProps {
+  children: React.ReactNode;
+  config?: Partial<AdConfig>;
+}
+export declare function AdProvider(props: AdProviderProps): React.JSX.Element;
+export declare function useAdConfig(): AdConfig;

package/esm/Ad/AdProvider.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AdConfigContext = /*#__PURE__*/React.createContext(null);
+export function AdProvider(props) {
+  const {
+    children,
+    config
+  } = props;
+  const value = React.useMemo(() => ({
+    GADisplayRatio: 0.1,
+    ...config
+  }), [config]);
+  return /*#__PURE__*/_jsx(AdConfigContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useAdConfig() {
+  const config = React.useContext(AdConfigContext);
+  if (!config) {
+    throw new Error('Could not find docs ad config context value; please ensure the component is wrapped in a <AdProvider>');
+  }
+  return config;
+}