@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Ad/AdCarbon.mjs

@@ -1,125 +0,0 @@
-var _AdCarbonImage;
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import loadScript from "../utils/loadScript.mjs";
-import AdDisplay from "./AdDisplay.mjs";
-import { adBodyImageStyles } from "./ad.styles.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CarbonRoot = styled('span')(({
-  theme
-}) => {
-  const styles = 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(() => {
-      // 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__*/_jsx(CarbonRoot, {
-    ref: ref
-  });
-}
-export 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__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx("img", {
-      src: ad.statimp,
-      alt: "",
-      style: {
-        display: 'none'
-      }
-    }), ad.pixel && ad.pixel.split('||').map((pixel, i) => /*#__PURE__*/_jsx("img", {
-      src: `${pixel.replace('[timestamp]', ad.timestamp)}`,
-      style: {
-        display: 'none'
-      },
-      alt: ""
-    }, i)), /*#__PURE__*/_jsx(AdDisplay, {
-      className: "carbonads",
-      shape: "inline",
-      ad: {
-        link: ad.statlink,
-        img: ad.image,
-        name: ad.company,
-        descriptionHeader: ad.company,
-        description: ad.description,
-        poweredby: 'Carbon',
-        label: 'carbon-demo-inline'
-      }
-    })]
-  }) : /*#__PURE__*/_jsx("div", {
-    style: {
-      minHeight: 52
-    }
-  });
-}
-export default function AdCarbon() {
-  return _AdCarbonImage || (_AdCarbonImage = /*#__PURE__*/_jsx(AdCarbonImage, {}));
-}

package/Ad/AdDisplay.d.mts

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

package/Ad/AdDisplay.mjs

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { useTranslate } from "../i18n/index.mjs";
-import { adShape } from "./AdManager.mjs";
-import { adBodyImageStyles, adBodyInlineStyles } from "./ad.styles.mjs";
-import { useAdConfig } from "./AdProvider.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const InlineShape = styled('span')(({
-  theme
-}) => {
-  const styles = 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 = styled('span')(({
-  theme
-}) => {
-  const styles = 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
-  };
-});
-export default function AdDisplay(props) {
-  const {
-    ad,
-    className,
-    shape: shapeProp = 'auto'
-  } = props;
-  const t = useTranslate();
-  const {
-    GADisplayRatio
-  } = 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' ? adShape : shapeProp;
-  const Root = shape === 'image' ? ImageShape : InlineShape;
-  return /*#__PURE__*/_jsxs(Root, {
-    className: className,
-    children: [/*#__PURE__*/_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__*/_jsx("span", {
-        className: "AdDisplay-imageWrapper",
-        children: /*#__PURE__*/_jsx("img", {
-          height: "100",
-          width: "130",
-          src: ad.img,
-          alt: ad.name
-        })
-      }), /*#__PURE__*/_jsxs("span", {
-        className: "AdDisplay-description",
-        children: [/*#__PURE__*/_jsx("strong", {
-          children: ad.descriptionHeader
-        }), " - ", ad.description]
-      })]
-    }), /*#__PURE__*/_jsx("span", {
-      className: "AdDisplay-poweredby",
-      children: t('adPublisher').replace('{{publisher}}', ad.poweredby)
-    })]
-  });
-}

package/Ad/AdGuest.d.mts

@@ -1,10 +0,0 @@
-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): import("react/jsx-runtime").JSX.Element | null;
-export { AdGuest };

package/Ad/AdGuest.mjs

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import Portal from '@mui/material/Portal';
-import { AdContext } from "./AdManager.mjs";
-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/Ad/AdInHouse.d.mts

@@ -1,4 +0,0 @@
-import { AdParameters } from "./AdDisplay.mjs";
-export default function AdInHouse(props: {
-  ad: Omit<AdParameters, 'poweredby' | 'label'>;
-}): import("react/jsx-runtime").JSX.Element;

package/Ad/AdInHouse.mjs

@@ -1,14 +0,0 @@
-import AdDisplay from "./AdDisplay.mjs";
-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/Ad/AdManager.d.mts

@@ -1,19 +0,0 @@
-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): import("react/jsx-runtime").JSX.Element;
-export {};

package/Ad/AdManager.mjs

@@ -1,36 +0,0 @@
-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/Ad/AdProvider.d.mts

@@ -1,15 +0,0 @@
-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): import("react/jsx-runtime").JSX.Element;
-export declare function useAdConfig(): AdConfig;

package/Ad/AdProvider.mjs

@@ -1,24 +0,0 @@
-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;
-}