@instructure/ui-menu 10.26.1 → 11.0.0

package/lib/Menu/props.js

@@ -1,14 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.allowedProps = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -33,34 +28,4 @@ var _Children = require("@instructure/ui-prop-types/lib/Children.js");
  * SOFTWARE.
  */
 
-const propTypes = exports.propTypes = {
-  children: _Children.Children.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
-  label: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  trigger: _propTypes.default.node,
-  placement: _PositionPropTypes.PositionPropTypes.placement,
-  defaultShow: _propTypes.default.bool,
-  show: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultShow'),
-  onToggle: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onDismiss: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onKeyUp: _propTypes.default.func,
-  menuRef: _propTypes.default.func,
-  popoverRef: _propTypes.default.func,
-  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
-  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,
-  offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  maxHeight: _propTypes.default.string,
-  renderLabelInfo: _propTypes.default.node
-};
 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', 'renderLabelInfo'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "10.26.1",
+  "version": "11.0.0",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,35 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1",
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-color-utils": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-axe-check": "11.0.0",
+    "@instructure/ui-babel-preset": "11.0.0",
+    "@instructure/ui-color-utils": "11.0.0",
+    "@instructure/ui-themes": "11.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-a11y-utils": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-icons": "10.26.1",
-    "@instructure/ui-popover": "10.26.1",
-    "@instructure/ui-position": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "keycode": "^2",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.0",
+    "@instructure/emotion": "11.0.0",
+    "@instructure/shared-types": "11.0.0",
+    "@instructure/ui-a11y-utils": "11.0.0",
+    "@instructure/ui-dom-utils": "11.0.0",
+    "@instructure/ui-icons": "11.0.0",
+    "@instructure/ui-popover": "11.0.0",
+    "@instructure/ui-position": "11.0.0",
+    "@instructure/ui-react-utils": "11.0.0",
+    "@instructure/ui-utils": "11.0.0",
+    "@instructure/ui-view": "11.0.0",
+    "keycode": "^2"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "publishConfig": {
     "access": "public"

package/src/Menu/MenuItem/index.tsx

@@ -34,7 +34,6 @@ import {
 } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils'
-import { testable } from '@instructure/ui-testable'
 import { withStyle } from '@instructure/emotion'
 
 import { MenuContext } from '../../MenuContext'
@@ -42,7 +41,7 @@ import { MenuContext } from '../../MenuContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { MenuItemProps, MenuItemState } from './props'
 
 /**
@@ -53,11 +52,9 @@ id: Menu.Item
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class MenuItem extends Component<MenuItemProps, MenuItemState> {
   static readonly componentId = 'Menu.Item'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     type: 'button',
@@ -266,6 +263,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
         ref={this.handleRef}
         css={this.props.styles?.menuItem}
         onMouseOver={this.handleMouseOver}
+        data-cid="MenuItem"
       >
         {this.renderContent()}
       </ElementType>

package/src/Menu/MenuItem/props.ts

@@ -23,13 +23,10 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
 import MenuItem from '../MenuItem'
-import { controllable } from '@instructure/ui-prop-types'
 
 import type {
   AsElementType,
-  PropValidators,
   MenuItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -108,26 +105,6 @@ type MenuItemProps = MenuItemOwnProps &
   WithDeterministicIdProps
 
 type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'labelInfo' | 'label'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node.isRequired,
-  defaultSelected: PropTypes.bool,
-  selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
-  onSelect: PropTypes.func,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  controls: PropTypes.string,
-  disabled: PropTypes.bool,
-  as: PropTypes.elementType,
-  type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  href: PropTypes.string,
-  target: PropTypes.string,
-  renderLabelInfo: PropTypes.node
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'defaultSelected',
@@ -150,4 +127,4 @@ type MenuItemState = {
   selected: boolean
 }
 export type { MenuItemProps, MenuItemStyle, MenuItemState, OnMenuItemSelect }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Menu/MenuItemGroup/index.tsx

@@ -32,7 +32,6 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { MenuItem } from '../MenuItem'
 import type { OnMenuItemSelect, MenuItemProps } from '../MenuItem/props'
@@ -42,7 +41,7 @@ import type { MenuSeparatorProps } from '../MenuItemSeparator/props'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { MenuGroupProps, MenuGroupState } from './props'
 
 type MenuItemChild = ComponentElement<MenuItemProps, MenuItem>
@@ -59,11 +58,9 @@ id: Menu.Group
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
   static readonly componentId = 'Menu.Group'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     disabled: false,
@@ -231,6 +228,7 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
         {...props}
         css={this.props.styles?.menuItemGroup}
         ref={this.handleRef}
+        data-cid="MenuItemGroup"
       >
         {this.renderLabel()}
         <div

package/src/Menu/MenuItemGroup/props.ts

@@ -23,18 +23,10 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  controllable,
-  Children as ChildrenPropTypes
-} from '@instructure/ui-prop-types'
 
 import { MenuItem } from '../MenuItem'
-import { MenuItemSeparator } from '../MenuItemSeparator'
 
 import type {
-  PropValidators,
   MenuGroupTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -92,21 +84,6 @@ type MenuGroupProps = MenuGroupOwnProps &
   WithDeterministicIdProps
 
 type MenuGroupStyle = ComponentStyle<'menuItemGroup' | 'label' | 'items'>
-
-const propTypes: PropValidators<PropKeys> = {
-  label: PropTypes.node.isRequired,
-  allowMultiple: PropTypes.bool,
-  children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
-  selected: controllable(PropTypes.array, 'onSelect', 'defaultSelected'),
-  defaultSelected: PropTypes.array,
-  onSelect: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  controls: PropTypes.string,
-  itemRef: PropTypes.func,
-  disabled: PropTypes.bool,
-  isTabbable: PropTypes.bool
-}
-
 const allowedProps: AllowedPropKeys = [
   'label',
   'allowMultiple',
@@ -125,4 +102,4 @@ type MenuGroupState = {
   selected: (string | number)[]
 }
 export type { MenuGroupProps, MenuGroupStyle, MenuGroupState }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Menu/MenuItemSeparator/index.tsx

@@ -25,13 +25,12 @@
 import { Component } from 'react'
 
 import { withStyle } from '@instructure/emotion'
-import { testable } from '@instructure/ui-testable'
 import { omitProps } from '@instructure/ui-react-utils'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { MenuSeparatorProps } from './props'
 
 /**
@@ -42,11 +41,9 @@ id: Menu.Separator
 @module MenuItemSeparator
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class MenuItemSeparator extends Component<MenuSeparatorProps> {
   static readonly componentId = 'Menu.Separator'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
 
   ref: Element | null = null
@@ -73,6 +70,7 @@ class MenuItemSeparator extends Component<MenuSeparatorProps> {
         role="presentation"
         css={this.props.styles?.menuItemSeparator}
         ref={this.handleRef}
+        data-cid="MenuItemSeparator"
       />
     )
   }

package/src/Menu/MenuItemSeparator/props.ts

@@ -24,7 +24,6 @@
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
-  PropValidators,
   MenuSeparatorTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -43,9 +42,7 @@ type MenuSeparatorProps = MenuSeparatorOwnProps &
 
 type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'>
 
-const propTypes: PropValidators<PropKeys> = {}
-
 const allowedProps: AllowedPropKeys = []
 
 export type { MenuSeparatorProps, MenuSeparatorStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Menu/index.tsx

@@ -33,7 +33,6 @@ import {
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
 import { containsActiveElement } from '@instructure/ui-dom-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { MenuContext } from '../MenuContext'
 import { MenuItem } from './MenuItem'
@@ -47,7 +46,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { MenuProps } from './props'
 
 type MenuChild = ComponentElement<MenuProps, Menu>
@@ -65,10 +64,8 @@ category: components
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class Menu extends Component<MenuProps> {
   static readonly componentId = 'Menu'
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     label: null,
@@ -433,6 +430,7 @@ class Menu extends Component<MenuProps> {
           onKeyDown={this.handleMenuKeyDown}
           onKeyUp={onKeyUp}
           ref={this.handleRef}
+          data-cid="Menu"
         >
           {this.renderChildren()}
         </div>
@@ -460,6 +458,7 @@ class Menu extends Component<MenuProps> {
 
     return trigger ? (
       <Popover
+        data-cid="Menu"
         isShowingContent={show}
         defaultIsShowingContent={defaultShow}
         onHideContent={(event, { documentClick }) => {
@@ -498,7 +497,7 @@ class Menu extends Component<MenuProps> {
           id: this._labelId,
           onMouseOver: this.handleTriggerMouseOver,
           onKeyDown: this.handleTriggerKeyDown,
-          disabled: (trigger as ReactElement).props.disabled || disabled
+          disabled: (trigger as ReactElement<any>).props.disabled || disabled
         })}
         defaultFocusElement={() =>
           this._popover?._contentElement?.querySelector('[class$="menuItem"]')

package/src/Menu/props.ts

@@ -23,19 +23,8 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
 
-import { PositionPropTypes } from '@instructure/ui-position'
-import {
-  controllable,
-  Children as ChildrenPropTypes
-} from '@instructure/ui-prop-types'
-
-import type {
-  PropValidators,
-  MenuTheme,
-  OtherHTMLAttributes
-} from '@instructure/shared-types'
+import type { MenuTheme, OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   PlacementPropValues,
@@ -189,43 +178,6 @@ type MenuProps = MenuOwnProps &
   } & WithDeterministicIdProps
 
 type MenuStyle = ComponentStyle<'menu'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: ChildrenPropTypes.oneOf([
-    'MenuItem',
-    'MenuItemGroup',
-    'MenuItemSeparator',
-    'Menu'
-  ]),
-  label: PropTypes.string,
-  disabled: PropTypes.bool,
-  trigger: PropTypes.node,
-  placement: PositionPropTypes.placement,
-  defaultShow: PropTypes.bool,
-  show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
-  onToggle: PropTypes.func,
-  onSelect: PropTypes.func,
-  onDismiss: PropTypes.func,
-  onFocus: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  menuRef: PropTypes.func,
-  popoverRef: PropTypes.func,
-  mountNode: PositionPropTypes.mountNode,
-  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]),
-  maxHeight: PropTypes.string,
-  renderLabelInfo: PropTypes.node
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'label',
@@ -258,4 +210,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { MenuProps, MenuStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -18,9 +18,7 @@
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-popover/tsconfig.build.json" },
     { "path": "../ui-position/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" }