@instructure/ui-menu 10.26.1-snapshot-2 → 10.26.2

package/lib/Menu/props.js

@@ -1,9 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = void 0;
+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");
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +33,34 @@ exports.allowedProps = void 0;
  * 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-snapshot-2",
+  "version": "10.26.2",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,35 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.26.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.26.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-themes": "10.26.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.26.2",
+    "@instructure/ui-babel-preset": "10.26.2",
+    "@instructure/ui-color-utils": "10.26.2",
+    "@instructure/ui-themes": "10.26.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1-snapshot-2",
-    "@instructure/emotion": "10.26.1-snapshot-2",
-    "@instructure/shared-types": "10.26.1-snapshot-2",
-    "@instructure/ui-a11y-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-dom-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-icons": "10.26.1-snapshot-2",
-    "@instructure/ui-popover": "10.26.1-snapshot-2",
-    "@instructure/ui-position": "10.26.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-utils": "10.26.1-snapshot-2",
-    "@instructure/ui-view": "10.26.1-snapshot-2",
-    "keycode": "^2"
+    "@instructure/console": "10.26.2",
+    "@instructure/emotion": "10.26.2",
+    "@instructure/shared-types": "10.26.2",
+    "@instructure/ui-a11y-utils": "10.26.2",
+    "@instructure/ui-dom-utils": "10.26.2",
+    "@instructure/ui-icons": "10.26.2",
+    "@instructure/ui-popover": "10.26.2",
+    "@instructure/ui-position": "10.26.2",
+    "@instructure/ui-prop-types": "10.26.2",
+    "@instructure/ui-react-utils": "10.26.2",
+    "@instructure/ui-testable": "10.26.2",
+    "@instructure/ui-utils": "10.26.2",
+    "@instructure/ui-view": "10.26.2",
+    "keycode": "^2",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": ">=18 <=19"
+    "react": ">=16.14 <=18"
   },
   "publishConfig": {
     "access": "public"

package/src/Menu/MenuItem/index.tsx

@@ -34,6 +34,7 @@ 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'
@@ -41,7 +42,7 @@ import { MenuContext } from '../../MenuContext'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { MenuItemProps, MenuItemState } from './props'
 
 /**
@@ -52,9 +53,11 @@ 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',
@@ -263,7 +266,6 @@ 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,10 +23,13 @@
  */
 
 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'
@@ -105,6 +108,26 @@ 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',
@@ -127,4 +150,4 @@ type MenuItemState = {
   selected: boolean
 }
 export type { MenuItemProps, MenuItemStyle, MenuItemState, OnMenuItemSelect }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Menu/MenuItemGroup/index.tsx

@@ -32,6 +32,7 @@ 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'
@@ -41,7 +42,7 @@ import type { MenuSeparatorProps } from '../MenuItemSeparator/props'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { MenuGroupProps, MenuGroupState } from './props'
 
 type MenuItemChild = ComponentElement<MenuItemProps, MenuItem>
@@ -58,9 +59,11 @@ 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,
@@ -228,7 +231,6 @@ 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,10 +23,18 @@
  */
 
 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'
@@ -84,6 +92,21 @@ 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',
@@ -102,4 +125,4 @@ type MenuGroupState = {
   selected: (string | number)[]
 }
 export type { MenuGroupProps, MenuGroupStyle, MenuGroupState }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Menu/MenuItemSeparator/index.tsx

@@ -25,12 +25,13 @@
 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 { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { MenuSeparatorProps } from './props'
 
 /**
@@ -41,9 +42,11 @@ 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
@@ -70,7 +73,6 @@ 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,6 +24,7 @@
 
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
+  PropValidators,
   MenuSeparatorTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -42,7 +43,9 @@ type MenuSeparatorProps = MenuSeparatorOwnProps &
 
 type MenuSeparatorStyle = ComponentStyle<'menuItemSeparator'>
 
+const propTypes: PropValidators<PropKeys> = {}
+
 const allowedProps: AllowedPropKeys = []
 
 export type { MenuSeparatorProps, MenuSeparatorStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/Menu/index.tsx

@@ -33,6 +33,7 @@ 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'
@@ -46,7 +47,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { MenuProps } from './props'
 
 type MenuChild = ComponentElement<MenuProps, Menu>
@@ -64,8 +65,10 @@ 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,
@@ -430,7 +433,6 @@ class Menu extends Component<MenuProps> {
           onKeyDown={this.handleMenuKeyDown}
           onKeyUp={onKeyUp}
           ref={this.handleRef}
-          data-cid="Menu"
         >
           {this.renderChildren()}
         </div>
@@ -458,7 +460,6 @@ class Menu extends Component<MenuProps> {
 
     return trigger ? (
       <Popover
-        data-cid="Menu"
         isShowingContent={show}
         defaultIsShowingContent={defaultShow}
         onHideContent={(event, { documentClick }) => {
@@ -497,7 +498,7 @@ class Menu extends Component<MenuProps> {
           id: this._labelId,
           onMouseOver: this.handleTriggerMouseOver,
           onKeyDown: this.handleTriggerKeyDown,
-          disabled: (trigger as ReactElement<any>).props.disabled || disabled
+          disabled: (trigger as ReactElement).props.disabled || disabled
         })}
         defaultFocusElement={() =>
           this._popover?._contentElement?.querySelector('[class$="menuItem"]')

package/src/Menu/props.ts

@@ -23,8 +23,19 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
 
-import type { MenuTheme, OtherHTMLAttributes } from '@instructure/shared-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 { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   PlacementPropValues,
@@ -178,6 +189,43 @@ 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',
@@ -210,4 +258,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { MenuProps, MenuStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -18,7 +18,9 @@
     { "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" }