@instructure/ui-modal 8.56.1 → 8.56.2-pr-snapshot-1721749364069

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.
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
+ ## [8.56.2-pr-snapshot-1721749364069](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-pr-snapshot-1721749364069) (2024-07-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-modal
9
+
10
+
11
+
12
+
13
+
6
14
  ## [8.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-modal
@@ -6,7 +6,7 @@ var _react2 = require("@testing-library/react");
6
6
  require("@testing-library/jest-dom");
7
7
  var _uiColorUtils = require("@instructure/ui-color-utils");
8
8
  var _uiThemes = require("@instructure/ui-themes");
9
- var _View = require("@instructure/ui-view/lib/View");
9
+ var _uiView = require("@instructure/ui-view");
10
10
  var _index = require("../index");
11
11
  var _theme = _interopRequireDefault(require("../theme"));
12
12
  var _ModalBody, _ModalBody2, _ModalBody3;
@@ -74,7 +74,7 @@ describe('<ModalBody />', () => {
74
74
  elementRef: () => {},
75
75
  as: 'section'
76
76
  };
77
- const allProps = _View.View.allowedProps.filter(prop => prop !== 'children');
77
+ const allProps = _uiView.View.allowedProps.filter(prop => prop !== 'children');
78
78
  allProps.forEach(prop => {
79
79
  if (prop in allowedProps) {
80
80
  it(`should allow the '${prop}' prop`, () => {
@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.ModalBody = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
9
  var _react = require("react");
10
- var _View = require("@instructure/ui-view/lib/View");
11
- var _testable = require("@instructure/ui-testable/lib/testable.js");
12
- var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
13
- var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
10
+ var _uiView = require("@instructure/ui-view");
11
+ var _uiTestable = require("@instructure/ui-testable");
12
+ var _uiReactUtils = require("@instructure/ui-react-utils");
13
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
14
14
  var _emotion = require("@instructure/emotion");
15
15
  var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _theme = _interopRequireDefault(require("./theme"));
@@ -47,7 +47,7 @@ parent: Modal
47
47
  id: Modal.Body
48
48
  ---
49
49
  **/
50
- let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalBody extends _react.Component {
50
+ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalBody extends _react.Component {
51
51
  constructor(props) {
52
52
  super(props);
53
53
  this.ref = null;
@@ -67,7 +67,7 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
67
67
  (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
68
68
 
69
69
  // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
70
- const style = this.ref && (0, _getComputedStyle.getComputedStyle)(this.ref);
70
+ const style = this.ref && (0, _uiDomUtils.getComputedStyle)(this.ref);
71
71
  const isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
72
72
  if (isFirefox) {
73
73
  this.setState({
@@ -89,9 +89,9 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
89
89
  padding = _this$props3.padding,
90
90
  children = _this$props3.children,
91
91
  rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
92
- const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
92
+ const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(rest, ModalBody.allowedProps), ModalBody);
93
93
  const isFit = overflow === 'fit';
94
- return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
94
+ return (0, _emotion.jsx)(_uiView.View, Object.assign({}, passthroughProps, {
95
95
  display: "block",
96
96
  width: isFit ? '100%' : void 0,
97
97
  height: isFit ? '100%' : void 0,
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.ModalFooter = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
9
  var _react = require("react");
10
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
11
- var _testable = require("@instructure/ui-testable/lib/testable.js");
10
+ var _uiReactUtils = require("@instructure/ui-react-utils");
11
+ var _uiTestable = require("@instructure/ui-testable");
12
12
  var _emotion = require("@instructure/emotion");
13
13
  var _styles = _interopRequireDefault(require("./styles"));
14
14
  var _theme = _interopRequireDefault(require("./theme"));
@@ -45,7 +45,7 @@ parent: Modal
45
45
  id: Modal.Footer
46
46
  ---
47
47
  **/
48
- let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalFooter extends _react.Component {
48
+ let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalFooter extends _react.Component {
49
49
  constructor(...args) {
50
50
  super(...args);
51
51
  this.ref = null;
@@ -68,7 +68,7 @@ let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.
68
68
  rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
69
69
  return (0, _emotion.jsx)("div", Object.assign({
70
70
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
71
- }, (0, _passthroughProps.passthroughProps)(rest), {
71
+ }, (0, _uiReactUtils.passthroughProps)(rest), {
72
72
  ref: this.handleRef
73
73
  }), children);
74
74
  }
@@ -8,11 +8,10 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.ModalHeader = void 0;
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
- var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
12
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
13
- var _testable = require("@instructure/ui-testable/lib/testable.js");
11
+ var _uiReactUtils = require("@instructure/ui-react-utils");
12
+ var _uiTestable = require("@instructure/ui-testable");
14
13
  var _emotion = require("@instructure/emotion");
15
- var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
14
+ var _uiButtons = require("@instructure/ui-buttons");
16
15
  var _styles = _interopRequireDefault(require("./styles"));
17
16
  var _theme = _interopRequireDefault(require("./theme"));
18
17
  var _props = require("./props");
@@ -48,7 +47,7 @@ parent: Modal
48
47
  id: Modal.Header
49
48
  ---
50
49
  **/
51
- let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalHeader extends _react.Component {
50
+ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalHeader extends _react.Component {
52
51
  constructor(...args) {
53
52
  super(...args);
54
53
  this.ref = null;
@@ -72,7 +71,7 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
72
71
  get usesCloseButton() {
73
72
  let hasCloseButton = false;
74
73
  _react.default.Children.forEach(this.props.children, child => {
75
- if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_CloseButton.CloseButton])) {
74
+ if (child && (0, _uiReactUtils.matchComponentTypes)(child, [_uiButtons.CloseButton])) {
76
75
  hasCloseButton = true;
77
76
  }
78
77
  });
@@ -85,7 +84,7 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
85
84
  rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
86
85
  return (0, _emotion.jsx)("div", Object.assign({
87
86
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
88
- }, (0, _passthroughProps.passthroughProps)(rest), {
87
+ }, (0, _uiReactUtils.passthroughProps)(rest), {
89
88
  ref: this.handleRef
90
89
  }), children);
91
90
  }
@@ -27,15 +27,13 @@ Object.defineProperty(exports, "ModalHeader", {
27
27
  exports.default = void 0;
28
28
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
29
29
  var _react = _interopRequireWildcard(require("react"));
30
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
31
- var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
32
- var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
33
- var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
34
- var _testable = require("@instructure/ui-testable/lib/testable.js");
35
- var _Transition = require("@instructure/ui-motion/lib/Transition");
36
- var _Portal = require("@instructure/ui-portal/lib/Portal");
37
- var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
38
- var _Mask = require("@instructure/ui-overlays/lib/Mask");
30
+ var _uiReactUtils = require("@instructure/ui-react-utils");
31
+ var _uiUtils = require("@instructure/ui-utils");
32
+ var _uiTestable = require("@instructure/ui-testable");
33
+ var _uiMotion = require("@instructure/ui-motion");
34
+ var _uiPortal = require("@instructure/ui-portal");
35
+ var _uiDialog = require("@instructure/ui-dialog");
36
+ var _uiOverlays = require("@instructure/ui-overlays");
39
37
  var _ModalHeader = require("./ModalHeader");
40
38
  var _ModalBody = require("./ModalBody");
41
39
  var _ModalFooter = require("./ModalFooter");
@@ -75,7 +73,7 @@ category: components
75
73
  tags: overlay, portal, dialog
76
74
  ---
77
75
  **/
78
- let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Modal extends _react.Component {
76
+ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Modal extends _react.Component {
79
77
  constructor(props) {
80
78
  var _props$open;
81
79
  super(props);
@@ -142,13 +140,13 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
142
140
  return _react.Children.map(children, child => {
143
141
  if (!child) return; // ignore null, falsy children
144
142
 
145
- if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ModalBody.ModalBody])) {
146
- return (0, _safeCloneElement.safeCloneElement)(child, {
143
+ if ((0, _uiReactUtils.matchComponentTypes)(child, [_ModalBody.ModalBody])) {
144
+ return (0, _uiReactUtils.safeCloneElement)(child, {
147
145
  variant: variant,
148
146
  overflow: child.props.overflow || overflow
149
147
  });
150
148
  } else {
151
- return (0, _safeCloneElement.safeCloneElement)(child, {
149
+ return (0, _uiReactUtils.safeCloneElement)(child, {
152
150
  variant: variant
153
151
  });
154
152
  }
@@ -166,7 +164,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
166
164
  as = _this$props4.as,
167
165
  styles = _this$props4.styles;
168
166
  const isFullScreen = size === 'fullscreen';
169
- const dialog = (0, _emotion.jsx)(_Dialog.Dialog, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
167
+ const dialog = (0, _emotion.jsx)(_uiDialog.Dialog, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
170
168
  as: as,
171
169
  open: true,
172
170
  label: label,
@@ -181,7 +179,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
181
179
  ref: this.contentRef
182
180
  // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
183
181
  }), this.renderChildren());
184
- return (0, _emotion.jsx)(_Mask.Mask, {
182
+ return (0, _emotion.jsx)(_uiOverlays.Mask, {
185
183
  placement: this.maskPlacement,
186
184
  fullscreen: constrain === 'window',
187
185
  themeOverride: isFullScreen ? {
@@ -209,21 +207,21 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
209
207
  overflow = _this$props5.overflow,
210
208
  passthroughProps = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
211
209
  const portalIsOpen = this.state.open || this.state.transitioning;
212
- return (0, _emotion.jsx)(_Portal.Portal, {
210
+ return (0, _emotion.jsx)(_uiPortal.Portal, {
213
211
  mountNode: mountNode,
214
212
  insertAt: insertAt,
215
213
  open: portalIsOpen,
216
214
  onOpen: this.handlePortalOpen
217
- }, (0, _emotion.jsx)(_Transition.Transition, {
215
+ }, (0, _emotion.jsx)(_uiMotion.Transition, {
218
216
  in: open,
219
217
  transitionOnMount: true,
220
218
  type: transition,
221
219
  onEnter: onEnter,
222
220
  onEntering: onEntering,
223
- onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
221
+ onEntered: (0, _uiUtils.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
224
222
  onExit: onExit,
225
223
  onExiting: onExiting,
226
- onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose)
224
+ onExited: (0, _uiUtils.createChainedFunction)(this.handleTransitionComplete, onExited, onClose)
227
225
  }, constrain === 'parent' ? (0, _emotion.jsx)("span", {
228
226
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
229
227
  }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
@@ -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 _element = require("@instructure/ui-prop-types/lib/element.js");
10
- var _Children = require("@instructure/ui-prop-types/lib/Children.js");
9
+ var _uiPropTypes = require("@instructure/ui-prop-types");
11
10
  var _uiMotion = require("@instructure/ui-motion");
12
11
  var _ModalHeader = require("./ModalHeader");
13
12
  var _ModalBody = require("./ModalBody");
@@ -38,7 +37,7 @@ var _ModalFooter = require("./ModalFooter");
38
37
 
39
38
  const propTypes = exports.propTypes = {
40
39
  label: _propTypes.default.string.isRequired,
41
- children: _Children.Children.enforceOrder([_ModalHeader.ModalHeader, _ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalHeader.ModalHeader, _ModalBody.ModalBody], [_ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalBody.ModalBody]),
40
+ children: _uiPropTypes.Children.enforceOrder([_ModalHeader.ModalHeader, _ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalHeader.ModalHeader, _ModalBody.ModalBody], [_ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalBody.ModalBody]),
42
41
  as: _propTypes.default.elementType,
43
42
  size: _propTypes.default.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
44
43
  variant: _propTypes.default.oneOf(['default', 'inverse']),
@@ -50,9 +49,9 @@ const propTypes = exports.propTypes = {
50
49
  onClose: _propTypes.default.func,
51
50
  onDismiss: _propTypes.default.func,
52
51
  contentRef: _propTypes.default.func,
53
- mountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
52
+ mountNode: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func]),
54
53
  insertAt: _propTypes.default.oneOf(['bottom', 'top']),
55
- liveRegion: _propTypes.default.oneOfType([_element.element, _propTypes.default.arrayOf(_element.element), _propTypes.default.func]),
54
+ liveRegion: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.arrayOf(_uiPropTypes.element), _propTypes.default.func]),
56
55
  transition: _uiMotion.transitionTypePropType,
57
56
  onEnter: _propTypes.default.func,
58
57
  onEntering: _propTypes.default.func,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-modal",
3
- "version": "8.56.1",
3
+ "version": "8.56.2-pr-snapshot-1721749364069",
4
4
  "description": "A component for displaying content in a dialog overlay",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,30 +24,30 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.23.2",
27
- "@instructure/console": "8.56.1",
28
- "@instructure/emotion": "8.56.1",
29
- "@instructure/shared-types": "8.56.1",
30
- "@instructure/ui-buttons": "8.56.1",
31
- "@instructure/ui-dialog": "8.56.1",
32
- "@instructure/ui-dom-utils": "8.56.1",
33
- "@instructure/ui-motion": "8.56.1",
34
- "@instructure/ui-overlays": "8.56.1",
35
- "@instructure/ui-portal": "8.56.1",
36
- "@instructure/ui-prop-types": "8.56.1",
37
- "@instructure/ui-react-utils": "8.56.1",
38
- "@instructure/ui-testable": "8.56.1",
39
- "@instructure/ui-utils": "8.56.1",
40
- "@instructure/ui-view": "8.56.1",
27
+ "@instructure/console": "8.56.2-pr-snapshot-1721749364069",
28
+ "@instructure/emotion": "8.56.2-pr-snapshot-1721749364069",
29
+ "@instructure/shared-types": "8.56.2-pr-snapshot-1721749364069",
30
+ "@instructure/ui-buttons": "8.56.2-pr-snapshot-1721749364069",
31
+ "@instructure/ui-dialog": "8.56.2-pr-snapshot-1721749364069",
32
+ "@instructure/ui-dom-utils": "8.56.2-pr-snapshot-1721749364069",
33
+ "@instructure/ui-motion": "8.56.2-pr-snapshot-1721749364069",
34
+ "@instructure/ui-overlays": "8.56.2-pr-snapshot-1721749364069",
35
+ "@instructure/ui-portal": "8.56.2-pr-snapshot-1721749364069",
36
+ "@instructure/ui-prop-types": "8.56.2-pr-snapshot-1721749364069",
37
+ "@instructure/ui-react-utils": "8.56.2-pr-snapshot-1721749364069",
38
+ "@instructure/ui-testable": "8.56.2-pr-snapshot-1721749364069",
39
+ "@instructure/ui-utils": "8.56.2-pr-snapshot-1721749364069",
40
+ "@instructure/ui-view": "8.56.2-pr-snapshot-1721749364069",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=18"
45
45
  },
46
46
  "devDependencies": {
47
- "@instructure/ui-babel-preset": "8.56.1",
48
- "@instructure/ui-color-utils": "8.56.1",
49
- "@instructure/ui-position": "8.56.1",
50
- "@instructure/ui-themes": "8.56.1",
47
+ "@instructure/ui-babel-preset": "8.56.2-pr-snapshot-1721749364069",
48
+ "@instructure/ui-color-utils": "8.56.2-pr-snapshot-1721749364069",
49
+ "@instructure/ui-position": "8.56.2-pr-snapshot-1721749364069",
50
+ "@instructure/ui-themes": "8.56.2-pr-snapshot-1721749364069",
51
51
  "@testing-library/jest-dom": "^6.1.4",
52
52
  "@testing-library/react": "^14.0.0",
53
53
  "@testing-library/user-event": "^14.5.1"