@instructure/ui-dom-utils 10.16.1-snapshot-0 → 10.16.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](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-dom-utils
 

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

@@ -23,15 +23,15 @@ var _div;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { addEventListener } from '../addEventListener';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('addEventListener', () => {
   it('should add an event listener and provide a remove method', () => {
     const callback = vi.fn();
-    const _render = render(_div || (_div = /*#__PURE__*/React.createElement("div", null))),
+    const _render = render(_div || (_div = _jsx("div", {}))),
       container = _render.container;
     const node = container.firstChild;
     const listener = addEventListener(node, 'click', callback);

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

@@ -23,17 +23,22 @@ var _div;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { addInputModeListener } from '../addInputModeListener';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('addInputModeListener', () => {
   it('should handle input mode changes', () => {
     const handleInputModeChange = vi.fn();
-    render(_div || (_div = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-      id: "button-1"
-    }, "hello"), /*#__PURE__*/React.createElement("button", null, "world"))));
+    render(_div || (_div = _jsxs("div", {
+      children: [_jsx("button", {
+        id: "button-1",
+        children: "hello"
+      }), _jsx("button", {
+        children: "world"
+      })]
+    })));
     const inputModeListener = addInputModeListener({
       onInputModeChange: handleInputModeChange
     });

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

@@ -23,11 +23,11 @@ var _div;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { addPositionChangeListener } from '../addPositionChangeListener';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const mockRect = {
   top: 0,
   left: 0,
@@ -43,7 +43,7 @@ describe('addPositionChangeListener', () => {
   it('should provide a remove method', async () => {
     const callback = vi.fn();
     Element.prototype.getBoundingClientRect = vi.fn(() => mockRect);
-    const _render = render(_div || (_div = /*#__PURE__*/React.createElement("div", null))),
+    const _render = render(_div || (_div = _jsx("div", {}))),
       container = _render.container;
     const node = container.firstChild;
     const listener = addPositionChangeListener(node, callback);

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

@@ -23,26 +23,37 @@ var _a, _div, _div2, _input, _button, _button2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { findTabbable } from '../findTabbable';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('findTabbable', () => {
   describe('tabbable content', () => {
     it('should find tabbable descendants', () => {
-      const _render = render(/*#__PURE__*/React.createElement("div", null, _a || (_a = /*#__PURE__*/React.createElement("a", {
-          href: "https://instructure-test"
-        }, "Tabbable")), _div || (_div = /*#__PURE__*/React.createElement("div", null, "Not Tabbable")), _div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
-          tabIndex: 1
-        }, "Tabbable")), _input || (_input = /*#__PURE__*/React.createElement("input", {
-          type: "text",
-          value: "Tabbable",
-          readOnly: true
-        })), /*#__PURE__*/React.createElement("div", null, _button || (_button = /*#__PURE__*/React.createElement("button", null, "Tabbable")), /*#__PURE__*/React.createElement("button", {
-          style: {
-            display: 'none'
-          }
-        }, "Not Tabbable")))),
+      const _render = render(_jsxs("div", {
+          children: [_a || (_a = _jsx("a", {
+            href: "https://instructure-test",
+            children: "Tabbable"
+          })), _div || (_div = _jsx("div", {
+            children: "Not Tabbable"
+          })), _div2 || (_div2 = _jsx("div", {
+            tabIndex: 1,
+            children: "Tabbable"
+          })), _input || (_input = _jsx("input", {
+            type: "text",
+            value: "Tabbable",
+            readOnly: true
+          })), _jsxs("div", {
+            children: [_button || (_button = _jsx("button", {
+              children: "Tabbable"
+            })), _jsx("button", {
+              style: {
+                display: 'none'
+              },
+              children: "Not Tabbable"
+            })]
+          })]
+        })),
         container = _render.container;
       const node = container.firstChild;
       expect(findTabbable(node).length).toBe(4);
@@ -51,7 +62,11 @@ describe('findTabbable', () => {
   describe('tabbable root', () => {
     it('should search the root node when shouldSearchRootNode is set', () => {
       const shouldSearchRootNode = true;
-      const _render2 = render(_button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, /*#__PURE__*/React.createElement("span", null, "hello")))),
+      const _render2 = render(_button2 || (_button2 = _jsx("button", {
+          children: _jsx("span", {
+            children: "hello"
+          })
+        }))),
         container = _render2.container;
       const node = container.firstChild;
       expect(findTabbable(node).length).toBe(0);

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

@@ -23,15 +23,16 @@ var _span;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { getClassList } from '../getClassList';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('getClassList', () => {
   it('should provide classlist methods', () => {
-    const _render = render(_span || (_span = /*#__PURE__*/React.createElement("span", {
-        className: "foo bar baz"
-      }, "Test"))),
+    const _render = render(_span || (_span = _jsx("span", {
+        className: "foo bar baz",
+        children: "Test"
+      }))),
       container = _render.container;
     const node = container.firstChild;
     const classes = getClassList(node);

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

@@ -22,17 +22,18 @@
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { getFontSize } from '../getFontSize';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('getFontSize', () => {
   it('should return font size as a number', () => {
-    const _render = render(/*#__PURE__*/React.createElement("span", {
+    const _render = render(_jsx("span", {
         style: {
           fontSize: '17px'
-        }
-      }, "Test")),
+        },
+        children: "Test"
+      })),
       container = _render.container;
     const node = container.firstChild;
     expect(getFontSize(node)).toBe(17);

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

@@ -23,69 +23,86 @@ var _div;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { getScrollParents } from '../getScrollParents';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('getScrollParents', () => {
-  const node = /*#__PURE__*/React.createElement("div", null, _div || (_div = /*#__PURE__*/React.createElement("div", {
-    id: "item-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "item-2"
-  }, /*#__PURE__*/React.createElement("span", {
-    id: "item-3"
-  }, "Test"), /*#__PURE__*/React.createElement("span", {
-    id: "sibling-1"
-  }, "Test"), /*#__PURE__*/React.createElement("span", {
-    id: "sibling-2"
-  }, "Test"), /*#__PURE__*/React.createElement("span", {
-    id: "sibling-3"
-  }, "Test")))), /*#__PURE__*/React.createElement("div", {
-    id: "ht",
-    style: {
-      height: '50px'
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "scroll-parent",
-    style: {
-      height: '200px',
-      overflow: 'scroll'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    id: "scroll-child",
-    style: {
-      height: '500px'
-    }
-  }, "Test"))), /*#__PURE__*/React.createElement("div", {
-    id: "scroll-parent-rel",
-    style: {
-      height: '200px',
-      overflow: 'scroll',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '200px',
-      overflow: 'scroll'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "scroll-child-rel",
-    style: {
-      height: '500px',
-      position: 'absolute'
-    }
-  }, "Test"))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '200px',
-      overflow: 'scroll'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "scroll-child-fixed",
-    style: {
-      height: '500px',
-      position: 'fixed'
-    }
-  }, "Test")));
+  const node = _jsxs("div", {
+    children: [_div || (_div = _jsx("div", {
+      id: "item-1",
+      children: _jsxs("div", {
+        id: "item-2",
+        children: [_jsx("span", {
+          id: "item-3",
+          children: "Test"
+        }), _jsx("span", {
+          id: "sibling-1",
+          children: "Test"
+        }), _jsx("span", {
+          id: "sibling-2",
+          children: "Test"
+        }), _jsx("span", {
+          id: "sibling-3",
+          children: "Test"
+        })]
+      })
+    })), _jsx("div", {
+      id: "ht",
+      style: {
+        height: '50px'
+      }
+    }), _jsx("div", {
+      id: "scroll-parent",
+      style: {
+        height: '200px',
+        overflow: 'scroll'
+      },
+      children: _jsx("div", {
+        children: _jsx("div", {
+          id: "scroll-child",
+          style: {
+            height: '500px'
+          },
+          children: "Test"
+        })
+      })
+    }), _jsx("div", {
+      id: "scroll-parent-rel",
+      style: {
+        height: '200px',
+        overflow: 'scroll',
+        position: 'relative'
+      },
+      children: _jsx("div", {
+        style: {
+          height: '200px',
+          overflow: 'scroll'
+        },
+        children: _jsx("div", {
+          id: "scroll-child-rel",
+          style: {
+            height: '500px',
+            position: 'absolute'
+          },
+          children: "Test"
+        })
+      })
+    }), _jsx("div", {
+      style: {
+        height: '200px',
+        overflow: 'scroll'
+      },
+      children: _jsx("div", {
+        id: "scroll-child-fixed",
+        style: {
+          height: '500px',
+          position: 'fixed'
+        },
+        children: "Test"
+      })
+    })]
+  });
   beforeEach(() => {
     render(node);
   });

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

@@ -23,45 +23,54 @@ var _div, _div2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { getOffsetParents } from '../getOffsetParents';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('getOffsetParents', () => {
   // At rendering, we receive the node_wrapper and the body as extra offsetParents
-  const node = /*#__PURE__*/React.createElement("div", {
-    "data-testid": "node"
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child_1_wrapper_parent",
-    style: {
-      transform: '200px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child_1_wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child-1",
-    style: {
-      height: '500px'
-    }
-  }, "Test"))), /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child_2_wrapper_parent",
-    style: {
-      transform: '200px',
-      position: 'absolute'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child_2_wrapper",
-    style: {
-      position: 'absolute'
-    }
-  }, _div || (_div = /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child-2"
-  }, "Test")))), _div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child_3_wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "child-3"
-  }, "Test"))));
+  const node = _jsxs("div", {
+    "data-testid": "node",
+    children: [_jsx("div", {
+      "data-testid": "child_1_wrapper_parent",
+      style: {
+        transform: '200px',
+        position: 'relative'
+      },
+      children: _jsx("div", {
+        "data-testid": "child_1_wrapper",
+        children: _jsx("div", {
+          "data-testid": "child-1",
+          style: {
+            height: '500px'
+          },
+          children: "Test"
+        })
+      })
+    }), _jsx("div", {
+      "data-testid": "child_2_wrapper_parent",
+      style: {
+        transform: '200px',
+        position: 'absolute'
+      },
+      children: _jsx("div", {
+        "data-testid": "child_2_wrapper",
+        style: {
+          position: 'absolute'
+        },
+        children: _div || (_div = _jsx("div", {
+          "data-testid": "child-2",
+          children: "Test"
+        }))
+      })
+    }), _div2 || (_div2 = _jsx("div", {
+      "data-testid": "child_3_wrapper",
+      children: _jsx("div", {
+        "data-testid": "child-3",
+        children: "Test"
+      })
+    }))]
+  });
   it('should find offset parent for inline elements', () => {
     const _render = render(node),
       getByTestId = _render.getByTestId;

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

@@ -23,26 +23,29 @@ var _div;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { isVisible } from '../isVisible';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('isVisible', () => {
   it('should recognize visible elements', () => {
-    render(_div || (_div = /*#__PURE__*/React.createElement("div", {
-      "data-testid": "test"
-    }, "Hello world!")));
+    render(_div || (_div = _jsx("div", {
+      "data-testid": "test",
+      children: "Hello world!"
+    })));
     const element = screen.getByTestId('test');
     expect(isVisible(element)).toBe(true);
   });
   it('should recognize elements with display: none', () => {
-    render(/*#__PURE__*/React.createElement("div", {
-      "data-testid": "test"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'none'
-      }
-    }, "Hello world!")));
+    render(_jsx("div", {
+      "data-testid": "test",
+      children: _jsx("span", {
+        style: {
+          display: 'none'
+        },
+        children: "Hello world!"
+      })
+    }));
     const element = screen.getByTestId('test').firstChild;
     expect(isVisible(element)).toBe(false);
   });
@@ -52,11 +55,13 @@ describe('isVisible', () => {
       overflow: 'hidden',
       clip: 'rect(0,0,0,0)'
     };
-    render(/*#__PURE__*/React.createElement("div", {
-      "data-testid": "test"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: style
-    }, "Hello world!")));
+    render(_jsx("div", {
+      "data-testid": "test",
+      children: _jsx("span", {
+        style: style,
+        children: "Hello world!"
+      })
+    }));
     const element = screen.getByTestId('test').firstChild;
     expect(isVisible(element)).toBe(false);
   });
@@ -66,11 +71,13 @@ describe('isVisible', () => {
       overflow: 'hidden',
       clip: 'rect(0,0,10px,0)'
     };
-    render(/*#__PURE__*/React.createElement("div", {
-      "data-testid": "test"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: style
-    }, "Hello world!")));
+    render(_jsx("div", {
+      "data-testid": "test",
+      children: _jsx("span", {
+        style: style,
+        children: "Hello world!"
+      })
+    }));
     const element = screen.getByTestId('test').firstChild;
     expect(isVisible(element)).toBe(true);
   });
@@ -78,15 +85,19 @@ describe('isVisible', () => {
     const style = {
       visibility: 'hidden'
     };
-    render(/*#__PURE__*/React.createElement("div", {
+    render(_jsx("div", {
       "data-testid": "test",
-      style: style
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-      "data-testid": "test-2",
-      style: {
-        visibility: 'visible'
-      }
-    }, "Hello world!"))));
+      style: style,
+      children: _jsx("span", {
+        children: _jsx("span", {
+          "data-testid": "test-2",
+          style: {
+            visibility: 'visible'
+          },
+          children: "Hello world!"
+        })
+      })
+    }));
     const element = screen.getByTestId('test-2');
     expect(isVisible(element, false)).toBe(true);
     expect(isVisible(element)).toBe(false);
@@ -95,15 +106,19 @@ describe('isVisible', () => {
     const style = {
       visibility: 'hidden'
     };
-    render(/*#__PURE__*/React.createElement("div", {
+    render(_jsx("div", {
       "data-testid": "test",
-      style: style
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-      "data-testid": "test-2",
-      style: {
-        visibility: 'visible'
-      }
-    }, "Hello world!"))));
+      style: style,
+      children: _jsx("span", {
+        children: _jsx("span", {
+          "data-testid": "test-2",
+          style: {
+            visibility: 'visible'
+          },
+          children: "Hello world!"
+        })
+      })
+    }));
     const element = screen.getByTestId('test-2').firstChild;
     expect(isVisible(element, false)).toBe(true);
     expect(isVisible(element)).toBe(false);

package/lib/__new-tests__/addEventListener.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");
 var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _addEventListener = require("../addEventListener");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _div;
 /*
  * The MIT License (MIT)
@@ -33,11 +32,11 @@ var _div;
 describe('addEventListener', () => {
   it('should add an event listener and provide a remove method', () => {
     const callback = _vitest.vi.fn();
-    const _render = (0, _react2.render)(_div || (_div = /*#__PURE__*/_react.default.createElement("div", null))),
+    const _render = (0, _react.render)(_div || (_div = (0, _jsxRuntime.jsx)("div", {}))),
       container = _render.container;
     const node = container.firstChild;
     const listener = (0, _addEventListener.addEventListener)(node, 'click', callback);
-    _react2.fireEvent.click(node);
+    _react.fireEvent.click(node);
     expect(callback).toHaveBeenCalledTimes(1);
     expect(typeof listener.remove).toBe('function');
     listener.remove();

package/lib/__new-tests__/addInputModeListener.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");
 var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _addInputModeListener = require("../addInputModeListener");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _div;
 /*
  * The MIT License (MIT)
@@ -33,22 +32,27 @@ var _div;
 describe('addInputModeListener', () => {
   it('should handle input mode changes', () => {
     const handleInputModeChange = _vitest.vi.fn();
-    (0, _react2.render)(_div || (_div = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      id: "button-1"
-    }, "hello"), /*#__PURE__*/_react.default.createElement("button", null, "world"))));
+    (0, _react.render)(_div || (_div = (0, _jsxRuntime.jsxs)("div", {
+      children: [(0, _jsxRuntime.jsx)("button", {
+        id: "button-1",
+        children: "hello"
+      }), (0, _jsxRuntime.jsx)("button", {
+        children: "world"
+      })]
+    })));
     const inputModeListener = (0, _addInputModeListener.addInputModeListener)({
       onInputModeChange: handleInputModeChange
     });
-    const button = _react2.screen.getByRole('button', {
+    const button = _react.screen.getByRole('button', {
       name: 'hello'
     });
-    _react2.fireEvent.mouseUp(button);
+    _react.fireEvent.mouseUp(button);
     expect(inputModeListener.isKeyboardMode()).toBe(false);
-    _react2.fireEvent.keyDown(button);
+    _react.fireEvent.keyDown(button);
     expect(inputModeListener.isKeyboardMode()).toBe(true);
     expect(handleInputModeChange).toHaveBeenCalledTimes(2);
     inputModeListener.remove();
-    _react2.fireEvent.mouseUp(button);
+    _react.fireEvent.mouseUp(button);
     expect(inputModeListener.isKeyboardMode()).toBe(true);
     expect(handleInputModeChange).toHaveBeenCalledTimes(2);
   });