@mui/docs 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/branding/index.js

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

package/i18n/i18n.d.ts

@@ -17,7 +17,8 @@ export declare function useSetUserLanguage(): React.Dispatch<React.SetStateActio
 export interface TranslateOptions {
     ignoreWarning?: boolean;
 }
-export declare function useTranslate(): (key: string, options?: TranslateOptions) => any;
+export type Translate = (key: string, options?: TranslateOptions) => any;
+export declare function useTranslate(): Translate;
 export type Translations = {
     [key in string]?: string | Translations;
 };

package/i18n/i18n.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
-import defaultTranslations from '../translations';
+import defaultTranslations from "../translations/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TranslationsContext = /*#__PURE__*/React.createContext(defaultTranslations);
 function TranslationsProvider({
@@ -19,7 +19,11 @@ function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
   }
-  return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+  const translation = path.split('.').reduce((acc, item) => acc && typeof acc === 'object' && acc[item] || null, obj);
+  if (typeof translation === 'object') {
+    return null;
+  }
+  return translation;
 }
 const UserLanguageContext = /*#__PURE__*/React.createContext({
   userLanguage: '',
@@ -60,6 +64,16 @@ export function useSetUserLanguage() {
   return React.useContext(UserLanguageContext).setUserLanguage;
 }
 const warnedOnce = {};
+
+// TODO, migrate to use warnOnce() helper
+const warn = (userLanguage, key, ignoreWarning) => {
+  const fullKey = `${userLanguage}:${key}`;
+  // No warnings in CI env
+  if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
+    console.warn(`Missing translation for ${fullKey}`);
+    warnedOnce[fullKey] = true;
+  }
+};
 export function useTranslate() {
   const userLanguage = useUserLanguage();
   const translations = React.useContext(TranslationsContext);
@@ -74,13 +88,9 @@ export function useTranslate() {
     }
     const translation = getPath(wordings, key);
     if (!translation) {
-      const fullKey = `${userLanguage}:${key}`;
-      // No warnings in CI env
-      if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
-        console.error(`Missing translation for ${fullKey}`);
-        warnedOnce[fullKey] = true;
-      }
-      return getPath(translations.en, key);
+      warn(userLanguage, key, ignoreWarning);
+      const enTranslation = getPath(translations.en, key);
+      return enTranslation ?? null;
     }
     return translation;
   }, [userLanguage, translations]);

package/i18n/index.js

@@ -1 +1 @@
-export * from './i18n';
+export * from "./i18n.js";

package/node/Ad/Ad.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function PleaseDisableAdblock() {
+  const t = (0, _i18n.useTranslate)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, {
+    component: "span",
+    elevation: 0,
+    sx: {
+      display: 'block',
+      p: 1.5,
+      border: '2px solid',
+      borderColor: 'primary.main'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "body2",
+      component: "span",
+      gutterBottom: true,
+      sx: {
+        display: 'block'
+      },
+      children: t('likeMui')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "body2",
+      component: "span",
+      gutterBottom: true,
+      sx: {
+        display: 'block'
+      },
+      children: t('adblock')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      variant: "body2",
+      component: "span",
+      sx: {
+        display: 'block'
+      },
+      children: [t('thanks'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        role: "img",
+        "aria-label": t('emojiLove'),
+        children: "\u2764\uFE0F"
+      })]
+    })]
+  });
+}
+const disableAd = process.env.NODE_ENV !== 'production' && process.env.ENABLE_AD_IN_DEV_MODE !== 'true';
+const inHouseAds = [{
+  name: 'scaffoldhub',
+  link: 'https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1',
+  img: '/static/ads-in-house/scaffoldhub.png',
+  description: '<b>ScaffoldHub</b>. Automate building your full-stack Material UI web-app.'
+}, {
+  name: 'templates',
+  link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-templates',
+  img: '/static/ads-in-house/themes-2.jpg',
+  description: '<b>Premium Templates</b>. Start your project with the best templates for admins, dashboards, and more.'
+}, {
+  name: 'themes',
+  link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-themes',
+  img: '/static/ads-in-house/themes.png',
+  description: '<b>Premium Themes</b>. Kickstart your application development with a ready-made theme.'
+}, {
+  name: 'tidelift',
+  link: 'https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
+  img: '/static/ads-in-house/tidelift.png',
+  description: '<b>MUI for enterprise</b>. Save time and reduce risk. Managed open source — backed by maintainers.'
+}, {
+  name: 'figma',
+  link: 'https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-figma',
+  img: '/static/ads-in-house/figma.png',
+  description: '<b>For Figma</b>. A large UI kit with over 600 handcrafted Material UI, MUI X, Joy UI components 🎨.'
+}];
+class AdErrorBoundary extends React.Component {
+  state = {
+    didError: false
+  };
+  static getDerivedStateFromError() {
+    return {
+      didError: true
+    };
+  }
+  componentDidCatch() {
+    // send explicit `'null'`
+    const eventLabel = String(this.props.eventLabel);
+    // TODO: Use proper error monitoring service (for example Sentry) instead
+
+    window.gtag('event', 'ad', {
+      eventAction: 'crash',
+      eventLabel
+    });
+  }
+  render() {
+    const {
+      didError
+    } = this.state;
+    const {
+      children
+    } = this.props;
+    if (didError) {
+      return null;
+    }
+    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;
+// 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;
+
+// https://stackoverflow.com/a/20084661
+function isBot() {
+  return /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
+}
+function Ad() {
+  const [adblock, setAdblock] = React.useState(null);
+  const [carbonOut, setCarbonOut] = React.useState(null);
+  const {
+    current: randomAdblock
+  } = React.useRef(Math.random());
+  const {
+    current: randomInHouse
+  } = React.useRef(Math.random());
+  let children;
+  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", {}));
+  } else if (adblock) {
+    if (randomAdblock < 0.2) {
+      children = _PleaseDisableAdblock || (_PleaseDisableAdblock = /*#__PURE__*/(0, _jsxRuntime.jsx)(PleaseDisableAdblock, {}));
+      label = 'in-house-adblock';
+    } else {
+      children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdInHouse.default, {
+        ad: inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]
+      });
+      label = 'in-house';
+    }
+  } else if (carbonOut) {
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdInHouse.default, {
+      ad: inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]
+    });
+    label = 'in-house-carbon';
+  } else {
+    children = _AdCarbon || (_AdCarbon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdCarbon2.default, {}));
+    label = 'carbon';
+  }
+  const ad = React.useContext(_AdManager.AdContext);
+  const eventLabel = label ? `${label}-${ad.placement}-${_AdManager.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) {
+      if (document.querySelector('#carbonads a') && document.querySelector('#carbonads a')?.getAttribute('href') === 'https://material-ui-next.com/discover-more/backers') {
+        setCarbonOut(true);
+      }
+      setAdblock(false);
+      return;
+    }
+    if (attempt < 30) {
+      timerAdblock.current = setTimeout(() => {
+        checkAdblock(attempt + 1);
+      }, 500);
+    }
+    if (attempt > 6) {
+      setAdblock(true);
+    }
+  }, [carbonOut]);
+  React.useEffect(() => {
+    if (disableAd) {
+      return undefined;
+    }
+    checkAdblock();
+    return () => {
+      clearTimeout(timerAdblock.current);
+    };
+  }, [checkAdblock]);
+  const {
+    GADisplayRatio
+  } = (0, _AdProvider.useAdConfig)();
+  React.useEffect(() => {
+    // Avoid an exceed on the Google Analytics quotas.
+    if (Math.random() > (GADisplayRatio ?? 0.1) || !eventLabel) {
+      return undefined;
+    }
+    const delay = setTimeout(() => {
+      window.gtag('event', 'ad', {
+        eventAction: 'display',
+        eventLabel
+      });
+    }, 2500);
+    return () => {
+      clearTimeout(delay);
+    };
+  }, [GADisplayRatio, eventLabel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    component: "span",
+    sx: theme => ({
+      position: 'relative',
+      display: 'block',
+      mt: AD_MARGIN_TOP,
+      mb: AD_MARGIN_BOTTOM,
+      minHeight: AD_HEIGHT_MOBILE,
+      [theme.breakpoints.up('sm')]: {
+        minHeight: AD_HEIGHT
+      },
+      ...(_AdManager.adShape === 'image' && {}),
+      ...(_AdManager.adShape === 'inline' && {
+        display: 'flex',
+        alignItems: 'flex-end'
+      })
+    }),
+    "data-ga-event-category": "ad",
+    "data-ga-event-action": "click",
+    "data-ga-event-label": eventLabel,
+    className: "Ad-root",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AdErrorBoundary, {
+      eventLabel: eventLabel,
+      children: children
+    })
+  });
+}

package/node/Ad/AdCarbon.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CarbonRoot = (0, _styles.styled)('span')(({
+  theme
+}) => {
+  const styles = (0, _ad.adBodyImageStyles)(theme);
+  return {
+    width: '100%',
+    '& > div': {
+      // The isolation logic of carbonads is broken.
+      // Once the script starts loading, it will asynchronous resolve, with no way to stop it.
+      // This leads to duplication of the ad.
+      //
+      // To solve the issue, we only display the #carbonads div
+      display: 'none'
+    },
+    '& #carbonads': {
+      ...styles.root,
+      '& .carbon-img': styles.imgWrapper,
+      '& img': styles.img,
+      '& a, & a:hover': styles.a,
+      '& .carbon-text': styles.description,
+      '& .carbon-poweredby': styles.poweredby
+    }
+  };
+});
+function AdCarbonImage() {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    // The isolation logic of carbonads is broken.
+    // Once the script starts loading, it will asynchronous resolve, with no way to stop it.
+    // This leads to duplication of the ad.
+    //
+    // 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);
+      script.id = '_carbonads_js';
+    });
+    return () => {
+      clearTimeout(load);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarbonRoot, {
+    ref: ref
+  });
+}
+function AdCarbonInline() {
+  const [ad, setAd] = React.useState(null);
+  React.useEffect(() => {
+    let active = true;
+    let attempt = 0;
+    (async () => {
+      async function tryFetch() {
+        if (attempt >= 10 || !active) {
+          return null;
+        }
+        attempt += 1;
+        let response;
+        try {
+          response = await fetch('https://srv.buysellads.com/ads/CE7DC23W.json');
+        } catch (err) {
+          // Ad blocker crashes this request
+          return null;
+        }
+        const data = await response.json();
+        // Inspired by https://github.com/Semantic-Org/Semantic-UI-React/blob/2c7134128925dd831de85011e3eb0ec382ba7f73/docs/src/components/CarbonAd/CarbonAdNative.js#L9
+        const sanitizedAd = data.ads.filter(item => Object.keys(item).length > 0).filter(item => item.statlink).filter(Boolean)[0];
+        if (!sanitizedAd) {
+          return tryFetch();
+        }
+        return sanitizedAd;
+      }
+      const sanitizedAd = await tryFetch();
+      if (active) {
+        setAd(sanitizedAd);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, []);
+  return ad ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: ad.statimp,
+      alt: "",
+      style: {
+        display: 'none'
+      }
+    }), ad.pixel && ad.pixel.split('||').map((pixel, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: `${pixel.replace('[timestamp]', ad.timestamp)}`,
+      style: {
+        display: 'none'
+      },
+      alt: ""
+    }, i)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdDisplay.default, {
+      className: "carbonads",
+      shape: "inline",
+      ad: {
+        link: ad.statlink,
+        img: ad.image,
+        name: ad.company,
+        description: `<strong>${ad.company}</strong> - ${ad.description}`,
+        poweredby: 'Carbon',
+        label: 'carbon-demo-inline'
+      }
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      minHeight: 52
+    }
+  });
+}
+function AdCarbon() {
+  return _AdCarbonImage || (_AdCarbonImage = /*#__PURE__*/(0, _jsxRuntime.jsx)(AdCarbonImage, {}));
+}

package/node/Ad/AdDisplay.js

@@ -0,0 +1,97 @@
+"use strict";
+
+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");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const InlineShape = (0, _styles.styled)('span')(({
+  theme
+}) => {
+  const styles = (0, _ad.adBodyInlineStyles)(theme);
+  return {
+    ...styles.root,
+    '& img': styles.img,
+    '& a, & a:hover': styles.a,
+    '& .AdDisplay-imageWrapper': styles.imgWrapper,
+    '& .AdDisplay-description': styles.description,
+    '& .AdDisplay-poweredby': styles.poweredby
+  };
+});
+const ImageShape = (0, _styles.styled)('span')(({
+  theme
+}) => {
+  const styles = (0, _ad.adBodyImageStyles)(theme);
+  return {
+    ...styles.root,
+    '& img': styles.img,
+    '& a, & a:hover': styles.a,
+    '& .AdDisplay-imageWrapper': styles.imgWrapper,
+    '& .AdDisplay-description': styles.description,
+    '& .AdDisplay-poweredby': styles.poweredby
+  };
+});
+function AdDisplay(props) {
+  const {
+    ad,
+    className,
+    shape: shapeProp = 'auto'
+  } = props;
+  const t = (0, _i18n.useTranslate)();
+  const {
+    GADisplayRatio
+  } = (0, _AdProvider.useAdConfig)();
+  React.useEffect(() => {
+    // Avoid an exceed on the Google Analytics quotas.
+    if (Math.random() > (GADisplayRatio ?? 0.1) || !ad.label) {
+      return;
+    }
+    window.gtag('event', 'ad', {
+      eventAction: 'display',
+      eventLabel: ad.label
+    });
+  }, [GADisplayRatio, ad.label]);
+  const shape = shapeProp === 'auto' ? _AdManager.adShape : shapeProp;
+  const Root = shape === 'image' ? ImageShape : InlineShape;
+
+  /* eslint-disable react/no-danger */
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+      href: ad.link,
+      target: "_blank",
+      rel: "noopener sponsored",
+      ...(ad.label ? {
+        'data-ga-event-category': 'ad',
+        'data-ga-event-action': 'click',
+        'data-ga-event-label': ad.label
+      } : {}),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "AdDisplay-imageWrapper",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          height: "100",
+          width: "130",
+          src: ad.img,
+          alt: ad.name
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "AdDisplay-description",
+        dangerouslySetInnerHTML: {
+          __html: ad.description
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "AdDisplay-poweredby",
+      children: t('adPublisher').replace('{{publisher}}', ad.poweredby)
+    })]
+  });
+  /* eslint-enable react/no-danger */
+}

package/node/Ad/AdGuest.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdGuest = AdGuest;
+var React = _interopRequireWildcard(require("react"));
+var _Portal = _interopRequireDefault(require("@mui/material/Portal"));
+var _AdManager = require("./AdManager");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function AdGuest(props) {
+  const {
+    classSelector = '.description',
+    children
+  } = props;
+  const ad = React.useContext(_AdManager.AdContext);
+  if (!ad.element) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.default, {
+    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
+  });
+}

package/node/Ad/AdInHouse.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AdInHouse;
+var React = _interopRequireWildcard(require("react"));
+var _AdDisplay = _interopRequireDefault(require("./AdDisplay"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function AdInHouse(props) {
+  const {
+    ad
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdDisplay.default, {
+    ad: {
+      poweredby: 'MUI',
+      label: `in-house-${ad.name}`,
+      ...ad
+    }
+  });
+}

package/node/Ad/AdManager.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AdContext = void 0;
+exports.AdManager = AdManager;
+exports.adShape = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const AdContext = exports.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
+const adShape = exports.adShape = randomSession < 0.2 ? 'inline' : 'image';
+function AdManager({
+  classSelector = '.description',
+  children
+}) {
+  const [portal, setPortal] = React.useState({
+    placement: 'body-top',
+    element: null
+  });
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    const container = document.querySelector(classSelector);
+    setPortal({
+      placement: 'body-top',
+      element: container
+    });
+  }, [classSelector]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AdContext.Provider, {
+    value: portal,
+    children: children
+  });
+}