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

package/useLazyCSS/useLazyCSS.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLazyCSS;
+var React = _interopRequireWildcard(require("react"));
+var _fgLoadcss = require("fg-loadcss");
+/**
+ * Enhanced lazy CSS loader that wraps CSS in a layer using fetch to avoid CORS issues
+ * @param {string} href - URL of the CSS file to load
+ * @param {string} before - CSS selector to insert before
+ * @param {object} options - Additional options
+ * @param {string} options.layer - Optional CSS layer name to wrap the CSS in
+ * @returns {() => void} cleanup function
+ */
+function useLazyCSS(href, before, options = {}) {
+  React.useEffect(() => {
+    // If no layer is specified, add style and clean it on unmount
+    if (!options.layer) {
+      const link = (0, _fgLoadcss.loadCSS)(href, document.querySelector(before));
+      return () => {
+        link.parentElement?.removeChild(link);
+      };
+    }
+
+    // With layer option, we need to fetch the CSS content and wrap it
+    let styleElement = null;
+    const abortController = new AbortController();
+
+    // Fetch the CSS content directly to avoid CORS issues with cssRules
+    fetch(href, {
+      signal: abortController.signal
+    }).then(response => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSS: ${response.statusText}`);
+      }
+      return response.text();
+    }).then(cssText => {
+      // Create a style element with the CSS wrapped in the specified layer
+      styleElement = document.createElement('style');
+      styleElement.setAttribute('data-href', href);
+      styleElement.textContent = `@layer ${options.layer} {\n${cssText}\n}`;
+
+      // Insert at the specified position
+      const beforeElement = document.querySelector(before);
+      if (beforeElement?.parentNode) {
+        beforeElement.parentNode.insertBefore(styleElement, beforeElement);
+      } else {
+        document.head.appendChild(styleElement);
+      }
+    }).catch(error => {
+      // Ignore abort errors, log others
+      if (error !== 'useEffect' && error.name !== 'AbortError') {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error loading CSS with layer:', error);
+        }
+
+        // Fall back to regular link element if fetch fails
+        styleElement = (0, _fgLoadcss.loadCSS)(href, document.querySelector(before));
+      }
+    });
+
+    // Cleanup function
+    return () => {
+      // Cancel any pending fetch
+      abortController.abort('useEffect');
+
+      // Remove the style element if it was created
+      if (styleElement && styleElement.parentElement) {
+        styleElement.parentElement.removeChild(styleElement);
+      }
+    };
+  }, [href, before, options.layer]);
+}

package/useLazyCSS/useLazyCSS.mjs

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { loadCSS } from 'fg-loadcss';
+
+/**
+ * Enhanced lazy CSS loader that wraps CSS in a layer using fetch to avoid CORS issues
+ * @param {string} href - URL of the CSS file to load
+ * @param {string} before - CSS selector to insert before
+ * @param {object} options - Additional options
+ * @param {string} options.layer - Optional CSS layer name to wrap the CSS in
+ * @returns {() => void} cleanup function
+ */
+export default function useLazyCSS(href, before, options = {}) {
+  React.useEffect(() => {
+    // If no layer is specified, add style and clean it on unmount
+    if (!options.layer) {
+      const link = loadCSS(href, document.querySelector(before));
+      return () => {
+        link.parentElement?.removeChild(link);
+      };
+    }
+
+    // With layer option, we need to fetch the CSS content and wrap it
+    let styleElement = null;
+    const abortController = new AbortController();
+
+    // Fetch the CSS content directly to avoid CORS issues with cssRules
+    fetch(href, {
+      signal: abortController.signal
+    }).then(response => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSS: ${response.statusText}`);
+      }
+      return response.text();
+    }).then(cssText => {
+      // Create a style element with the CSS wrapped in the specified layer
+      styleElement = document.createElement('style');
+      styleElement.setAttribute('data-href', href);
+      styleElement.textContent = `@layer ${options.layer} {\n${cssText}\n}`;
+
+      // Insert at the specified position
+      const beforeElement = document.querySelector(before);
+      if (beforeElement?.parentNode) {
+        beforeElement.parentNode.insertBefore(styleElement, beforeElement);
+      } else {
+        document.head.appendChild(styleElement);
+      }
+    }).catch(error => {
+      // Ignore abort errors, log others
+      if (error !== 'useEffect' && error.name !== 'AbortError') {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error loading CSS with layer:', error);
+        }
+
+        // Fall back to regular link element if fetch fails
+        styleElement = loadCSS(href, document.querySelector(before));
+      }
+    });
+
+    // Cleanup function
+    return () => {
+      // Cancel any pending fetch
+      abortController.abort('useEffect');
+
+      // Remove the style element if it was created
+      if (styleElement && styleElement.parentElement) {
+        styleElement.parentElement.removeChild(styleElement);
+      }
+    };
+  }, [href, before, options.layer]);
+}

package/esm/Ad/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./Ad.js";
-export * from "./AdManager.js";
-export * from "./AdProvider.js";
-export * from "./AdGuest.js";
-export { AdCarbonInline } from "./AdCarbon.js";

package/esm/Ad/index.js

@@ -1,7 +0,0 @@
-/// <reference types="gtag.js" />
-
-export * from "./Ad.js";
-export * from "./AdManager.js";
-export * from "./AdProvider.js";
-export * from "./AdGuest.js";
-export { AdCarbonInline } from "./AdCarbon.js";

package/esm/CodeCopy/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./CodeCopy.js";
-export * from "./CodeCopyButton.js";
-export { default as useClipboardCopy } from "./useClipboardCopy.js";

package/esm/CodeCopy/index.js

@@ -1,3 +0,0 @@
-export * from "./CodeCopy.js";
-export * from "./CodeCopyButton.js";
-export { default as useClipboardCopy } from "./useClipboardCopy.js";

package/esm/DocsProvider/index.d.ts

@@ -1 +0,0 @@
-export * from "./DocsProvider.js";

package/esm/DocsProvider/index.js

@@ -1 +0,0 @@
-export * from "./DocsProvider.js";

package/esm/HighlightedCode/index.d.ts

@@ -1 +0,0 @@
-export * from "./HighlightedCode.js";

package/esm/HighlightedCode/index.js

@@ -1 +0,0 @@
-export * from "./HighlightedCode.js";

package/esm/HighlightedCodeWithTabs/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./HighlightedCodeWithTabs.js";
-export { HighlightedCodeWithTabs as default } from "./HighlightedCodeWithTabs.js";

package/esm/HighlightedCodeWithTabs/index.js

@@ -1,2 +0,0 @@
-export * from "./HighlightedCodeWithTabs.js";
-export { HighlightedCodeWithTabs as default } from "./HighlightedCodeWithTabs.js";

package/esm/InfoCard/index.d.ts

@@ -1 +0,0 @@
-export * from "./InfoCard.js";

package/esm/InfoCard/index.js

@@ -1 +0,0 @@
-export * from "./InfoCard.js";

package/esm/Link/index.d.ts

@@ -1 +0,0 @@
-export * from "./Link.js";

package/esm/Link/index.js

@@ -1 +0,0 @@
-export * from "./Link.js";

package/esm/MarkdownElement/index.d.ts

@@ -1 +0,0 @@
-export * from "./MarkdownElement.js";

package/esm/MarkdownElement/index.js

@@ -1 +0,0 @@
-export * from "./MarkdownElement.js";

package/esm/NProgressBar/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./NProgressBar.js";
-export * from "./NProgressBar.js";

package/esm/NProgressBar/index.js

@@ -1 +0,0 @@
-export { default } from "./NProgressBar.js";

package/esm/SectionTitle/index.d.ts

@@ -1 +0,0 @@
-export * from "./SectionTitle.js";

package/esm/SectionTitle/index.js

@@ -1 +0,0 @@
-export * from "./SectionTitle.js";

package/esm/branding/index.d.ts

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

package/esm/branding/index.js

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

package/esm/i18n/index.d.ts

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

package/esm/i18n/index.js

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

package/esm/package.json

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

package/esm/translations/index.d.ts

@@ -1,3 +0,0 @@
-import type { Translations } from "../i18n/index.js";
-declare const _default: Record<string, Translations>;
-export default _default;

package/esm/translations/translations.json

@@ -1,223 +0,0 @@
-{
-  "adblock": "If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, please whitelist us in your blocker.",
-  "adPublisher": "ad by {{publisher}}",
-  "aiCustomizeDemo": "Want to customize this?",
-  "aiChatFailed": "Failed to open MUI Chat",
-  "api-docs": {
-    "componentName": "Component name",
-    "componentsApi": "Components API",
-    "themeDefaultProps": "Theme default props",
-    "themeDefaultPropsDescription": "You can use <code>{{muiName}}</code> to change the default props of this component <a href={{defaultPropsLink}}>with the theme</a>.",
-    "classes": "CSS classes",
-    "classesDescription": "These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.",
-    "className": "Class name",
-    "cssDescription": "The following class names are useful for styling with CSS (the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">state classes</a> are marked). <br /> To learn more, visit the <a href=\"/material-ui/customization/theme-components/\">component customization</a> page.",
-    "css": "CSS",
-    "cssComponent": "As a CSS utility, the {{name}} component also supports all <a href=\"/system/properties/\"><code>system</code></a> properties. You can use them as props directly on the component.",
-    "default": "Default",
-    "defaultComponent": "Default component",
-    "defaultValue": "Default value",
-    "defaultHTMLTag": "Default HTML tag",
-    "defaultDeprecationMessage": "This API is deprecated.",
-    "demos": "Demos",
-    "deprecated": "Deprecated",
-    "description": "Description",
-    "globalClass": "Global class",
-    "defaultClass": "Default class",
-    "hookName": "Hook name",
-    "hooksApi": "Hooks API",
-    "hooksNoParameters": "This hook does not accept any input parameters.",
-    "hooksPageDescription": "API reference docs for the {{name}} hook. Learn about the input parameters and other APIs of this exported module.",
-    "import": "Import",
-    "importDifference": "Learn about the difference by <a href=\"/material-ui/guides/minimizing-bundle-size/\">reading this guide on minimizing bundle size</a>.",
-    "inheritance": "Inheritance",
-    "inheritanceDescription": "While not explicitly documented above, the props of the <a href=\"{{pathname}}\">{{component}}</a> component{{suffix}} are also available in {{name}}. You can take advantage of this to <a href=\"/material-ui/guides/api/#spread\">target nested components</a>.",
-    "inheritanceSuffixTransition": " from react-transition-group",
-    "name": "Name",
-    "nativeElement": "native",
-    "overrideStyles": "You can override the style of the component using one of these customization options:\n",
-    "overrideStylesStyledComponent": "<ul>\n<li>With a <a href=\"/material-ui/integrations/interoperability/#global-css\">global class name</a>.</li>\n<li>With a rule name as part of the component's <a href=\"{{styleOverridesLink}}\"><code>styleOverrides</code> property</a> in a custom theme.</li>\n</ul>",
-    "pageDescription": "API reference docs for the React {{name}} component. Learn about the props, CSS, and other APIs of this exported module.",
-    "props": "Props",
-    "properties": "Properties",
-    "parameters": "Parameters",
-    "requires-ref": "This <a href=\"/material-ui/guides/composition/#caveat-with-refs\">needs to be able to hold a ref</a>.",
-    "returns": "Returns: ",
-    "returnValue": "Return value",
-    "refNotHeld": "The component cannot hold a ref.",
-    "refRootElement": "The <code>ref</code> is forwarded to the root element.",
-    "ruleName": "Rule name",
-    "seeSourceCode": "If you did not find the information in this page, consider having a look at the <a href=\"{{href}}\">implementation of the component</a> for more detail.",
-    "signature": "Signature",
-    "slots": "Slots",
-    "spreadHint": "Props of the {{spreadHintElement}} component are also available.",
-    "state": "STATE",
-    "styleOverrides": "The name <code>{{componentStyles.name}}</code> can be used when providing <a href={{defaultPropsLink}}>default props</a> or <a href={{styleOverridesLink}}>style overrides</a> in the theme.",
-    "slotDescription": "To learn how to customize the slot, check out the <a href={{slotGuideLink}}>Overriding component structure</a> guide.",
-    "slotName": "Slot name",
-    "source-code": "Source code",
-    "type": "Type",
-    "required": "Required",
-    "optional": "Optional",
-    "additional-info": {
-      "cssApi": "See <a href='#classes'>CSS classes API</a> below for more details.",
-      "sx": "See the <a href='/system/getting-started/the-sx-prop/'>`sx` page</a> for more details.",
-      "slotsApi": "See <a href='#slots'>Slots API</a> below for more details.",
-      "joy-size": "To learn how to add custom sizes to the component, check out <a href='/joy-ui/customization/themed-components/#extend-sizes'>Themed components—Extend sizes</a>.",
-      "joy-color": "To learn how to add your own colors, check out <a href='/joy-ui/customization/themed-components/#extend-colors'>Themed components—Extend colors</a>.",
-      "joy-variant": "To learn how to add your own variants, check out <a href='/joy-ui/customization/themed-components/#extend-variants'>Themed components—Extend variants</a>."
-    }
-  },
-  "marketingPageDescr": "A responsive marketing page layout with sections for product features, testimonials, pricing, and FAQs.",
-  "marketingPageTitle": "Marketing page",
-  "searchButton": "Search…",
-  "algoliaSearch": "What are you looking for?",
-  "appFrame": {
-    "changeLanguage": "Change language",
-    "github": "GitHub repository",
-    "helpToTranslate": "Help to translate",
-    "openDrawer": "Open main navigation",
-    "skipToContent": "Skip to content",
-    "toggleSettings": "Toggle settings drawer"
-  },
-  "backToTop": "Scroll back to top",
-  "backToOpenRoles": "Back to open roles",
-  "blogDescr": "A sleek, modern blog homepage layout with Markdown support via markdown-to-jsx.",
-  "blogTitle": "Blog",
-  "bundleSize": "Bundle size",
-  "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
-  "cancel": "Cancel",
-  "cdn": "or use a CDN.",
-  "checkoutDescr": "A sophisticated checkout flow with fully customizable steps.",
-  "checkoutTitle": "Checkout",
-  "clickToCopy": "Click to copy",
-  "close": "Close",
-  "codesandbox": "Edit in CodeSandbox",
-  "copied": "Copied",
-  "copiedSource": "The source code has been copied to your clipboard.",
-  "copiedSourceLink": "Link to the source code has been copied to your clipboard.",
-  "copySource": "Copy the source",
-  "copySourceLinkJS": "Copy link to JavaScript source",
-  "copySourceLinkTS": "Copy link to TypeScript source",
-  "dashboardDescr": "A complex data visualization dashboard featuring the MUI X Data Grid and Charts.",
-  "dashboardTitle": "Dashboard",
-  "decreaseSpacing": "decrease spacing",
-  "demoToolbarLabel": "demo source",
-  "demoStylingSelectSystem": "MUI System",
-  "demoStylingSelectTailwind": "Tailwind CSS",
-  "demoStylingSelectCSS": "Plain CSS",
-  "diamondSponsors": "Diamond sponsors",
-  "becomeADiamondSponsor": "Become a Diamond sponsor",
-  "diamondSponsorVacancies": "One spot left!",
-  "editorHint": "Press <kbd>Enter</kbd> to start editing",
-  "editPage": "Edit this page",
-  "emojiLove": "Love",
-  "emojiWarning": "Warning",
-  "expandAll": "Expand all",
-  "feedbackCommentLabel": "Comment",
-  "feedbackFailed": "Couldn't submit feedback. Please try again later.",
-  "feedbackMessage": "Was this page helpful?",
-  "feedbackMessageDown": "How can we improve this page? (optional)",
-  "feedbackMessageUp": "What did you like about this page? (optional)",
-  "feedbackSectionSpecific": "How can we improve the <strong>{{sectionName}}</strong> section? (optional)",
-  "feedbackMessageToGitHub": {
-    "usecases": "If something is broken or if you need a reply to a problem you've encountered, please",
-    "reasonWhy": "Otherwise, the team won't be able to answer back or ask for more information.",
-    "callToAction": {
-      "link": "open an issue instead."
-    }
-  },
-  "feedbackNo": "No",
-  "feedbackSubmitted": "Feedback submitted",
-  "feedbackYes": "Yes",
-  "footerCompany": "Company",
-  "goToHome": "go to homepage",
-  "getProfessionalSupport": "Get Professional Support",
-  "getStarted": "Get Started",
-  "githubLabel": "Feedback",
-  "headTitle": "MUI: A popular React UI framework",
-  "hideFullSource": "Collapse code",
-  "hideSource": "Hide code",
-  "homeQuickWord": "A quick word from our sponsors:",
-  "increaseSpacing": "increase spacing",
-  "initialFocusLabel": "A generic container that is programmatically focused to test keyboard navigation of our components.",
-  "installation": "Installation",
-  "installButton": "Read installation docs",
-  "installDescr": "Install MUI's source files via npm. We take care of injecting the CSS needed.",
-  "joinThese": "Join these and other great organizations!",
-  "JS": "JavaScript",
-  "letUsKnow": "Let us know!",
-  "likeMui": "Help us keep running",
-  "loadFont": "Load the default Roboto font.",
-  "mainNavigation": "documentation",
-  "newest": "Newest",
-  "openDrawer": "Open documentation navigation",
-  "or": "or",
-  "pageTOC": "Page table of contents",
-  "praise": "Praise for MUI",
-  "praiseDescr": "Here's what some of our users are saying.",
-  "pricingDescr": "Quickly build an effective pricing table for your potential customers.",
-  "pricingTitle": "Pricing",
-  "resetDemo": "Reset demo",
-  "resetDensity": "Reset density",
-  "resetFocus": "Reset focus to test keyboard navigation",
-  "searchIcons": {
-    "learnMore": "Learn more about the import"
-  },
-  "seeMore": "See more",
-  "settings": {
-    "color": "Color",
-    "dark": "Dark",
-    "direction": "Direction",
-    "editDocsColors": "Edit documentation colors",
-    "light": "Light",
-    "ltr": "Left to right",
-    "mode": "Mode",
-    "rtl": "Right to left",
-    "settings": "Settings",
-    "system": "System",
-    "language": "Language"
-  },
-  "showFullSource": "Expand code",
-  "showJSSource": "Show JavaScript source",
-  "showSource": "Show code",
-  "showTSSource": "Show TypeScript source",
-  "signInDescr": "A clean and efficient sign-in page, ready for your favorite auth provider.",
-  "signInSideDescr": "A responsive, two-column sign-in page for adding content alongside the form.",
-  "signInSideTitle": "Sign-in side",
-  "signInTitle": "Sign-in",
-  "signUpDescr": "A clean and efficient sign-up page, perfect for pairing with a sign-in template.",
-  "signUpTitle": "Sign-up",
-  "crudDashboardTitle": "CRUD dashboard",
-  "crudDashboardDescr": "Dashboard with CRUD pages and mobile-friendly layout with highly customizable sidebar.",
-  "sourceCode": "Source code",
-  "spacingUnit": "Spacing unit",
-  "stackblitz": "Edit in StackBlitz",
-  "stars": "GitHub stars",
-  "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
-  "stickyFooterTitle": "Sticky footer",
-  "strapline": "MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.",
-  "submit": "Submit",
-  "tableOfContents": "Contents",
-  "thanks": "Thank you!",
-  "themes": "Premium themes",
-  "themesButton": "Browse themes",
-  "themesDescr": "Take your project to the next level with premium themes from our store – all built on MUI.",
-  "toggleNotifications": "Toggle notifications panel",
-  "toggleRTL": "Toggle right-to-left/left-to-right",
-  "traffic": "Traffic",
-  "TS": "TypeScript",
-  "v5IsOut": "🎉 v5 release candidate is out! Head to the",
-  "v5docsLink": "v5 documentation",
-  "v5startAdoption": "to get started.",
-  "unreadNotifications": "unread notifications",
-  "usage": "Usage",
-  "usageButton": "Explore the docs",
-  "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",
-  "useDarkTheme": "Use dark theme",
-  "useHighDensity": "Apply higher density via props",
-  "usingMui": "Are you using MUI?",
-  "viewGitHub": "View the source on GitHub",
-  "visit": "Visit the website",
-  "whosUsing": "Who's using MUI?"
-}