@instructure/ui-menu 10.13.0 → 10.13.1-pr-snapshot-1741357986437

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/Menu/MenuItem/index.js +17 -22
  3. package/lib/Menu/MenuItem/props.js +2 -2
  4. package/lib/Menu/MenuItemGroup/index.js +9 -12
  5. package/lib/Menu/MenuItemGroup/props.js +3 -4
  6. package/lib/Menu/MenuItemSeparator/index.js +4 -4
  7. package/lib/Menu/__new-tests__/Menu.test.js +4 -4
  8. package/lib/Menu/index.js +17 -19
  9. package/lib/Menu/props.js +7 -8
  10. package/package.json +19 -19
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.13.1-pr-snapshot-1741357986437](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-pr-snapshot-1741357986437) (2025-03-07)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-menu
9
+
10
+
11
+
12
+
13
+
6
14
  # [10.13.0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.13.0) (2025-03-06)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-menu
package/lib/Menu/MenuItem/index.js CHANGED
@@ -8,16 +8,11 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.MenuItem = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _keycode = _interopRequireDefault(require("keycode"));
11
- var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
12
- var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
13
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
14
- var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
15
- var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
16
- var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
17
- var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
18
- var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
19
- var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
20
- var _testable = require("@instructure/ui-testable/lib/testable.js");
11
+ var _uiIcons = require("@instructure/ui-icons");
12
+ var _uiReactUtils = require("@instructure/ui-react-utils");
13
+ var _uiUtils = require("@instructure/ui-utils");
14
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
15
+ var _uiTestable = require("@instructure/ui-testable");
21
16
  var _emotion = require("@instructure/emotion");
22
17
  var _MenuContext = require("../../MenuContext");
23
18
  var _styles = _interopRequireDefault(require("./styles"));
@@ -54,7 +49,7 @@ parent: Menu
54
49
  id: Menu.Item
55
50
  ---
56
51
  **/
57
- let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_MenuItem = class MenuItem extends _react.Component {
52
+ let MenuItem = exports.MenuItem = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_MenuItem = class MenuItem extends _react.Component {
58
53
  constructor(props) {
59
54
  super(props);
60
55
  this.labelId = void 0;
@@ -94,7 +89,7 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
94
89
  e.stopPropagation();
95
90
  if (enterKey) {
96
91
  // handle space key on keyUp for FF
97
- const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
92
+ const refNode = (0, _uiDomUtils.findDOMNode)(this.ref);
98
93
  refNode.click();
99
94
  }
100
95
  }
@@ -106,7 +101,7 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
106
101
  e.preventDefault();
107
102
  e.stopPropagation();
108
103
  if (spaceKey) {
109
- const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
104
+ const refNode = (0, _uiDomUtils.findDOMNode)(this.ref);
110
105
  refNode.click();
111
106
  }
112
107
  }
@@ -146,7 +141,7 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
146
141
  }
147
142
  }
148
143
  get elementType() {
149
- return (0, _getElementType.getElementType)(MenuItem, this.props);
144
+ return (0, _uiReactUtils.getElementType)(MenuItem, this.props);
150
145
  }
151
146
  get role() {
152
147
  switch (this.props.type) {
@@ -162,10 +157,10 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
162
157
  return typeof this.props.selected === 'undefined' ? this.state.selected : this.props.selected;
163
158
  }
164
159
  get focused() {
165
- return (0, _isActiveElement.isActiveElement)(this.ref);
160
+ return (0, _uiDomUtils.isActiveElement)(this.ref);
166
161
  }
167
162
  focus() {
168
- const refNode = (0, _findDOMNode.findDOMNode)(this.ref);
163
+ const refNode = (0, _uiDomUtils.findDOMNode)(this.ref);
169
164
  refNode.focus();
170
165
  }
171
166
  renderContent() {
@@ -176,14 +171,14 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
176
171
  renderLabelInfo = _this$props4.renderLabelInfo;
177
172
  return (0, _emotion.jsx)("span", null, (type === 'checkbox' || type === 'radio') && (0, _emotion.jsx)("span", {
178
173
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
179
- }, this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _emotion.jsx)(_IconCheckSolid2.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
174
+ }, this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
180
175
  css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
181
176
  id: this.labelId
182
177
  }, children), type === 'flyout' && (0, _emotion.jsx)("span", {
183
178
  css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
184
- }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))), renderLabelInfo && (0, _emotion.jsx)("span", {
179
+ }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_uiIcons.IconArrowOpenEndSolid, null))), renderLabelInfo && (0, _emotion.jsx)("span", {
185
180
  css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo
186
- }, (0, _callRenderProp.callRenderProp)(renderLabelInfo)));
181
+ }, (0, _uiReactUtils.callRenderProp)(renderLabelInfo)));
187
182
  }
188
183
  render() {
189
184
  var _this$props$styles5;
@@ -195,7 +190,7 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
195
190
  type = _this$props5.type,
196
191
  href = _this$props5.href,
197
192
  target = _this$props5.target;
198
- const props = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
193
+ const props = (0, _uiReactUtils.omitProps)(this.props, MenuItem.allowedProps);
199
194
  const ElementType = this.elementType;
200
195
  return (0, _emotion.jsx)(ElementType, Object.assign({
201
196
  tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
@@ -208,8 +203,8 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
208
203
  "aria-controls": controls,
209
204
  "aria-checked": type === 'checkbox' || type === 'radio' ? this.selected ? 'true' : 'false' : void 0,
210
205
  onClick: this.handleClick,
211
- onKeyUp: (0, _createChainedFunction.createChainedFunction)(onKeyUp, this.handleKeyUp),
212
- onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
206
+ onKeyUp: (0, _uiUtils.createChainedFunction)(onKeyUp, this.handleKeyUp),
207
+ onKeyDown: (0, _uiUtils.createChainedFunction)(onKeyDown, this.handleKeyDown),
213
208
  ref: this.handleRef,
214
209
  css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
215
210
  onMouseOver: this.handleMouseOver
package/lib/Menu/MenuItem/props.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.propTypes = exports.allowedProps = void 0;
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
9
+ var _uiPropTypes = require("@instructure/ui-prop-types");
10
10
  /*
11
11
  * The MIT License (MIT)
12
12
  *
@@ -34,7 +34,7 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
34
34
  const propTypes = exports.propTypes = {
35
35
  children: _propTypes.default.node.isRequired,
36
36
  defaultSelected: _propTypes.default.bool,
37
- selected: (0, _controllable.controllable)(_propTypes.default.bool, 'onSelect', 'defaultSelected'),
37
+ selected: (0, _uiPropTypes.controllable)(_propTypes.default.bool, 'onSelect', 'defaultSelected'),
38
38
  onSelect: _propTypes.default.func,
39
39
  onClick: _propTypes.default.func,
40
40
  onKeyDown: _propTypes.default.func,
package/lib/Menu/MenuItemGroup/index.js CHANGED
@@ -8,12 +8,9 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.MenuItemGroup = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _emotion = require("@instructure/emotion");
11
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
12
- var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
13
- var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
14
- var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
15
- var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
16
- var _testable = require("@instructure/ui-testable/lib/testable.js");
11
+ var _uiReactUtils = require("@instructure/ui-react-utils");
12
+ var _uiA11yUtils = require("@instructure/ui-a11y-utils");
13
+ var _uiTestable = require("@instructure/ui-testable");
17
14
  var _MenuItem = require("../MenuItem");
18
15
  var _styles = _interopRequireDefault(require("./styles"));
19
16
  var _theme = _interopRequireDefault(require("./theme"));
@@ -49,7 +46,7 @@ parent: Menu
49
46
  id: Menu.Group
50
47
  ---
51
48
  **/
52
- let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_MenuItemGroup = class MenuItemGroup extends _react.Component {
49
+ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_MenuItemGroup = class MenuItemGroup extends _react.Component {
53
50
  constructor(props) {
54
51
  super(props);
55
52
  this.ref = null;
@@ -107,7 +104,7 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
107
104
  allowMultiple = props.allowMultiple;
108
105
  const selected = [];
109
106
  const items = _react.Children.toArray(children).filter(child => {
110
- return (0, _matchComponentTypes.matchComponentTypes)(child, [_MenuItem.MenuItem]);
107
+ return (0, _uiReactUtils.matchComponentTypes)(child, [_MenuItem.MenuItem]);
111
108
  });
112
109
  items.forEach((item, index) => {
113
110
  if ((selected.length === 0 || allowMultiple) && (item.props.selected || item.props.defaultSelected)) {
@@ -126,7 +123,7 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
126
123
  renderLabel() {
127
124
  var _this$props$styles;
128
125
  const label = this.props.label;
129
- return (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _emotion.jsx)("span", {
126
+ return (0, _uiA11yUtils.hasVisibleChildren)(label) ? (0, _emotion.jsx)("span", {
130
127
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
131
128
  }, label) : label;
132
129
  }
@@ -140,10 +137,10 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
140
137
  const children = this.props.children;
141
138
  let index = -1;
142
139
  return _react.Children.map(children, child => {
143
- if ((0, _matchComponentTypes.matchComponentTypes)(child, [_MenuItem.MenuItem])) {
140
+ if ((0, _uiReactUtils.matchComponentTypes)(child, [_MenuItem.MenuItem])) {
144
141
  ++index;
145
142
  const value = child.props.value || index;
146
- return (0, _safeCloneElement.safeCloneElement)(child, {
143
+ return (0, _uiReactUtils.safeCloneElement)(child, {
147
144
  tabIndex: isTabbable && index === 0 ? 0 : -1,
148
145
  controls,
149
146
  value,
@@ -162,7 +159,7 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
162
159
  }
163
160
  render() {
164
161
  var _this$props$styles2, _this$props$styles3;
165
- const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
162
+ const props = (0, _uiReactUtils.omitProps)(this.props, MenuItemGroup.allowedProps);
166
163
  return (0, _emotion.jsx)("span", Object.assign({}, props, {
167
164
  css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
168
165
  ref: this.handleRef
package/lib/Menu/MenuItemGroup/props.js CHANGED
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.propTypes = exports.allowedProps = void 0;
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
10
- var _Children = require("@instructure/ui-prop-types/lib/Children.js");
9
+ var _uiPropTypes = require("@instructure/ui-prop-types");
11
10
  var _MenuItem = require("../MenuItem");
12
11
  var _MenuItemSeparator = require("../MenuItemSeparator");
13
12
  /*
@@ -37,8 +36,8 @@ var _MenuItemSeparator = require("../MenuItemSeparator");
37
36
  const propTypes = exports.propTypes = {
38
37
  label: _propTypes.default.node.isRequired,
39
38
  allowMultiple: _propTypes.default.bool,
40
- children: _Children.Children.oneOf([_MenuItem.MenuItem, _MenuItemSeparator.MenuItemSeparator]),
41
- selected: (0, _controllable.controllable)(_propTypes.default.array, 'onSelect', 'defaultSelected'),
39
+ children: _uiPropTypes.Children.oneOf([_MenuItem.MenuItem, _MenuItemSeparator.MenuItemSeparator]),
40
+ selected: (0, _uiPropTypes.controllable)(_propTypes.default.array, 'onSelect', 'defaultSelected'),
42
41
  defaultSelected: _propTypes.default.array,
43
42
  onSelect: _propTypes.default.func,
44
43
  onMouseOver: _propTypes.default.func,
package/lib/Menu/MenuItemSeparator/index.js CHANGED
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.MenuItemSeparator = void 0;
8
8
  var _react = require("react");
9
9
  var _emotion = require("@instructure/emotion");
10
- var _testable = require("@instructure/ui-testable/lib/testable.js");
11
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
10
+ var _uiTestable = require("@instructure/ui-testable");
11
+ var _uiReactUtils = require("@instructure/ui-react-utils");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _theme = _interopRequireDefault(require("./theme"));
14
14
  var _props = require("./props");
@@ -44,7 +44,7 @@ id: Menu.Separator
44
44
  ---
45
45
  @module MenuItemSeparator
46
46
  **/
47
- let MenuItemSeparator = exports.MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_MenuItemSeparator = class MenuItemSeparator extends _react.Component {
47
+ let MenuItemSeparator = exports.MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_MenuItemSeparator = class MenuItemSeparator extends _react.Component {
48
48
  constructor(...args) {
49
49
  super(...args);
50
50
  this.ref = null;
@@ -62,7 +62,7 @@ let MenuItemSeparator = exports.MenuItemSeparator = (_dec = (0, _emotion.withSty
62
62
  }
63
63
  render() {
64
64
  var _this$props$styles;
65
- const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.allowedProps);
65
+ const props = (0, _uiReactUtils.omitProps)(this.props, MenuItemSeparator.allowedProps);
66
66
  // role="separator" would fit better here, but it causes NVDA to stop the
67
67
  // MenuItem count after it
68
68
  return (0, _emotion.jsx)("div", Object.assign({}, props, {
package/lib/Menu/__new-tests__/Menu.test.js CHANGED
@@ -6,7 +6,7 @@ var _react2 = require("@testing-library/react");
6
6
  var _vitest = require("vitest");
7
7
  var _userEvent = require("@testing-library/user-event");
8
8
  require("@testing-library/jest-dom");
9
- var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
9
+ var _uiAxeCheck = require("@instructure/ui-axe-check");
10
10
  var _index = require("../index");
11
11
  var _Menu, _Menu2, _Menu3, _Menu4, _MenuItem, _MenuItem2, _MenuItem3, _Menu5, _button, _MenuItem4, _Menu6, _button2, _MenuItem5, _MenuItem6, _button3, _MenuItem7, _MenuItem8, _Menu7, _Menu8, _button4, _MenuItem9, _MenuItem10, _button5, _MenuItem11, _MenuItem12, _button6, _MenuItem13, _MenuItem14, _Menu9, _button7, _MenuItem15, _MenuItem16;
12
12
  /*
@@ -59,7 +59,7 @@ describe('<Menu />', () => {
59
59
  label: "Menu-label-text"
60
60
  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Menu Item Text")))),
61
61
  container = _render.container;
62
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
62
+ const axeCheck = await (0, _uiAxeCheck.runAxeCheck)(container);
63
63
  expect(axeCheck).toBe(true);
64
64
  });
65
65
  it('should meet standards when menu is closed', async () => {
@@ -69,7 +69,7 @@ describe('<Menu />', () => {
69
69
  disabled: true
70
70
  }, "Gradebook")))),
71
71
  container = _render2.container;
72
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
72
+ const axeCheck = await (0, _uiAxeCheck.runAxeCheck)(container);
73
73
  expect(axeCheck).toBe(true);
74
74
  });
75
75
  it('should meet standards when menu is open', async () => {
@@ -80,7 +80,7 @@ describe('<Menu />', () => {
80
80
  disabled: true
81
81
  }, "Gradebook")))),
82
82
  container = _render3.container;
83
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
83
+ const axeCheck = await (0, _uiAxeCheck.runAxeCheck)(container);
84
84
  expect(axeCheck).toBe(true);
85
85
  });
86
86
  it('should call onSelect when menu item is selected', async () => {
package/lib/Menu/index.js CHANGED
@@ -27,13 +27,11 @@ Object.defineProperty(exports, "MenuItemSeparator", {
27
27
  exports.default = void 0;
28
28
  var _react = _interopRequireWildcard(require("react"));
29
29
  var _keycode = _interopRequireDefault(require("keycode"));
30
- var _Popover = require("@instructure/ui-popover/lib/Popover");
31
- var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
32
- var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
33
- var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
30
+ var _uiPopover = require("@instructure/ui-popover");
31
+ var _uiReactUtils = require("@instructure/ui-react-utils");
34
32
  var _console = require("@instructure/console");
35
- var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
36
- var _testable = require("@instructure/ui-testable/lib/testable.js");
33
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
34
+ var _uiTestable = require("@instructure/ui-testable");
37
35
  var _MenuContext = require("../MenuContext");
38
36
  var _MenuItem = require("./MenuItem");
39
37
  var _MenuItemGroup = require("./MenuItemGroup");
@@ -72,7 +70,7 @@ var _dec, _dec2, _dec3, _class, _Menu;
72
70
  category: components
73
71
  ---
74
72
  **/
75
- let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Menu = class Menu extends _react.Component {
73
+ let Menu = exports.Menu = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Menu = class Menu extends _react.Component {
76
74
  constructor(props) {
77
75
  super(props);
78
76
  this.state = {
@@ -229,9 +227,9 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
229
227
  }
230
228
  focused() {
231
229
  if (this.shown) {
232
- return (0, _containsActiveElement.containsActiveElement)(this._menu) || this.state.hasFocus;
230
+ return (0, _uiDomUtils.containsActiveElement)(this._menu) || this.state.hasFocus;
233
231
  } else {
234
- return (0, _containsActiveElement.containsActiveElement)(this._trigger);
232
+ return (0, _uiDomUtils.containsActiveElement)(this._trigger);
235
233
  }
236
234
  }
237
235
  get focusedIndex() {
@@ -258,18 +256,18 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
258
256
  disabled = _this$props3.disabled;
259
257
  let count = 0;
260
258
  return _react.Children.map(children, child => {
261
- if (!(0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
259
+ if (!(0, _uiReactUtils.matchComponentTypes)(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
262
260
  return;
263
261
  }
264
262
  count += 1;
265
263
  const isTabbable = !this.state.hasFocus && count === 1;
266
- if ((0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemSeparator'])) {
264
+ if ((0, _uiReactUtils.matchComponentTypes)(child, ['MenuItemSeparator'])) {
267
265
  return child;
268
266
  }
269
267
  const menuItemChild = child;
270
268
  const controls = menuItemChild.props['aria-controls'] || menuItemChild.props.controls || this.props['aria-controls'] || this.props.controls;
271
- if ((0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItem'])) {
272
- return (0, _safeCloneElement.safeCloneElement)(child, {
269
+ if ((0, _uiReactUtils.matchComponentTypes)(child, ['MenuItem'])) {
270
+ return (0, _uiReactUtils.safeCloneElement)(child, {
273
271
  controls,
274
272
  children: child.props.children,
275
273
  disabled: disabled || child.props.disabled,
@@ -280,8 +278,8 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
280
278
  tabIndex: isTabbable ? 0 : -1
281
279
  });
282
280
  }
283
- if ((0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemGroup'])) {
284
- return (0, _safeCloneElement.safeCloneElement)(child, {
281
+ if ((0, _uiReactUtils.matchComponentTypes)(child, ['MenuItemGroup'])) {
282
+ return (0, _uiReactUtils.safeCloneElement)(child, {
285
283
  label: child.props.label,
286
284
  controls,
287
285
  disabled: disabled || child.props.disabled,
@@ -292,9 +290,9 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
292
290
  isTabbable
293
291
  });
294
292
  }
295
- if ((0, _matchComponentTypes.matchComponentTypes)(child, ['Menu'])) {
293
+ if ((0, _uiReactUtils.matchComponentTypes)(child, ['Menu'])) {
296
294
  const submenuDisabled = disabled || child.props.disabled;
297
- return (0, _safeCloneElement.safeCloneElement)(child, {
295
+ return (0, _uiReactUtils.safeCloneElement)(child, {
298
296
  type: 'flyout',
299
297
  controls,
300
298
  disabled: submenuDisabled,
@@ -362,7 +360,7 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
362
360
  positionContainerDisplay = _this$props5.positionContainerDisplay,
363
361
  offsetX = _this$props5.offsetX,
364
362
  offsetY = _this$props5.offsetY;
365
- return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
363
+ return trigger ? (0, _emotion.jsx)(_uiPopover.Popover, {
366
364
  isShowingContent: show,
367
365
  defaultIsShowingContent: defaultShow,
368
366
  onHideContent: (event, {
@@ -395,7 +393,7 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
395
393
  popoverRef(el);
396
394
  }
397
395
  },
398
- renderTrigger: (0, _safeCloneElement.safeCloneElement)(trigger, {
396
+ renderTrigger: (0, _uiReactUtils.safeCloneElement)(trigger, {
399
397
  ref: el => {
400
398
  this._trigger = el;
401
399
  },
package/lib/Menu/props.js CHANGED
@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.propTypes = exports.allowedProps = void 0;
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
10
- var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
11
- var _Children = require("@instructure/ui-prop-types/lib/Children.js");
9
+ var _uiPosition = require("@instructure/ui-position");
10
+ var _uiPropTypes = require("@instructure/ui-prop-types");
12
11
  /*
13
12
  * The MIT License (MIT)
14
13
  *
@@ -34,13 +33,13 @@ var _Children = require("@instructure/ui-prop-types/lib/Children.js");
34
33
  */
35
34
 
36
35
  const propTypes = exports.propTypes = {
37
- children: _Children.Children.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
36
+ children: _uiPropTypes.Children.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
38
37
  label: _propTypes.default.string,
39
38
  disabled: _propTypes.default.bool,
40
39
  trigger: _propTypes.default.node,
41
- placement: _PositionPropTypes.PositionPropTypes.placement,
40
+ placement: _uiPosition.PositionPropTypes.placement,
42
41
  defaultShow: _propTypes.default.bool,
43
- show: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultShow'),
42
+ show: (0, _uiPropTypes.controllable)(_propTypes.default.bool, 'onToggle', 'defaultShow'),
44
43
  onToggle: _propTypes.default.func,
45
44
  onSelect: _propTypes.default.func,
46
45
  onDismiss: _propTypes.default.func,
@@ -50,8 +49,8 @@ const propTypes = exports.propTypes = {
50
49
  onKeyUp: _propTypes.default.func,
51
50
  menuRef: _propTypes.default.func,
52
51
  popoverRef: _propTypes.default.func,
53
- mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
54
- constrain: _PositionPropTypes.PositionPropTypes.constrain,
52
+ mountNode: _uiPosition.PositionPropTypes.mountNode,
53
+ constrain: _uiPosition.PositionPropTypes.constrain,
55
54
  shouldHideOnSelect: _propTypes.default.bool,
56
55
  shouldFocusTriggerOnClose: _propTypes.default.bool,
57
56
  positionContainerDisplay: _propTypes.default.oneOf(['inline-block', 'block']),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-menu",
3
- "version": "10.13.0",
3
+ "version": "10.13.1-pr-snapshot-1741357986437",
4
4
  "description": "A dropdown menu component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,11 +23,11 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.13.0",
27
- "@instructure/ui-babel-preset": "10.13.0",
28
- "@instructure/ui-color-utils": "10.13.0",
29
- "@instructure/ui-test-utils": "10.13.0",
30
- "@instructure/ui-themes": "10.13.0",
26
+ "@instructure/ui-axe-check": "10.13.1-pr-snapshot-1741357986437",
27
+ "@instructure/ui-babel-preset": "10.13.1-pr-snapshot-1741357986437",
28
+ "@instructure/ui-color-utils": "10.13.1-pr-snapshot-1741357986437",
29
+ "@instructure/ui-test-utils": "10.13.1-pr-snapshot-1741357986437",
30
+ "@instructure/ui-themes": "10.13.1-pr-snapshot-1741357986437",
31
31
  "@testing-library/jest-dom": "^6.6.3",
32
32
  "@testing-library/react": "^16.0.1",
33
33
  "@testing-library/user-event": "^14.5.2",
@@ -35,19 +35,19 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@babel/runtime": "^7.26.0",
38
- "@instructure/console": "10.13.0",
39
- "@instructure/emotion": "10.13.0",
40
- "@instructure/shared-types": "10.13.0",
41
- "@instructure/ui-a11y-utils": "10.13.0",
42
- "@instructure/ui-dom-utils": "10.13.0",
43
- "@instructure/ui-icons": "10.13.0",
44
- "@instructure/ui-popover": "10.13.0",
45
- "@instructure/ui-position": "10.13.0",
46
- "@instructure/ui-prop-types": "10.13.0",
47
- "@instructure/ui-react-utils": "10.13.0",
48
- "@instructure/ui-testable": "10.13.0",
49
- "@instructure/ui-utils": "10.13.0",
50
- "@instructure/ui-view": "10.13.0",
38
+ "@instructure/console": "10.13.1-pr-snapshot-1741357986437",
39
+ "@instructure/emotion": "10.13.1-pr-snapshot-1741357986437",
40
+ "@instructure/shared-types": "10.13.1-pr-snapshot-1741357986437",
41
+ "@instructure/ui-a11y-utils": "10.13.1-pr-snapshot-1741357986437",
42
+ "@instructure/ui-dom-utils": "10.13.1-pr-snapshot-1741357986437",
43
+ "@instructure/ui-icons": "10.13.1-pr-snapshot-1741357986437",
44
+ "@instructure/ui-popover": "10.13.1-pr-snapshot-1741357986437",
45
+ "@instructure/ui-position": "10.13.1-pr-snapshot-1741357986437",
46
+ "@instructure/ui-prop-types": "10.13.1-pr-snapshot-1741357986437",
47
+ "@instructure/ui-react-utils": "10.13.1-pr-snapshot-1741357986437",
48
+ "@instructure/ui-testable": "10.13.1-pr-snapshot-1741357986437",
49
+ "@instructure/ui-utils": "10.13.1-pr-snapshot-1741357986437",
50
+ "@instructure/ui-view": "10.13.1-pr-snapshot-1741357986437",
51
51
  "keycode": "^2",
52
52
  "prop-types": "^15.8.1"
53
53
  },