@instructure/ui-menu 8.27.0 → 8.27.1-snapshot-13

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.27.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-13) (2022-08-17)
+
+
+### Features
+
+* **ui-menu:** add `positionContainerDisplay` prop to Menu ([e8ed689](https://github.com/instructure/instructure-ui/commit/e8ed689bacb82b88bde3be3db1ade6ea6ee6ed89))
+
+
+
+
+
 # [8.27.0](https://github.com/instructure/instructure-ui/compare/v8.26.3...v8.27.0) (2022-07-25)
 
 ### Features

package/es/Menu/index.js

@@ -393,6 +393,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
           onDismiss = _this$props5.onDismiss,
           onFocus = _this$props5.onFocus,
           onMouseOver = _this$props5.onMouseOver,
+          positionContainerDisplay = _this$props5.positionContainerDisplay,
           offsetX = _this$props5.offsetX,
           offsetY = _this$props5.offsetY;
     return trigger ? jsx(Popover, {
@@ -417,6 +418,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       shouldReturnFocus: true,
       onFocus: onFocus,
       onMouseOver: onMouseOver,
+      positionContainerDisplay: positionContainerDisplay,
       offsetX: offsetX,
       offsetY: offsetY,
       elementRef: element => {

package/es/Menu/props.js

@@ -45,11 +45,12 @@ const propTypes = {
   constrain: PositionPropTypes.constrain,
   shouldHideOnSelect: PropTypes.bool,
   shouldFocusTriggerOnClose: PropTypes.bool,
+  positionContainerDisplay: PropTypes.oneOf(['inline-block', 'block']),
   type: PropTypes.oneOf(['flyout']),
   id: PropTypes.string,
   withArrow: PropTypes.bool,
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
+const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'positionContainerDisplay', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
 export { propTypes, allowedProps };

package/lib/Menu/index.js

@@ -416,6 +416,7 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
           onDismiss = _this$props5.onDismiss,
           onFocus = _this$props5.onFocus,
           onMouseOver = _this$props5.onMouseOver,
+          positionContainerDisplay = _this$props5.positionContainerDisplay,
           offsetX = _this$props5.offsetX,
           offsetY = _this$props5.offsetY;
     return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
@@ -440,6 +441,7 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       shouldReturnFocus: true,
       onFocus: onFocus,
       onMouseOver: onMouseOver,
+      positionContainerDisplay: positionContainerDisplay,
       offsetX: offsetX,
       offsetY: offsetY,
       elementRef: element => {

package/lib/Menu/props.js

@@ -59,6 +59,7 @@ const propTypes = {
   constrain: _PositionPropTypes.PositionPropTypes.constrain,
   shouldHideOnSelect: _propTypes.default.bool,
   shouldFocusTriggerOnClose: _propTypes.default.bool,
+  positionContainerDisplay: _propTypes.default.oneOf(['inline-block', 'block']),
   type: _propTypes.default.oneOf(['flyout']),
   id: _propTypes.default.string,
   withArrow: _propTypes.default.bool,
@@ -66,5 +67,5 @@ const propTypes = {
   offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
+const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'positionContainerDisplay', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.27.0",
+  "version": "8.27.1-snapshot-13",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,27 +23,27 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.27.0",
-    "@instructure/ui-color-utils": "8.27.0",
-    "@instructure/ui-test-locator": "8.27.0",
-    "@instructure/ui-test-queries": "8.27.0",
-    "@instructure/ui-test-utils": "8.27.0",
-    "@instructure/ui-themes": "8.27.0"
+    "@instructure/ui-babel-preset": "8.27.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.27.1-snapshot-13",
+    "@instructure/ui-test-queries": "8.27.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-themes": "8.27.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.27.0",
-    "@instructure/emotion": "8.27.0",
-    "@instructure/shared-types": "8.27.0",
-    "@instructure/ui-a11y-utils": "8.27.0",
-    "@instructure/ui-dom-utils": "8.27.0",
-    "@instructure/ui-icons": "8.27.0",
-    "@instructure/ui-popover": "8.27.0",
-    "@instructure/ui-position": "8.27.0",
-    "@instructure/ui-prop-types": "8.27.0",
-    "@instructure/ui-react-utils": "8.27.0",
-    "@instructure/ui-testable": "8.27.0",
-    "@instructure/ui-utils": "8.27.0",
+    "@instructure/console": "8.27.1-snapshot-13",
+    "@instructure/emotion": "8.27.1-snapshot-13",
+    "@instructure/shared-types": "8.27.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-icons": "8.27.1-snapshot-13",
+    "@instructure/ui-popover": "8.27.1-snapshot-13",
+    "@instructure/ui-position": "8.27.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.27.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-testable": "8.27.1-snapshot-13",
+    "@instructure/ui-utils": "8.27.1-snapshot-13",
     "keycode": "^2",
     "prop-types": "^15"
   },

package/src/Menu/index.tsx

@@ -465,6 +465,7 @@ class Menu extends Component<MenuProps> {
       onDismiss,
       onFocus,
       onMouseOver,
+      positionContainerDisplay,
       offsetX,
       offsetY
     } = this.props
@@ -489,6 +490,7 @@ class Menu extends Component<MenuProps> {
         shouldReturnFocus
         onFocus={onFocus}
         onMouseOver={onMouseOver}
+        positionContainerDisplay={positionContainerDisplay}
         offsetX={offsetX}
         offsetY={offsetY}
         elementRef={(element) => {

package/src/Menu/props.ts

@@ -143,6 +143,10 @@ type MenuOwnProps = {
    * If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
    */
   shouldFocusTriggerOnClose?: boolean
+  /**
+   * If a trigger is supplied, this prop can set the CSS `display` property on the `<span>` container element of the underlying Position component
+   */
+  positionContainerDisplay?: 'inline-block' | 'block'
   /**
    * The type of `<Menu />`
    */
@@ -203,6 +207,7 @@ const propTypes: PropValidators<PropKeys> = {
   constrain: PositionPropTypes.constrain,
   shouldHideOnSelect: PropTypes.bool,
   shouldFocusTriggerOnClose: PropTypes.bool,
+  positionContainerDisplay: PropTypes.oneOf(['inline-block', 'block']),
   type: PropTypes.oneOf(['flyout']),
   id: PropTypes.string,
   withArrow: PropTypes.bool,
@@ -231,6 +236,7 @@ const allowedProps: AllowedPropKeys = [
   'constrain',
   'shouldHideOnSelect',
   'shouldFocusTriggerOnClose',
+  'positionContainerDisplay',
   'type',
   'id',
   'withArrow',