@instructure/ui-menu 10.2.3-snapshot-0 → 10.2.3-snapshot-1

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.
 
-## [10.2.3-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-0) (2024-09-13)
+## [10.2.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-1) (2024-09-17)
 
-**Note:** Version bump only for package @instructure/ui-menu
+
+### Features
+
+* **ui-menu:** add renderLabelInfo to Menu ([2bc8554](https://github.com/instructure/instructure-ui/commit/2bc85544b5c51aba4a98bc5082b98b8e2e08b06e))
 
 
 

package/es/Menu/MenuItem/index.js

@@ -26,7 +26,7 @@ var _dec, _dec2, _dec3, _class, _MenuItem, _IconCheckSolid, _IconArrowOpenEndSol
 import React, { Component } from 'react';
 import keycode from 'keycode';
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
-import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
+import { omitProps, getElementType, withDeterministicId, callRenderProp } 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';
@@ -158,10 +158,11 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     refNode.focus();
   }
   renderContent() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
     const _this$props4 = this.props,
       children = _this$props4.children,
-      type = _this$props4.type;
+      type = _this$props4.type,
+      renderLabelInfo = _this$props4.renderLabelInfo;
     return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
@@ -169,10 +170,12 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       id: this.labelId
     }, children), type === 'flyout' && jsx("span", {
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
-    }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null))));
+    }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null))), renderLabelInfo && jsx("span", {
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo
+    }, callRenderProp(renderLabelInfo)));
   }
   render() {
-    var _this$props$styles4;
+    var _this$props$styles5;
     const _this$props5 = this.props,
       disabled = _this$props5.disabled,
       controls = _this$props5.controls,
@@ -195,7 +198,7 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       onKeyUp: createChainedFunction(onKeyUp, this.handleKeyUp),
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       ref: this.handleRef,
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
       onMouseOver: this.handleMouseOver
     }), this.renderContent());
   }

package/es/Menu/MenuItem/props.js

@@ -39,7 +39,8 @@ const propTypes = {
   type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   href: PropTypes.string,
-  target: PropTypes.string
+  target: PropTypes.string,
+  renderLabelInfo: PropTypes.node
 };
-const allowedProps = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href', 'target'];
+const allowedProps = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href', 'target', 'renderLabelInfo'];
 export { propTypes, allowedProps };

package/es/Menu/MenuItem/styles.js

@@ -118,6 +118,13 @@ const generateStyle = (componentTheme, props) => {
       ...roleIconStyles,
       ...flyoutIconStyles
     },
+    labelInfo: {
+      label: 'menuItem__labelInfo',
+      height: '100%',
+      float: 'right',
+      clear: 'right',
+      paddingRight: '1.75rem'
+    },
     label: {
       label: 'menuItem__label',
       color: componentTheme.labelColor

package/es/Menu/index.js

@@ -290,7 +290,8 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
             onBlur: this.handleMenuItemBlur,
             tabIndex: isTabbable ? 0 : -1,
             type: "flyout",
-            disabled: submenuDisabled
+            disabled: submenuDisabled,
+            renderLabelInfo: child.props.renderLabelInfo
           }, child.props.title || child.props.label)
         }));
       }

package/es/Menu/props.js

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

package/lib/Menu/MenuItem/index.js

@@ -13,6 +13,7 @@ var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEnd
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
@@ -170,10 +171,11 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
     refNode.focus();
   }
   renderContent() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
     const _this$props4 = this.props,
       children = _this$props4.children,
-      type = _this$props4.type;
+      type = _this$props4.type,
+      renderLabelInfo = _this$props4.renderLabelInfo;
     return (0, _emotion.jsx)("span", null, (type === 'checkbox' || type === 'radio') && (0, _emotion.jsx)("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _emotion.jsx)(_IconCheckSolid2.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
@@ -181,10 +183,12 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
       id: this.labelId
     }, children), type === 'flyout' && (0, _emotion.jsx)("span", {
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
-    }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))));
+    }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))), renderLabelInfo && (0, _emotion.jsx)("span", {
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo
+    }, (0, _callRenderProp.callRenderProp)(renderLabelInfo)));
   }
   render() {
-    var _this$props$styles4;
+    var _this$props$styles5;
     const _this$props5 = this.props,
       disabled = _this$props5.disabled,
       controls = _this$props5.controls,
@@ -207,7 +211,7 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
       onKeyUp: (0, _createChainedFunction.createChainedFunction)(onKeyUp, this.handleKeyUp),
       onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
       ref: this.handleRef,
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
       onMouseOver: this.handleMouseOver
     }), this.renderContent());
   }

package/lib/Menu/MenuItem/props.js

@@ -46,6 +46,7 @@ const propTypes = exports.propTypes = {
   type: _propTypes.default.oneOf(['button', 'checkbox', 'radio', 'flyout']),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   href: _propTypes.default.string,
-  target: _propTypes.default.string
+  target: _propTypes.default.string,
+  renderLabelInfo: _propTypes.default.node
 };
-const allowedProps = exports.allowedProps = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href', 'target'];
+const allowedProps = exports.allowedProps = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href', 'target', 'renderLabelInfo'];

package/lib/Menu/MenuItem/styles.js

@@ -124,6 +124,13 @@ const generateStyle = (componentTheme, props) => {
       ...roleIconStyles,
       ...flyoutIconStyles
     },
+    labelInfo: {
+      label: 'menuItem__labelInfo',
+      height: '100%',
+      float: 'right',
+      clear: 'right',
+      paddingRight: '1.75rem'
+    },
     label: {
       label: 'menuItem__label',
       color: componentTheme.labelColor

package/lib/Menu/index.js

@@ -319,7 +319,8 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
             onBlur: this.handleMenuItemBlur,
             tabIndex: isTabbable ? 0 : -1,
             type: "flyout",
-            disabled: submenuDisabled
+            disabled: submenuDisabled,
+            renderLabelInfo: child.props.renderLabelInfo
           }, child.props.title || child.props.label)
         }));
       }

package/lib/Menu/props.js

@@ -60,6 +60,7 @@ const propTypes = exports.propTypes = {
   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
+  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'];
+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.2.3-snapshot-0",
+  "version": "10.2.3-snapshot-1",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.3-snapshot-0",
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-0",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-0",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-0",
-    "@instructure/ui-themes": "10.2.3-snapshot-0",
+    "@instructure/ui-axe-check": "10.2.3-snapshot-1",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-1",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-themes": "10.2.3-snapshot-1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,19 +35,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.3-snapshot-0",
-    "@instructure/emotion": "10.2.3-snapshot-0",
-    "@instructure/shared-types": "10.2.3-snapshot-0",
-    "@instructure/ui-a11y-utils": "10.2.3-snapshot-0",
-    "@instructure/ui-dom-utils": "10.2.3-snapshot-0",
-    "@instructure/ui-icons": "10.2.3-snapshot-0",
-    "@instructure/ui-popover": "10.2.3-snapshot-0",
-    "@instructure/ui-position": "10.2.3-snapshot-0",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-0",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-0",
-    "@instructure/ui-testable": "10.2.3-snapshot-0",
-    "@instructure/ui-utils": "10.2.3-snapshot-0",
-    "@instructure/ui-view": "10.2.3-snapshot-0",
+    "@instructure/console": "10.2.3-snapshot-1",
+    "@instructure/emotion": "10.2.3-snapshot-1",
+    "@instructure/shared-types": "10.2.3-snapshot-1",
+    "@instructure/ui-a11y-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-dom-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-icons": "10.2.3-snapshot-1",
+    "@instructure/ui-popover": "10.2.3-snapshot-1",
+    "@instructure/ui-position": "10.2.3-snapshot-1",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-1",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-testable": "10.2.3-snapshot-1",
+    "@instructure/ui-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-view": "10.2.3-snapshot-1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/Menu/MenuItem/index.tsx

@@ -29,7 +29,8 @@ import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
 import {
   omitProps,
   getElementType,
-  withDeterministicId
+  withDeterministicId,
+  callRenderProp
 } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils'
@@ -209,7 +210,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
   }
 
   renderContent() {
-    const { children, type } = this.props
+    const { children, type, renderLabelInfo } = this.props
 
     return (
       <span>
@@ -226,6 +227,11 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
             <IconArrowOpenEndSolid />
           </span>
         )}
+        {renderLabelInfo && (
+          <span css={this.props.styles?.labelInfo}>
+            {callRenderProp(renderLabelInfo)}
+          </span>
+        )}
       </span>
     )
   }

package/src/Menu/MenuItem/props.ts

@@ -92,6 +92,10 @@ type MenuItemOwnProps = {
    * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
    */
   target?: string
+  /**
+   * Content to render in the label's info region
+   */
+  renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof MenuItemOwnProps
@@ -103,7 +107,7 @@ type MenuItemProps = MenuItemOwnProps &
   OtherHTMLAttributes<MenuItemOwnProps> &
   WithDeterministicIdProps
 
-type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>
+type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'labelInfo' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node.isRequired,
@@ -120,7 +124,8 @@ const propTypes: PropValidators<PropKeys> = {
   type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   href: PropTypes.string,
-  target: PropTypes.string
+  target: PropTypes.string,
+  renderLabelInfo: PropTypes.node
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -138,7 +143,8 @@ const allowedProps: AllowedPropKeys = [
   'type',
   'value',
   'href',
-  'target'
+  'target',
+  'renderLabelInfo'
 ]
 type MenuItemState = {
   selected: boolean

package/src/Menu/MenuItem/styles.ts

@@ -138,6 +138,13 @@ const generateStyle = (
       ...roleIconStyles,
       ...flyoutIconStyles
     },
+    labelInfo: {
+      label: 'menuItem__labelInfo',
+      height: '100%',
+      float: 'right',
+      clear: 'right',
+      paddingRight: '1.75rem'
+    },
     label: {
       label: 'menuItem__label',
       color: componentTheme.labelColor

package/src/Menu/index.tsx

@@ -407,6 +407,7 @@ class Menu extends Component<MenuProps> {
                     tabIndex={isTabbable ? 0 : -1}
                     type="flyout"
                     disabled={submenuDisabled}
+                    renderLabelInfo={child.props.renderLabelInfo}
                   >
                     {child.props.title || child.props.label}
                   </MenuItem>

package/src/Menu/props.ts

@@ -171,6 +171,10 @@ type MenuOwnProps = {
    * scroll and will be as tall as the content requires
    */
   maxHeight?: string | number
+  /**
+   * Content to render in the label's info region. It is only visible on nested Menus.
+   */
+  renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof MenuOwnProps
@@ -218,7 +222,8 @@ const propTypes: PropValidators<PropKeys> = {
   withArrow: PropTypes.bool,
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  maxHeight: PropTypes.string
+  maxHeight: PropTypes.string,
+  renderLabelInfo: PropTypes.node
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -248,7 +253,8 @@ const allowedProps: AllowedPropKeys = [
   'withArrow',
   'offsetX',
   'offsetY',
-  'maxHeight'
+  'maxHeight',
+  'renderLabelInfo'
 ]
 
 export type { MenuProps, MenuStyle }