diff --git a/docs/data/joy/pagesApi.js b/docs/data/joy/pagesApi.js index a8c57ef7c41a54..ef946d38a21cbc 100644 --- a/docs/data/joy/pagesApi.js +++ b/docs/data/joy/pagesApi.js @@ -55,6 +55,7 @@ module.exports = [ { pathname: '/joy-ui/api/sheet' }, { pathname: '/joy-ui/api/skeleton' }, { pathname: '/joy-ui/api/slider' }, + { pathname: '/joy-ui/api/snackbar' }, { pathname: '/joy-ui/api/stack' }, { pathname: '/joy-ui/api/svg-icon' }, { pathname: '/joy-ui/api/switch' }, diff --git a/docs/pages/base-ui/api/snackbar.json b/docs/pages/base-ui/api/snackbar.json index 7fbded8b892229..709e8a25b5dde2 100644 --- a/docs/pages/base-ui/api/snackbar.json +++ b/docs/pages/base-ui/api/snackbar.json @@ -44,6 +44,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-base/src/Snackbar/Snackbar.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/joy-ui/api/snackbar.js b/docs/pages/joy-ui/api/snackbar.js new file mode 100644 index 00000000000000..025d0c4d798970 --- /dev/null +++ b/docs/pages/joy-ui/api/snackbar.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './snackbar.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs-joy/snackbar', false, /snackbar.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/joy-ui/api/snackbar.json b/docs/pages/joy-ui/api/snackbar.json new file mode 100644 index 00000000000000..fb1038dca08992 --- /dev/null +++ b/docs/pages/joy-ui/api/snackbar.json @@ -0,0 +1,120 @@ +{ + "props": { + "anchorOrigin": { + "type": { + "name": "shape", + "description": "{ horizontal: 'center'
| 'left'
| 'right', vertical: 'bottom'
| 'top' }" + }, + "default": "{ vertical: 'bottom', horizontal: 'left' }" + }, + "autoHideDuration": { "type": { "name": "number" }, "default": "null" }, + "ClickAwayListenerProps": { "type": { "name": "object" } }, + "color": { + "type": { + "name": "enum", + "description": "'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'" + }, + "default": "'neutral'", + "additionalInfo": { "joy-color": true } + }, + "component": { "type": { "name": "elementType" } }, + "disableWindowBlurListener": { "type": { "name": "bool" }, "default": "false" }, + "onClose": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: React.SyntheticEvent | Event, reason: string) => void", + "describedArgs": ["event", "reason"] + } + }, + "open": { "type": { "name": "bool" } }, + "resumeHideDuration": { "type": { "name": "number" } }, + "size": { + "type": { "name": "enum", "description": "'sm'
| 'md'
| 'lg'" }, + "default": "'md'", + "additionalInfo": { "joy-size": true } + }, + "slotProps": { + "type": { + "name": "shape", + "description": "{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }" + }, + "default": "{}" + }, + "slots": { + "type": { + "name": "shape", + "description": "{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }" + }, + "default": "{}", + "additionalInfo": { "slotsApi": true } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, + "variant": { + "type": { + "name": "enum", + "description": "'outlined'
| 'plain'
| 'soft'
| 'solid'" + }, + "default": "'outlined'", + "additionalInfo": { "joy-variant": true } + } + }, + "name": "Snackbar", + "imports": ["import Snackbar from '@mui/joy/Snackbar';", "import { Snackbar } from '@mui/joy';"], + "styles": { "classes": [], "globalClasses": {}, "name": "MuiSnackbar" }, + "slots": [ + { + "name": "root", + "description": "The component that renders the root.", + "default": "'div'", + "class": ".MuiSnackbar-root" + }, + { + "name": "startDecorator", + "description": "The component that renders the start decorator.", + "default": "'span'", + "class": ".MuiSnackbar-startDecorator" + }, + { + "name": "endDecorator", + "description": "The component that renders the end decorator.", + "default": "'span'", + "class": ".MuiSnackbar-endDecorator" + } + ], + "classes": { + "classes": [ + "anchorOriginBottomCenter", + "anchorOriginBottomLeft", + "anchorOriginBottomRight", + "anchorOriginTopCenter", + "anchorOriginTopLeft", + "anchorOriginTopRight", + "colorDanger", + "colorNeutral", + "colorPrimary", + "colorSuccess", + "colorWarning", + "sizeLg", + "sizeMd", + "sizeSm", + "variantOutlined", + "variantPlain", + "variantSoft", + "variantSolid" + ], + "globalClasses": {} + }, + "spread": true, + "themeDefaultProps": null, + "muiName": "JoySnackbar", + "filename": "/packages/mui-joy/src/Snackbar/Snackbar.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/translations/api-docs-joy/snackbar/snackbar.json b/docs/translations/api-docs-joy/snackbar/snackbar.json new file mode 100644 index 00000000000000..a9c6b1c03bf326 --- /dev/null +++ b/docs/translations/api-docs-joy/snackbar/snackbar.json @@ -0,0 +1,151 @@ +{ + "componentDescription": "", + "propDescriptions": { + "anchorOrigin": { + "description": "The anchor of the Snackbar. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored." + }, + "autoHideDuration": { + "description": "The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value." + }, + "ClickAwayListenerProps": { + "description": "Props applied to the ClickAwayListener element." + }, + "color": { + "description": "The color of the component. It supports those theme colors that make sense for this component." + }, + "component": { + "description": "The component used for the root node. Either a string to use a HTML element or a component." + }, + "disableWindowBlurListener": { + "description": "If true, the autoHideDuration timer will expire even if the window is not focused." + }, + "onClose": { + "description": "Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.", + "typeDescriptions": { + "event": "The event source of the callback.", + "reason": "Can be: "timeout" (autoHideDuration expired), "clickaway", or "escapeKeyDown"." + } + }, + "open": { "description": "If true, the component is shown." }, + "resumeHideDuration": { + "description": "The number of milliseconds to wait before dismissing after user interaction. If autoHideDuration prop isn't specified, it does nothing. If autoHideDuration prop is specified but resumeHideDuration isn't, we default to autoHideDuration / 2 ms." + }, + "size": { "description": "The size of the component." }, + "slotProps": { "description": "The props used for each slot inside." }, + "slots": { "description": "The components used for each slot inside." }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, + "variant": { + "description": "The global variant to use." + } + }, + "classDescriptions": { + "root": { "description": "Class name applied to the root element." }, + "anchorOriginTopCenter": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchorOrigin={{ 'top', 'center' }}" + }, + "anchorOriginBottomCenter": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchorOrigin={{ 'bottom', 'center' }}" + }, + "anchorOriginTopRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchorOrigin={{ 'top', 'right' }}" + }, + "anchorOriginBottomRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchorOrigin={{ 'bottom', 'right' }}" + }, + "anchorOriginTopLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchorOrigin={{ 'top', 'left' }}" + }, + "anchorOriginBottomLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "anchorOrigin={{ 'bottom', 'left' }}" + }, + "colorPrimary": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"primary\"" + }, + "colorDanger": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"danger\"" + }, + "colorNeutral": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"neutral\"" + }, + "colorSuccess": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, + "endDecorator": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the endDecorator element", + "conditions": "supplied" + }, + "sizeSm": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"sm\"" + }, + "sizeMd": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"md\"" + }, + "sizeLg": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"lg\"" + }, + "startDecorator": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the startDecorator element", + "conditions": "supplied" + }, + "variantPlain": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"plain\"" + }, + "variantOutlined": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\"" + }, + "variantSoft": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"soft\"" + }, + "variantSolid": { + "description": "Class name applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"solid\"" + } + }, + "slotDescriptions": { + "root": "The component that renders the root.", + "startDecorator": "The component that renders the start decorator.", + "endDecorator": "The component that renders the end decorator." + } +} diff --git a/packages/mui-base/src/Snackbar/Snackbar.tsx b/packages/mui-base/src/Snackbar/Snackbar.tsx index 8593516d21a247..1ba54db99b2045 100644 --- a/packages/mui-base/src/Snackbar/Snackbar.tsx +++ b/packages/mui-base/src/Snackbar/Snackbar.tsx @@ -27,6 +27,7 @@ const useUtilityClasses = () => { * Demos: * * - [Snackbar](https://mui.com/base-ui/react-snackbar/) + * - [Snackbar](https://mui.com/joy-ui/react-snackbar/) * - [Snackbar](https://mui.com/material-ui/react-snackbar/) * * API: diff --git a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-joy/src/Snackbar/Snackbar.tsx b/packages/mui-joy/src/Snackbar/Snackbar.tsx index 917891fffe4803..75bb8c75688b3e 100644 --- a/packages/mui-joy/src/Snackbar/Snackbar.tsx +++ b/packages/mui-joy/src/Snackbar/Snackbar.tsx @@ -119,7 +119,16 @@ const SnackbarEndDecorator = styled('span', { flex: 'none', marginLeft: 'auto', }); - +/** + * + * Demos: + * + * - [Snackbar](https://mui.com/joy-ui/react-snackbar/) + * + * API: + * + * - [Snackbar API](https://mui.com/joy-ui/api/snackbar/) + */ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) { const props = useThemeProps({ props: inProps, diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index ecca349eeb3148..89cfb85cac88f8 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -184,6 +184,9 @@ export * from './Skeleton'; export { default as Slider } from './Slider'; export * from './Slider'; +export { default as Snackbar } from './Snackbar'; +export * from './Snackbar'; + export { default as Stack } from './Stack'; export * from './Stack';