@instructure/ui-menu 9.0.2-snapshot-13 → 9.0.2-snapshot-16

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.0.2-snapshot-13](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-13) (2024-06-13)
+## [9.0.2-snapshot-16](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-16) (2024-06-13)
 
-**Note:** Version bump only for package @instructure/ui-menu
+
+### Features
+
+* **ui-menu:** add maxHeight functionality to Menu ([6494c4a](https://github.com/instructure/instructure-ui/commit/6494c4a78522e5c2a16d55ed5f000b8b7647c47d))
 
 
 

package/es/Menu/props.js

@@ -51,7 +51,8 @@ const propTypes = {
   id: PropTypes.string,
   withArrow: PropTypes.bool,
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxHeight: PropTypes.string
 };
-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'];
+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', 'maxHeight'];
 export { propTypes, allowedProps };

package/es/Menu/styles.js

@@ -32,10 +32,15 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
+  const maxHeight = props.maxHeight ? {
+    maxHeight: props.maxHeight,
+    overflow: 'auto'
+  } : {};
   return {
     menu: {
       label: 'menu',
+      ...maxHeight,
       minWidth: componentTheme.minWidth,
       maxWidth: componentTheme.maxWidth,
       listStyleType: 'none',

package/lib/Menu/props.js

@@ -59,6 +59,7 @@ const propTypes = exports.propTypes = {
   id: _propTypes.default.string,
   withArrow: _propTypes.default.bool,
   offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  maxHeight: _propTypes.default.string
 };
-const allowedProps = exports.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'];
+const allowedProps = exports.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', 'maxHeight'];

package/lib/Menu/styles.js

@@ -38,10 +38,15 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
+  const maxHeight = props.maxHeight ? {
+    maxHeight: props.maxHeight,
+    overflow: 'auto'
+  } : {};
   return {
     menu: {
       label: 'menu',
+      ...maxHeight,
       minWidth: componentTheme.minWidth,
       maxWidth: componentTheme.maxWidth,
       listStyleType: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "9.0.2-snapshot-13",
+  "version": "9.0.2-snapshot-16",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.0.2-snapshot-13",
-    "@instructure/ui-babel-preset": "9.0.2-snapshot-13",
-    "@instructure/ui-color-utils": "9.0.2-snapshot-13",
-    "@instructure/ui-test-utils": "9.0.2-snapshot-13",
-    "@instructure/ui-themes": "9.0.2-snapshot-13",
+    "@instructure/ui-axe-check": "9.0.2-snapshot-16",
+    "@instructure/ui-babel-preset": "9.0.2-snapshot-16",
+    "@instructure/ui-color-utils": "9.0.2-snapshot-16",
+    "@instructure/ui-test-utils": "9.0.2-snapshot-16",
+    "@instructure/ui-themes": "9.0.2-snapshot-16",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.0.2-snapshot-13",
-    "@instructure/emotion": "9.0.2-snapshot-13",
-    "@instructure/shared-types": "9.0.2-snapshot-13",
-    "@instructure/ui-a11y-utils": "9.0.2-snapshot-13",
-    "@instructure/ui-dom-utils": "9.0.2-snapshot-13",
-    "@instructure/ui-icons": "9.0.2-snapshot-13",
-    "@instructure/ui-popover": "9.0.2-snapshot-13",
-    "@instructure/ui-position": "9.0.2-snapshot-13",
-    "@instructure/ui-prop-types": "9.0.2-snapshot-13",
-    "@instructure/ui-react-utils": "9.0.2-snapshot-13",
-    "@instructure/ui-testable": "9.0.2-snapshot-13",
-    "@instructure/ui-utils": "9.0.2-snapshot-13",
-    "@instructure/ui-view": "9.0.2-snapshot-13",
+    "@instructure/console": "9.0.2-snapshot-16",
+    "@instructure/emotion": "9.0.2-snapshot-16",
+    "@instructure/shared-types": "9.0.2-snapshot-16",
+    "@instructure/ui-a11y-utils": "9.0.2-snapshot-16",
+    "@instructure/ui-dom-utils": "9.0.2-snapshot-16",
+    "@instructure/ui-icons": "9.0.2-snapshot-16",
+    "@instructure/ui-popover": "9.0.2-snapshot-16",
+    "@instructure/ui-position": "9.0.2-snapshot-16",
+    "@instructure/ui-prop-types": "9.0.2-snapshot-16",
+    "@instructure/ui-react-utils": "9.0.2-snapshot-16",
+    "@instructure/ui-testable": "9.0.2-snapshot-16",
+    "@instructure/ui-utils": "9.0.2-snapshot-16",
+    "@instructure/ui-view": "9.0.2-snapshot-16",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/Menu/props.ts

@@ -166,6 +166,11 @@ type MenuOwnProps = {
    * Works only if `trigger` is provided.
    */
   offsetY?: string | number
+  /**
+   * The maximum height the menu can be. If not set, the menu won't
+   * scroll and will be as tall as the content requires
+   */
+  maxHeight?: string | number
 }
 
 type PropKeys = keyof MenuOwnProps
@@ -212,7 +217,8 @@ const propTypes: PropValidators<PropKeys> = {
   id: PropTypes.string,
   withArrow: PropTypes.bool,
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxHeight: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -241,7 +247,8 @@ const allowedProps: AllowedPropKeys = [
   'id',
   'withArrow',
   'offsetX',
-  'offsetY'
+  'offsetY',
+  'maxHeight'
 ]
 
 export type { MenuProps, MenuStyle }

package/src/Menu/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import type { MenuTheme } from '@instructure/shared-types'
-import type { MenuStyle } from './props'
+import type { MenuStyle, MenuProps } from './props'
 
 /**
  * ---
@@ -35,10 +35,18 @@ import type { MenuStyle } from './props'
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: MenuTheme): MenuStyle => {
+const generateStyle = (
+  componentTheme: MenuTheme,
+  props: MenuProps
+): MenuStyle => {
+  const maxHeight = props.maxHeight
+    ? { maxHeight: props.maxHeight, overflow: 'auto' }
+    : {}
+
   return {
     menu: {
       label: 'menu',
+      ...maxHeight,
       minWidth: componentTheme.minWidth,
       maxWidth: componentTheme.maxWidth,
       listStyleType: 'none',