@mui/docs 9.0.0-alpha.3 → 9.0.0-beta.0

package/ApiPage/table/PropertiesTable.js

@@ -0,0 +1,286 @@
+var _th, _th2, _th3, _th4, _a, _a2;
+/* eslint-disable react/no-danger */
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslate } from "../../i18n/index.js";
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { StyledTableContainer } from "./StyledTableContainer.js";
+import { ApiWarningAlert } from "../ApiWarningAlert.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTable = styled('table')(({
+  theme
+}) => ({
+  // Override docs/src/modules/components/MarkdownElement styles
+  '&&': {
+    display: 'table',
+    width: '100%'
+  },
+  '& .type-column': {
+    minWidth: '20%'
+  },
+  '& .default-column': {
+    minWidth: '20%'
+  },
+  '& .MuiApi-table-item-title': {
+    minWidth: '20%',
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontSize: theme.typography.pxToRem(13),
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
+  },
+  '& .MuiApi-table-item-type': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
+  },
+  '& .MuiApi-table-item-signature-type': {
+    textDecoration: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+    fontWeight: theme.typography.fontWeightMedium,
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+    '&:hover': {
+      textDecorationColor: 'inherit'
+    },
+    cursor: 'help'
+  },
+  '& .MuiApi-table-item-default': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`
+  },
+  '& .MuiPropTable-description-column': {
+    width: '40%',
+    paddingRight: 8,
+    '& .prop-table-description': {
+      marginBottom: 0
+    },
+    '& .prop-table-additional-description': {
+      marginTop: 12,
+      marginBottom: 0
+    },
+    '& .prop-table-alert': {
+      '& .MuiAlert-icon': {
+        margin: 0
+      }
+    }
+  },
+  '& .prop-table-signature': {
+    marginTop: 12,
+    marginBottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    '& .prop-table-title': {
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .MuiApi-table-item-title': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
+    },
+    '& .MuiApi-table-item-type': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      backgroundColor: alpha(darkTheme.palette.primary[900], 0.3)
+    },
+    '& .MuiApi-table-item-signature-type': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
+      textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6)
+    },
+    '& .MuiApi-table-item-default': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
+    },
+    '& .prop-table-signature': {
+      '& .prop-table-title': {
+        color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`
+      }
+    }
+  }
+}));
+function PropDescription({
+  description
+}) {
+  const isUlPresent = description.includes('<ul>');
+  const ComponentToRender = isUlPresent ? 'div' : 'p';
+  return /*#__PURE__*/_jsx(ComponentToRender, {
+    className: "prop-table-description" // This className is used by Algolia
+    ,
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  });
+}
+export default function PropertiesTable(props) {
+  const {
+    properties
+  } = props;
+  const hasDefaultColumn = properties.some(item => item.propDefault !== undefined);
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(StyledTableContainer, {
+    children: /*#__PURE__*/_jsxs(StyledTable, {
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsxs("tr", {
+          children: [_th || (_th = /*#__PURE__*/_jsx("th", {
+            children: 'Name'
+          })), _th2 || (_th2 = /*#__PURE__*/_jsx("th", {
+            children: 'Type'
+          })), hasDefaultColumn && (_th3 || (_th3 = /*#__PURE__*/_jsx("th", {
+            children: 'Default'
+          }))), _th4 || (_th4 = /*#__PURE__*/_jsx("th", {
+            children: 'Description'
+          }))]
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: properties.map(params => {
+          const {
+            propName,
+            description,
+            seeMoreDescription,
+            requiresRef,
+            isOptional,
+            isRequired,
+            isProPlan,
+            isPremiumPlan,
+            isDeprecated,
+            deprecationInfo,
+            typeName,
+            propDefault,
+            additionalInfo,
+            signature,
+            signatureArgs,
+            signatureReturnDescription,
+            hash
+          } = params;
+          return /*#__PURE__*/_jsxs("tr", {
+            id: hash,
+            children: [/*#__PURE__*/_jsxs("td", {
+              className: "MuiApi-table-item-title algolia-lvl3",
+              children: [propName, isRequired ? '*' : '', isOptional ? '?' : '', isProPlan && (_a || (_a = /*#__PURE__*/_jsx("a", {
+                href: "/x/introduction/licensing/#pro-plan",
+                "aria-label": "Pro plan",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: "plan-pro"
+                })
+              }))), isPremiumPlan && (_a2 || (_a2 = /*#__PURE__*/_jsx("a", {
+                href: "/x/introduction/licensing/#premium-plan",
+                "aria-label": "Premium plan",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: "plan-premium"
+                })
+              })))]
+            }), /*#__PURE__*/_jsx("td", {
+              className: "type-column",
+              children: /*#__PURE__*/_jsx("span", {
+                className: "MuiApi-table-item-type",
+                dangerouslySetInnerHTML: {
+                  __html: typeName
+                }
+              })
+            }), hasDefaultColumn && /*#__PURE__*/_jsx("td", {
+              className: "default-column",
+              children: propDefault ? /*#__PURE__*/_jsx("span", {
+                className: "MuiApi-table-item-default",
+                children: propDefault
+              }) : '-'
+            }), /*#__PURE__*/_jsxs("td", {
+              className: "MuiPropTable-description-column algolia-content",
+              children: [description && /*#__PURE__*/_jsx(PropDescription, {
+                description: description
+              }), seeMoreDescription && /*#__PURE__*/_jsx("p", {
+                dangerouslySetInnerHTML: {
+                  __html: seeMoreDescription
+                },
+                className: "prop-table-additional-description"
+              }), additionalInfo?.map(key => /*#__PURE__*/_jsx("p", {
+                className: "prop-table-additional-description",
+                dangerouslySetInnerHTML: {
+                  __html: t(`api-docs.additional-info.${key}`)
+                }
+              }, key)), requiresRef && /*#__PURE__*/_jsx(ApiWarningAlert, {
+                className: "prop-table-alert",
+                children: /*#__PURE__*/_jsx("span", {
+                  dangerouslySetInnerHTML: {
+                    __html: t('api-docs.requires-ref')
+                  }
+                })
+              }), isDeprecated && /*#__PURE__*/_jsxs(ApiWarningAlert, {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: t('api-docs.deprecated')
+                }), deprecationInfo && /*#__PURE__*/_jsxs(React.Fragment, {
+                  children: ['－', /*#__PURE__*/_jsx("span", {
+                    dangerouslySetInnerHTML: {
+                      __html: deprecationInfo
+                    }
+                  })]
+                })]
+              }), signature && /*#__PURE__*/_jsxs("div", {
+                className: "prop-table-signature",
+                children: [/*#__PURE__*/_jsxs("span", {
+                  className: "prop-table-title",
+                  children: [t('api-docs.signature'), ":"]
+                }), /*#__PURE__*/_jsx("code", {
+                  children: signature
+                }), signatureArgs && /*#__PURE__*/_jsx("div", {
+                  children: /*#__PURE__*/_jsx("ul", {
+                    children: signatureArgs.map(({
+                      argName,
+                      argDescription,
+                      argType,
+                      argTypeDescription
+                    }) => /*#__PURE__*/_jsxs("li", {
+                      className: "prop-signature-list",
+                      children: [/*#__PURE__*/_jsxs("code", {
+                        children: [argName, argType && argTypeDescription && /*#__PURE__*/_jsx(Tooltip, {
+                          title: /*#__PURE__*/_jsx("span", {
+                            dangerouslySetInnerHTML: {
+                              __html: argTypeDescription
+                            }
+                          }),
+                          children: /*#__PURE__*/_jsxs("span", {
+                            children: [":", ' ', /*#__PURE__*/_jsx("span", {
+                              className: "MuiApi-table-item-signature-type",
+                              children: argType
+                            })]
+                          })
+                        })]
+                      }), ' ', argDescription && /*#__PURE__*/_jsx("span", {
+                        dangerouslySetInnerHTML: {
+                          __html: argDescription
+                        }
+                      })]
+                    }, argName))
+                  })
+                }), signatureReturnDescription && /*#__PURE__*/_jsxs("p", {
+                  children: [t('api-docs.returns'), /*#__PURE__*/_jsx("span", {
+                    dangerouslySetInnerHTML: {
+                      __html: signatureReturnDescription
+                    }
+                  })]
+                })]
+              })]
+            })]
+          }, propName);
+        })
+      })]
+    })
+  });
+}

package/ApiPage/table/SlotsTable.d.ts

@@ -0,0 +1,6 @@
+import { SlotDefinition } from "../definitions/types.js";
+interface SlotsTableProps {
+  slots: SlotDefinition[];
+}
+export default function SlotsTable(props: SlotsTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ApiPage/table/SlotsTable.js

@@ -0,0 +1,126 @@
+import { styled, alpha } from '@mui/material/styles';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { useTranslate } from "../../i18n/index.js";
+import { StyledTableContainer } from "./StyledTableContainer.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTable = styled('table')(({
+  theme
+}) => ({
+  // Override docs/src/modules/components/MarkdownElement styles
+  '&&': {
+    display: 'table',
+    width: '100%'
+  },
+  '& .slot-name': {
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontSize: theme.typography.pxToRem(13),
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
+  },
+  '& .class-name': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
+  },
+  '& .item-default': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`
+  },
+  '& .description-column': {
+    width: '40%',
+    paddingRight: 8
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .slot-name': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
+    },
+    '& .class-name': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      backgroundColor: alpha(darkTheme.palette.primary[900], 0.5)
+    },
+    '& .item-default': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
+    }
+  }
+}));
+export default function SlotsTable(props) {
+  const {
+    slots
+  } = props;
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(StyledTableContainer, {
+    children: /*#__PURE__*/_jsxs(StyledTable, {
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsxs("tr", {
+          children: [/*#__PURE__*/_jsx("th", {
+            children: t('api-docs.slotName')
+          }), /*#__PURE__*/_jsx("th", {
+            children: t('api-docs.className')
+          }), /*#__PURE__*/_jsx("th", {
+            children: t('api-docs.defaultComponent')
+          }), /*#__PURE__*/_jsx("th", {
+            children: t('api-docs.description')
+          })]
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: slots.map(params => {
+          const {
+            description,
+            className,
+            name,
+            defaultValue,
+            hash
+          } = params;
+          return /*#__PURE__*/_jsxs("tr", {
+            id: hash,
+            children: [/*#__PURE__*/_jsx("td", {
+              className: "slot-name",
+              style: {
+                fontWeight: '600'
+              },
+              children: name
+            }), /*#__PURE__*/_jsx("td", {
+              className: "MuiApi-table-class-name",
+              children: className && /*#__PURE__*/_jsx("span", {
+                className: "class-name",
+                children: `.${className}`
+              })
+            }), /*#__PURE__*/_jsx("td", {
+              children: defaultValue && /*#__PURE__*/_jsx("code", {
+                className: "item-default",
+                children: defaultValue
+              })
+            }), /*#__PURE__*/_jsx("td", {
+              className: "description-column",
+              children: /*#__PURE__*/_jsx("span", {
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                  __html: description || ''
+                }
+              })
+            })]
+          }, `${className}-${hash}`);
+        })
+      })]
+    })
+  });
+}

package/ApiPage/table/StyledTableContainer.d.ts

@@ -0,0 +1 @@
+export declare const StyledTableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ApiPage/table/StyledTableContainer.js

@@ -0,0 +1,42 @@
+import { styled, alpha } from '@mui/material/styles';
+import { brandingDarkTheme as darkTheme } from "../../branding/index.js";
+export const StyledTableContainer = styled('div')(({
+  theme
+}) => ({
+  borderRadius: 12,
+  overflowX: 'auto',
+  '& table': {
+    marginLeft: -1,
+    marginRight: -1,
+    background: ['linear-gradient(to right, rgb(255, 255, 255) 5%, transparent 90%) local', 'linear-gradient(to right, transparent, rgb(255, 255, 255) 100%) 100% center local', `linear-gradient(to right, ${alpha(theme.palette.grey[500], 0.5)}, transparent 5%) scroll`, `linear-gradient(to left, ${alpha(theme.palette.grey[500], 0.2)}, transparent 5%) scroll`].join(', ')
+  },
+  '&& th': {
+    paddingTop: 8,
+    paddingBottom: 8,
+    textAlign: 'left',
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontSize: theme.typography.pxToRem(14)
+  },
+  '& tr': {
+    scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
+    '&:hover': {
+      backgroundColor: alpha(darkTheme.palette.grey[50], 0.5)
+    },
+    '& .MuiPropTable-description-column': {
+      minWidth: 300
+    }
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& table': {
+      background: [`linear-gradient(to right, ${theme.palette.primaryDark[900]} 5%, transparent 80%) local`, `linear-gradient(to right, transparent, ${theme.palette.primaryDark[900]} 100%) 100% center local`, `linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent 10%) scroll`, 'linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 10%) scroll'].join(', ')
+    },
+    '& tr': {
+      '&:hover': {
+        backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5)
+      }
+    }
+  }
+}));

package/ApiPage/types.d.ts

@@ -0,0 +1,11 @@
+import type { TableOfContentsEntry } from '@mui/internal-markdown';
+export interface TableOfContentsParams {
+  children: (TableOfContentsParams | TableOfContentsEntry)[];
+  hash: string;
+  text: string;
+}
+export interface LayoutStorageKeys {
+  slots: string;
+  props: string;
+  classes: string;
+}

package/ApiPage/types.js

@@ -0,0 +1 @@
+export {};