@instructure/ui-menu 8.16.1-snapshot.2 → 8.17.1-snapshot.14

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
+
+### Bug Fixes
+
+- remove type:"commonjs" from package.json files ([0b243be](https://github.com/instructure/instructure-ui/commit/0b243bee389ee14493e6b3dbb30a8b660c295d3d))
+
 # [8.16.0](https://github.com/instructure/instructure-ui/compare/v8.15.0...v8.16.0) (2022-02-03)
 
 **Note:** Version bump only for package @instructure/ui-menu

package/es/Menu/MenuItem/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
+var _dec, _dec2, _dec3, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
 
 /*
  * The MIT License (MIT)
@@ -28,8 +28,7 @@ var _dec, _dec2, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
 import { Component } from 'react';
 import keycode from 'keycode';
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
-import { uid } from '@instructure/uid';
-import { omitProps, getElementType } from '@instructure/ui-react-utils';
+import { omitProps, getElementType, withDeterministicId } 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';
@@ -46,7 +45,7 @@ id: Menu.Item
 ---
 @tsProps
 **/
-let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItem extends Component {
+let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class MenuItem extends Component {
   constructor(props) {
     super(props);
     this.labelId = void 0;
@@ -130,7 +129,7 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       };
     }
 
-    this.labelId = uid('MenuItem__label');
+    this.labelId = props.deterministicId('MenuItem__label');
   }
 
   get _node() {
@@ -245,6 +244,6 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
 }, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   type: 'button',
   disabled: false
-}, _class2.contextType = MenuContext, _temp)) || _class) || _class);
+}, _class2.contextType = MenuContext, _temp)) || _class) || _class) || _class);
 export default MenuItem;
 export { MenuItem };

package/es/Menu/MenuItemGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -27,8 +27,7 @@ var _dec, _dec2, _class, _class2, _temp;
 /** @jsx jsx */
 import React, { Children, Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
-import { omitProps, safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
-import { uid } from '@instructure/uid';
+import { omitProps, safeCloneElement, matchComponentTypes, withDeterministicId } from '@instructure/ui-react-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { testable } from '@instructure/ui-testable';
 import { MenuItem } from '../MenuItem';
@@ -43,7 +42,7 @@ id: Menu.Group
 ---
 @tsProps
 **/
-let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItemGroup extends Component {
+let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class MenuItemGroup extends Component {
   constructor(props) {
     super(props);
     this._labelId = void 0;
@@ -97,7 +96,7 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       };
     }
 
-    this._labelId = uid('MenuItemGroup');
+    this._labelId = props.deterministicId('MenuItemGroup');
   }
 
   componentDidMount() {
@@ -201,6 +200,6 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   isTabbable: false,
   allowMultiple: false,
   defaultSelected: []
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 export default MenuItemGroup;
 export { MenuItemGroup };

package/es/Menu/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -28,8 +28,7 @@ var _dec, _dec2, _class, _class2, _temp;
 import React, { Children, Component } from 'react';
 import keycode from 'keycode';
 import { Popover } from '@instructure/ui-popover';
-import { uid } from '@instructure/uid';
-import { safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
+import { safeCloneElement, matchComponentTypes, withDeterministicId } 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';
@@ -48,7 +47,7 @@ category: components
 ---
 @tsProps
 **/
-let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Menu extends Component {
+let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Menu extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -59,7 +58,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     this._popover = null;
     this._trigger = null;
     this._menu = null;
-    this._labelId = uid('Menu__label');
+    this._labelId = this.props.deterministicId('Menu__label');
     this._activeSubMenu = void 0;
     this._id = void 0;
     this.ref = null;
@@ -199,7 +198,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       }
     };
 
-    this._id = this.props.id || uid('Menu');
+    this._id = this.props.id || props.deterministicId();
   }
 
   componentDidMount() {
@@ -449,6 +448,6 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   withArrow: true,
   offsetX: 0,
   offsetY: 0
-}, _class2.Item = MenuItem, _class2.Group = MenuItemGroup, _class2.Separator = MenuItemSeparator, _class2.contextType = MenuContext, _temp)) || _class) || _class);
+}, _class2.Item = MenuItem, _class2.Group = MenuItemGroup, _class2.Separator = MenuItemSeparator, _class2.contextType = MenuContext, _temp)) || _class) || _class) || _class);
 export default Menu;
 export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator };

package/lib/Menu/MenuItem/index.js

@@ -15,12 +15,12 @@ var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
 
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 
-var _uid = require("@instructure/uid");
-
 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 _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
@@ -39,7 +39,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
+var _dec, _dec2, _dec3, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
 
 /**
 ---
@@ -48,7 +48,7 @@ id: Menu.Item
 ---
 @tsProps
 **/
-let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItem extends _react.Component {
+let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class MenuItem extends _react.Component {
   constructor(props) {
     super(props);
     this.labelId = void 0;
@@ -132,7 +132,7 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       };
     }
 
-    this.labelId = (0, _uid.uid)('MenuItem__label');
+    this.labelId = props.deterministicId('MenuItem__label');
   }
 
   get _node() {
@@ -247,7 +247,7 @@ let MenuItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 }, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   type: 'button',
   disabled: false
-}, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class) || _class);
+}, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class) || _class) || _class);
 exports.MenuItem = MenuItem;
 var _default = MenuItem;
 exports.default = _default;

package/lib/Menu/MenuItemGroup/index.js

@@ -19,7 +19,7 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
-var _uid = require("@instructure/uid");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 
@@ -33,7 +33,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /**
 ---
@@ -42,7 +42,7 @@ id: Menu.Group
 ---
 @tsProps
 **/
-let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItemGroup extends _react.Component {
+let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class MenuItemGroup extends _react.Component {
   constructor(props) {
     super(props);
     this._labelId = void 0;
@@ -96,7 +96,7 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
       };
     }
 
-    this._labelId = (0, _uid.uid)('MenuItemGroup');
+    this._labelId = props.deterministicId('MenuItemGroup');
   }
 
   componentDidMount() {
@@ -202,7 +202,7 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   isTabbable: false,
   allowMultiple: false,
   defaultSelected: []
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 exports.MenuItemGroup = MenuItemGroup;
 var _default = MenuItemGroup;
 exports.default = _default;

package/lib/Menu/index.js

@@ -34,12 +34,12 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _Popover = require("@instructure/ui-popover/lib/Popover");
 
-var _uid = require("@instructure/uid");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+
 var _console = require("@instructure/console");
 
 var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
@@ -62,7 +62,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /**
 ---
@@ -70,7 +70,7 @@ category: components
 ---
 @tsProps
 **/
-let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Menu extends _react.Component {
+let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Menu extends _react.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -81,7 +81,7 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     this._popover = null;
     this._trigger = null;
     this._menu = null;
-    this._labelId = (0, _uid.uid)('Menu__label');
+    this._labelId = this.props.deterministicId('Menu__label');
     this._activeSubMenu = void 0;
     this._id = void 0;
     this.ref = null;
@@ -221,7 +221,7 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       }
     };
 
-    this._id = this.props.id || (0, _uid.uid)('Menu');
+    this._id = this.props.id || props.deterministicId();
   }
 
   componentDidMount() {
@@ -471,7 +471,7 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   withArrow: true,
   offsetX: 0,
   offsetY: 0
-}, _class2.Item = _MenuItem.MenuItem, _class2.Group = _MenuItemGroup.MenuItemGroup, _class2.Separator = _MenuItemSeparator.MenuItemSeparator, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class) || _class);
+}, _class2.Item = _MenuItem.MenuItem, _class2.Group = _MenuItemGroup.MenuItemGroup, _class2.Separator = _MenuItemSeparator.MenuItemSeparator, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class) || _class) || _class);
 exports.Menu = Menu;
 var _default = Menu;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.16.1-snapshot.2+25359e770",
+  "version": "8.17.1-snapshot.14+f0b03679c",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,27 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-color-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-test-locator": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-test-queries": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-test-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-themes": "8.16.1-snapshot.2+25359e770"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-color-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-test-locator": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-test-queries": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-themes": "8.17.1-snapshot.14+f0b03679c"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.16.1-snapshot.2+25359e770",
-    "@instructure/emotion": "8.16.1-snapshot.2+25359e770",
-    "@instructure/shared-types": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-a11y-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-dom-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-icons": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-popover": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-position": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-prop-types": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-react-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-testable": "8.16.1-snapshot.2+25359e770",
-    "@instructure/ui-utils": "8.16.1-snapshot.2+25359e770",
-    "@instructure/uid": "8.16.1-snapshot.2+25359e770",
+    "@instructure/console": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/emotion": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/shared-types": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-a11y-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-dom-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-icons": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-popover": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-position": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-testable": "8.17.1-snapshot.14+f0b03679c",
+    "@instructure/ui-utils": "8.17.1-snapshot.14+f0b03679c",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -55,5 +54,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "25359e77043270cf26e92b14f396b498f1540c62"
+  "gitHead": "f0b03679c4c4d05d4d650d22646ac1dc6791e935"
 }

package/src/Menu/MenuItem/index.tsx

@@ -26,8 +26,11 @@ import { Component } from 'react'
 import keycode from 'keycode'
 
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
-import { uid } from '@instructure/uid'
-import { omitProps, getElementType } from '@instructure/ui-react-utils'
+import {
+  omitProps,
+  getElementType,
+  withDeterministicId
+} 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'
@@ -48,6 +51,7 @@ id: Menu.Item
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class MenuItem extends Component<MenuItemProps, MenuItemState> {
@@ -71,7 +75,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
       }
     }
 
-    this.labelId = uid('MenuItem__label')
+    this.labelId = props.deterministicId!('MenuItem__label')
   }
 
   get _node() {

package/src/Menu/MenuItem/props.ts

@@ -34,6 +34,7 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type OnMenuItemSelect = (
   e: React.MouseEvent,
@@ -83,7 +84,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuItemProps = MenuItemOwnProps &
   WithStyleProps<MenuItemTheme, MenuItemStyle> &
-  OtherHTMLAttributes<MenuItemOwnProps>
+  OtherHTMLAttributes<MenuItemOwnProps> & WithDeterministicIdProps
 
 type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>
 

package/src/Menu/MenuItemGroup/index.tsx

@@ -29,9 +29,9 @@ import { withStyle, jsx } from '@instructure/emotion'
 import {
   omitProps,
   safeCloneElement,
-  matchComponentTypes
+  matchComponentTypes,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
-import { uid } from '@instructure/uid'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { testable } from '@instructure/ui-testable'
 
@@ -59,6 +59,7 @@ id: Menu.Group
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
@@ -83,7 +84,7 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
       }
     }
 
-    this._labelId = uid('MenuItemGroup')
+    this._labelId = props.deterministicId!('MenuItemGroup')
   }
 
   private _labelId: string

package/src/Menu/MenuItemGroup/props.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import {
@@ -39,7 +40,7 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { MenuItemProps } from '../MenuItem/props'
-import React from 'react'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type MenuGroupOwnProps = {
   label: React.ReactNode
@@ -87,7 +88,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuGroupProps = MenuGroupOwnProps &
   WithStyleProps<MenuGroupTheme, MenuGroupStyle> &
-  OtherHTMLAttributes<MenuGroupOwnProps>
+  OtherHTMLAttributes<MenuGroupOwnProps> &
+  WithDeterministicIdProps
 
 type MenuGroupStyle = ComponentStyle<'menuItemGroup' | 'label' | 'items'>
 

package/src/Menu/index.tsx

@@ -26,10 +26,10 @@ import React, { Children, Component, ReactElement } from 'react'
 import keycode from 'keycode'
 
 import { Popover } from '@instructure/ui-popover'
-import { uid } from '@instructure/uid'
 import {
   safeCloneElement,
-  matchComponentTypes
+  matchComponentTypes,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
 import { containsActiveElement } from '@instructure/ui-dom-utils'
@@ -64,11 +64,11 @@ category: components
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Menu extends Component<MenuProps> {
   static readonly componentId = 'Menu'
-
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
@@ -97,7 +97,8 @@ class Menu extends Component<MenuProps> {
   _trigger: MenuItem | (React.ReactInstance & { focus?: () => void }) | null =
     null
   _menu: HTMLUListElement | null = null
-  _labelId = uid('Menu__label')
+  _labelId = this.props.deterministicId!('Menu__label')
+
   _activeSubMenu?: Menu | null
   _id: string
 
@@ -114,9 +115,8 @@ class Menu extends Component<MenuProps> {
   constructor(props: MenuProps) {
     super(props)
 
-    this._id = this.props.id || uid('Menu')
+    this._id = this.props.id || props.deterministicId!()
   }
-
   componentDidMount() {
     this.props.makeStyles?.()
   }

package/src/Menu/props.ts

@@ -43,6 +43,7 @@ import type {
   PositionMountNode
 } from '@instructure/ui-position'
 import type { Popover } from '@instructure/ui-popover'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 import { MenuItem } from './MenuItem'
 import type { Menu } from './index'
@@ -171,7 +172,7 @@ type MenuProps = MenuOwnProps &
   // controls can be passed in renderChildren and used later as aria-controls
   Omit<OtherHTMLAttributes<MenuOwnProps>, 'controls'> & {
     controls?: React.AriaAttributes['aria-controls']
-  }
+  } & WithDeterministicIdProps
 
 type MenuStyle = ComponentStyle<'menu'>
 

package/tsconfig.build.json

@@ -24,7 +24,6 @@
     { "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": "../uid/tsconfig.build.json" }
+    { "path": "../ui-utils/tsconfig.build.json" }
   ]
 }