@instructure/ui-view 10.16.1-snapshot-0 → 10.16.1-snapshot-1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-view
 

package/es/ContextView/__examples__/ContextView.examples.js

@@ -1,4 +1,5 @@
 var _span;
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +24,6 @@ var _span;
  * SOFTWARE.
  */
 
-import React from 'react';
 export default {
   sectionProp: 'background',
   propValues: {
@@ -31,9 +31,9 @@ export default {
   },
   getComponentProps: () => {
     return {
-      children: _span || (_span = /*#__PURE__*/React.createElement("span", {
-        key: "0"
-      }, "Hello World")),
+      children: _span || (_span = _jsx("span", {
+        children: "Hello World"
+      }, "0")),
       padding: 'small',
       debug: false
     };

package/es/ContextView/__new-tests__/ContextView.test.js

@@ -23,20 +23,20 @@ var _ContextView, _ContextView2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ContextView } from '../index';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<ContextView />', () => {
   it('should render', () => {
-    const _render = render(_ContextView || (_ContextView = /*#__PURE__*/React.createElement(ContextView, null))),
+    const _render = render(_ContextView || (_ContextView = _jsx(ContextView, {}))),
       container = _render.container;
     const contextView = container.querySelector("span[class$='-contextView']");
     expect(contextView).toBeInTheDocument();
   });
   it('should meet a11y standards', async () => {
-    const _render2 = render(_ContextView2 || (_ContextView2 = /*#__PURE__*/React.createElement(ContextView, null))),
+    const _render2 = render(_ContextView2 || (_ContextView2 = _jsx(ContextView, {}))),
       container = _render2.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/ContextView/index.js

@@ -22,15 +22,15 @@ var _dec, _class, _ContextView;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 
 import { Component } from 'react';
-import { jsx, withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
 import { View } from '../View';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -76,7 +76,8 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       textAlign = _this$props3.textAlign,
       styles = _this$props3.styles,
       borderColor = _this$props3.borderColor;
-    return jsx(View, Object.assign({}, omitProps(this.props, ContextView.allowedProps), {
+    return _jsx(View, {
+      ...omitProps(this.props, ContextView.allowedProps),
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
       borderWidth: "none",
@@ -85,27 +86,29 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       withVisualDebug: debug,
       elementRef: this.handleRef,
       margin: margin,
-      stacking: stacking
-    }), jsx(View, {
-      css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
-      display: "block",
-      borderRadius: "medium",
-      borderWidth: "small",
-      borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
-      background: background === 'default' ? 'primary' : 'primary-inverse',
-      withVisualDebug: debug,
-      height: height,
-      width: width,
-      maxHeight: maxHeight,
-      maxWidth: maxWidth,
-      minHeight: minHeight,
-      minWidth: minWidth,
-      padding: padding,
-      shadow: shadow,
-      textAlign: textAlign
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
-    }), children));
+      stacking: stacking,
+      children: _jsxs(View, {
+        css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
+        display: "block",
+        borderRadius: "medium",
+        borderWidth: "small",
+        borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
+        background: background === 'default' ? 'primary' : 'primary-inverse',
+        withVisualDebug: debug,
+        height: height,
+        width: width,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        minWidth: minWidth,
+        padding: padding,
+        shadow: shadow,
+        textAlign: textAlign,
+        children: [_jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
+        }), children]
+      })
+    });
   }
 }, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = allowedProps, _ContextView.propTypes = propTypes, _ContextView.defaultProps = {
   as: 'span',

package/es/View/__new-tests__/View.test.js

@@ -23,12 +23,12 @@ var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { View } from '../../index';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<View />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,14 +42,22 @@ describe('<View />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    const _render = render(_View || (_View = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+    const _render = render(_View || (_View = _jsx(View, {
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      }))),
       container = _render.container;
     const view = container.querySelector("span[class$='-view']");
     expect(view).toBeInTheDocument();
     expect(view).toHaveTextContent('View Content');
   });
   it('should render children', () => {
-    render(_View2 || (_View2 = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+    render(_View2 || (_View2 = _jsx(View, {
+      children: _jsx("h1", {
+        children: "View Content"
+      })
+    })));
     const viewContent = screen.getByText('View Content');
     expect(viewContent).toBeInTheDocument();
     expect(viewContent.tagName).toBe('H1');
@@ -66,11 +74,14 @@ describe('<View />', () => {
       display: 'block',
       pointerEvents: 'none'
     };
-    const _render2 = render(/*#__PURE__*/React.createElement(View, {
+    const _render2 = render(_jsx(View, {
         style: {
           ...styleProps
-        }
-      }, _h || (_h = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+        },
+        children: _h || (_h = _jsx("h1", {
+          children: "View Content"
+        }))
+      })),
       container = _render2.container;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
@@ -85,11 +96,14 @@ describe('<View />', () => {
     expect(styles['pointerEvents']).toEqual('none');
   });
   it('should pass flex style', () => {
-    const _render3 = render(/*#__PURE__*/React.createElement(View, {
+    const _render3 = render(_jsx(View, {
         style: {
           flexBasis: '200px'
-        }
-      }, _h2 || (_h2 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+        },
+        children: _h2 || (_h2 = _jsx("h1", {
+          children: "View Content"
+        }))
+      })),
       container = _render3.container;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
@@ -97,37 +111,49 @@ describe('<View />', () => {
   });
   it('should pass className', () => {
     const className = 'fooBarBaz';
-    const _render4 = render(/*#__PURE__*/React.createElement(View, {
-        className: className
-      }, _h3 || (_h3 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+    const _render4 = render(_jsx(View, {
+        className: className,
+        children: _h3 || (_h3 = _jsx("h1", {
+          children: "View Content"
+        }))
+      })),
       container = _render4.container;
     const view = container.querySelector("span[class$='-view']");
     expect(view.classList.contains(className)).toEqual(true);
   });
   it('should provide an elementRef', () => {
     const elementRef = vi.fn();
-    const _render5 = render(/*#__PURE__*/React.createElement(View, {
-        elementRef: elementRef
-      }, _h4 || (_h4 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+    const _render5 = render(_jsx(View, {
+        elementRef: elementRef,
+        children: _h4 || (_h4 = _jsx("h1", {
+          children: "View Content"
+        }))
+      })),
       container = _render5.container;
     const view = container.querySelector("span[class$='-view']");
     expect(elementRef).toHaveBeenCalledWith(view);
   });
   it('should pass cursor', () => {
     const cursor = 'cell';
-    const _render6 = render(/*#__PURE__*/React.createElement(View, {
-        cursor: cursor
-      }, _h5 || (_h5 = /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+    const _render6 = render(_jsx(View, {
+        cursor: cursor,
+        children: _h5 || (_h5 = _jsx("h1", {
+          children: "View Content"
+        }))
+      })),
       container = _render6.container;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
     expect(styles['cursor']).toEqual(cursor);
   });
   it('should set overflow', () => {
-    const _render7 = render(_View3 || (_View3 = /*#__PURE__*/React.createElement(View, {
+    const _render7 = render(_View3 || (_View3 = _jsx(View, {
         overflowX: "hidden",
-        overflowY: "auto"
-      }, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+        overflowY: "auto",
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      }))),
       container = _render7.container;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
@@ -135,21 +161,27 @@ describe('<View />', () => {
     expect(styles.overflowY).toEqual('auto');
   });
   it('should set CSS position', () => {
-    const _render8 = render(_View4 || (_View4 = /*#__PURE__*/React.createElement(View, {
-        position: "fixed"
-      }, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+    const _render8 = render(_View4 || (_View4 = _jsx(View, {
+        position: "fixed",
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      }))),
       container = _render8.container;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
     expect(styles.position).toEqual('fixed');
   });
   it('should set inline offset (top, bottom, left, right)', () => {
-    const _render9 = render(_View5 || (_View5 = /*#__PURE__*/React.createElement(View, {
+    const _render9 = render(_View5 || (_View5 = _jsx(View, {
         insetBlockStart: "0",
         insetBlockEnd: "20px",
         insetInlineStart: "2px",
-        insetInlineEnd: "3px"
-      }, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+        insetInlineEnd: "3px",
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      }))),
       container = _render9.container;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
@@ -159,38 +191,53 @@ describe('<View />', () => {
     expect(styles['right']).toEqual('3px');
   });
   it('should override default max-width', () => {
-    const _render10 = render(_View6 || (_View6 = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("h1", null, "View Content")))),
+    const _render10 = render(_View6 || (_View6 = _jsx(View, {
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      }))),
       container = _render10.container,
       rerender = _render10.rerender;
     const view = container.querySelector("span[class$='-view']");
     const styles = getComputedStyle(view);
     expect(styles.maxWidth).toEqual('100%');
-    rerender(_View7 || (_View7 = /*#__PURE__*/React.createElement(View, {
-      maxWidth: "200px"
-    }, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+    rerender(_View7 || (_View7 = _jsx(View, {
+      maxWidth: "200px",
+      children: _jsx("h1", {
+        children: "View Content"
+      })
+    })));
     const newStyles = getComputedStyle(view);
     expect(newStyles.maxWidth).toEqual('200px');
   });
   describe('withFocusOutline', () => {
     it('should warn when withFocusOutline is true without position=relative', () => {
-      render(_View8 || (_View8 = /*#__PURE__*/React.createElement(View, {
-        withFocusOutline: true
-      }, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+      render(_View8 || (_View8 = _jsx(View, {
+        withFocusOutline: true,
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      })));
       const expectedErrorMessage = 'Warning: [View] the focus outline will only show if the `position` prop is `relative`.';
       expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
     it('should warn when withFocusOutline is `true`, display is set to `inline`, and focusPosition is set to `offset`', () => {
-      render(_View9 || (_View9 = /*#__PURE__*/React.createElement(View, {
+      render(_View9 || (_View9 = _jsx(View, {
         withFocusOutline: true,
         display: "inline",
-        focusPosition: "offset"
-      }, /*#__PURE__*/React.createElement("h1", null, "View Content"))));
+        focusPosition: "offset",
+        children: _jsx("h1", {
+          children: "View Content"
+        })
+      })));
       const expectedErrorMessage = 'Warning: [View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.';
       expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
     });
   });
   it('should meet a11y standards', async () => {
-    const _render11 = render(_View10 || (_View10 = /*#__PURE__*/React.createElement(View, null, "View Content"))),
+    const _render11 = render(_View10 || (_View10 = _jsx(View, {
+        children: "View Content"
+      }))),
       container = _render11.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/View/index.js

@@ -25,16 +25,16 @@ var _dec, _dec2, _class, _View;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { getComputedStyle } from '@instructure/ui-dom-utils';
 import { textDirectionContextConsumer } from '@instructure/ui-i18n';
 import { logError as error } from '@instructure/console';
 import { getElementType, omitProps, pickProps, passthroughProps } from '@instructure/ui-react-utils';
-import { jsx, withStyle } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -123,11 +123,13 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
       makeStyles = _this$props3.makeStyles,
       props = _objectWithoutProperties(_this$props3, _excluded);
     const ElementType = getElementType(View, this.props);
-    return jsx(ElementType, Object.assign({}, passthroughProps(props), {
+    return _jsx(ElementType, {
+      ...passthroughProps(props),
       className: className,
       css: [styles === null || styles === void 0 ? void 0 : styles.view, styles === null || styles === void 0 ? void 0 : styles.inlineStyles],
-      ref: this.handleElementRef
-    }), children);
+      ref: this.handleElementRef,
+      children: children
+    });
   }
 }, _View.displayName = "View", _View.componentId = 'View', _View.allowedProps = allowedProps, _View.propTypes = propTypes, _View.defaultProps = {
   display: 'auto',

package/lib/ContextView/__examples__/ContextView.examples.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _span;
 /*
  * The MIT License (MIT)
@@ -37,9 +36,9 @@ var _default = exports.default = {
   },
   getComponentProps: () => {
     return {
-      children: _span || (_span = /*#__PURE__*/_react.default.createElement("span", {
-        key: "0"
-      }, "Hello World")),
+      children: _span || (_span = (0, _jsxRuntime.jsx)("span", {
+        children: "Hello World"
+      }, "0")),
       padding: 'small',
       debug: false
     };

package/lib/ContextView/__new-tests__/ContextView.test.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _ContextView, _ContextView2;
 /*
  * The MIT License (MIT)
@@ -32,13 +31,13 @@ var _ContextView, _ContextView2;
  */
 describe('<ContextView />', () => {
   it('should render', () => {
-    const _render = (0, _react2.render)(_ContextView || (_ContextView = /*#__PURE__*/_react.default.createElement(_index.ContextView, null))),
+    const _render = (0, _react.render)(_ContextView || (_ContextView = (0, _jsxRuntime.jsx)(_index.ContextView, {}))),
       container = _render.container;
     const contextView = container.querySelector("span[class$='-contextView']");
     expect(contextView).toBeInTheDocument();
   });
   it('should meet a11y standards', async () => {
-    const _render2 = (0, _react2.render)(_ContextView2 || (_ContextView2 = /*#__PURE__*/_react.default.createElement(_index.ContextView, null))),
+    const _render2 = (0, _react.render)(_ContextView2 || (_ContextView2 = (0, _jsxRuntime.jsx)(_index.ContextView, {}))),
       container = _render2.container;
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     expect(axeCheck).toBe(true);

package/lib/ContextView/index.js

@@ -12,6 +12,7 @@ var _View = require("../View");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _ContextView;
 /*
  * The MIT License (MIT)
@@ -36,7 +37,6 @@ var _dec, _class, _ContextView;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components
@@ -82,7 +82,8 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       textAlign = _this$props3.textAlign,
       styles = _this$props3.styles,
       borderColor = _this$props3.borderColor;
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, ContextView.allowedProps), {
+    return (0, _jsxRuntime.jsx)(_View.View, {
+      ...(0, _omitProps.omitProps)(this.props, ContextView.allowedProps),
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
       borderWidth: "none",
@@ -91,27 +92,29 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       withVisualDebug: debug,
       elementRef: this.handleRef,
       margin: margin,
-      stacking: stacking
-    }), (0, _emotion.jsx)(_View.View, {
-      css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
-      display: "block",
-      borderRadius: "medium",
-      borderWidth: "small",
-      borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
-      background: background === 'default' ? 'primary' : 'primary-inverse',
-      withVisualDebug: debug,
-      height: height,
-      width: width,
-      maxHeight: maxHeight,
-      maxWidth: maxWidth,
-      minHeight: minHeight,
-      minWidth: minWidth,
-      padding: padding,
-      shadow: shadow,
-      textAlign: textAlign
-    }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
-    }), children));
+      stacking: stacking,
+      children: (0, _jsxRuntime.jsxs)(_View.View, {
+        css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
+        display: "block",
+        borderRadius: "medium",
+        borderWidth: "small",
+        borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
+        background: background === 'default' ? 'primary' : 'primary-inverse',
+        withVisualDebug: debug,
+        height: height,
+        width: width,
+        maxHeight: maxHeight,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        minWidth: minWidth,
+        padding: padding,
+        shadow: shadow,
+        textAlign: textAlign,
+        children: [(0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
+        }), children]
+      })
+    });
   }
 }, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = _props.allowedProps, _ContextView.propTypes = _props.propTypes, _ContextView.defaultProps = {
   as: 'span',