From b433a3e93b9c11c8262ffbf437abcd78e6ae85a8 Mon Sep 17 00:00:00 2001 From: Rui Botto Date: Tue, 11 Dec 2018 22:30:34 +0100 Subject: [PATCH 1/4] [Menu] Add reason value and update documentation for on close reason --- packages/material-ui/src/Dialog/Dialog.js | 1 + packages/material-ui/src/Menu/Menu.js | 3 ++- packages/material-ui/src/Popover/Popover.js | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index a048ccffa8d0d6..6e642ba052bdab 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -260,6 +260,7 @@ Dialog.propTypes = { * Callback fired when the component requests to be closed. * * @param {object} event The event source of the callback + * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"` */ onClose: PropTypes.func, /** diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index d28a8b52b724b9..d52208beeb23c7 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -88,7 +88,7 @@ class Menu extends React.Component { event.preventDefault(); if (this.props.onClose) { - this.props.onClose(event); + this.props.onClose(event, 'tabKeydown'); } } }; @@ -161,6 +161,7 @@ Menu.propTypes = { * Callback fired when the component requests to be closed. * * @param {object} event The event source of the callback + * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeydown"` */ onClose: PropTypes.func, /** diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 751ddc431261a8..469d943a484bae 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -444,6 +444,7 @@ Popover.propTypes = { * Callback fired when the component requests to be closed. * * @param {object} event The event source of the callback. + * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"` */ onClose: PropTypes.func, /** From 876b62e5223d0d707c2c28912bc684780737f6a0 Mon Sep 17 00:00:00 2001 From: Rui Botto Date: Tue, 11 Dec 2018 22:39:02 +0100 Subject: [PATCH 2/4] Increate popper component bundle limit size by 1b --- .size-limit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.size-limit.js b/.size-limit.js index a651a2fbf42d7c..d00525aca6e4ff 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -35,7 +35,7 @@ module.exports = [ name: 'The size of the @material-ui/core/Popper component', webpack: true, path: 'packages/material-ui/build/Popper/index.js', - limit: '10.6 KB', + limit: '10.7 KB', }, { name: 'The main docs bundle', From 0488bb435cbb98c6b07c4d155662eefbf3ae9d07 Mon Sep 17 00:00:00 2001 From: Rui Botto Date: Tue, 11 Dec 2018 22:39:48 +0100 Subject: [PATCH 3/4] Update api docs --- pages/api/dialog.md | 2 +- pages/api/menu.md | 2 +- pages/api/popover.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/api/dialog.md b/pages/api/dialog.md index 98c989563a25d1..b087c34df856f1 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -26,7 +26,7 @@ Dialogs are overlaid modal paper based components with a backdrop. | fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`. | | maxWidth | enum: 'xs', 'sm', 'md', 'lg', 'xl', false
 | 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. Set to `false` to disable `maxWidth`. | | onBackdropClick | func |   | Callback fired when the backdrop is clicked. | -| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` | | onEnter | func |   | Callback fired before the dialog enters. | | onEntered | func |   | Callback fired when the dialog has entered. | | onEntering | func |   | Callback fired when the dialog is entering. | diff --git a/pages/api/menu.md b/pages/api/menu.md index 3bbe08521b106d..5ebd8608d78a6c 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -23,7 +23,7 @@ import Menu from '@material-ui/core/Menu'; | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableAutoFocusItem | bool | false | If `true`, the selected / first menu item will not be auto focused. | | MenuListProps | object |   | Properties applied to the [`MenuList`](/api/menu-list/) element. | -| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeydown"` | | onEnter | func |   | Callback fired before the Menu enters. | | onEntered | func |   | Callback fired when the Menu has entered. | | onEntering | func |   | Callback fired when the Menu is entering. | diff --git a/pages/api/popover.md b/pages/api/popover.md index ff55f202913a18..329b503c1a39f8 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -30,7 +30,7 @@ import Popover from '@material-ui/core/Popover'; | getContentAnchorEl | func |   | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` property. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. | | marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. | | ModalClasses | object |   | `classes` property applied to the [`Modal`](/api/modal/) element. | -| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` | | onEnter | func |   | Callback fired before the component is entering. | | onEntered | func |   | Callback fired when the component has entered. | | onEntering | func |   | Callback fired when the component is entering. | From c5ae99c904a55eca1fdf1d6f0001df1726637b2f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 11 Dec 2018 23:57:43 +0100 Subject: [PATCH 4/4] use tabKeyDown following escapeKeyDown --- .size-limit.js | 4 ++-- packages/material-ui/src/Menu/Menu.js | 4 ++-- pages/api/menu.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index d00525aca6e4ff..f31cff6a63df7e 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -22,7 +22,7 @@ module.exports = [ name: 'The size of the @material-ui/core modules', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '95.5 KB', + limit: '95.2 KB', }, { name: 'The size of the @material-ui/styles modules', @@ -41,7 +41,7 @@ module.exports = [ name: 'The main docs bundle', webpack: false, path: main.path, - limit: '177 KB', + limit: '176 KB', }, { name: 'The docs home page', diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index d52208beeb23c7..ba90f8beafc12c 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -88,7 +88,7 @@ class Menu extends React.Component { event.preventDefault(); if (this.props.onClose) { - this.props.onClose(event, 'tabKeydown'); + this.props.onClose(event, 'tabKeyDown'); } } }; @@ -161,7 +161,7 @@ Menu.propTypes = { * Callback fired when the component requests to be closed. * * @param {object} event The event source of the callback - * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeydown"` + * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"` */ onClose: PropTypes.func, /** diff --git a/pages/api/menu.md b/pages/api/menu.md index 5ebd8608d78a6c..1869d891eca193 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -23,7 +23,7 @@ import Menu from '@material-ui/core/Menu'; | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableAutoFocusItem | bool | false | If `true`, the selected / first menu item will not be auto focused. | | MenuListProps | object |   | Properties applied to the [`MenuList`](/api/menu-list/) element. | -| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeydown"` | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"` | | onEnter | func |   | Callback fired before the Menu enters. | | onEntered | func |   | Callback fired when the Menu has entered. | | onEntering | func |   | Callback fired when the Menu is entering. |