@instructure/ui-dom-utils 8.47.0 → 8.47.1-snapshot-0

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _getScrollParents = require("../getScrollParents");
+var _div;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('getScrollParents', () => {
+  const node = /*#__PURE__*/_react.default.createElement("div", null, _div || (_div = /*#__PURE__*/_react.default.createElement("div", {
+    id: "item-1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "item-2"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "item-3"
+  }, "Test"), /*#__PURE__*/_react.default.createElement("span", {
+    id: "sibling-1"
+  }, "Test"), /*#__PURE__*/_react.default.createElement("span", {
+    id: "sibling-2"
+  }, "Test"), /*#__PURE__*/_react.default.createElement("span", {
+    id: "sibling-3"
+  }, "Test")))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "ht",
+    style: {
+      height: '50px'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "scroll-parent",
+    style: {
+      height: '200px',
+      overflow: 'scroll'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    id: "scroll-child",
+    style: {
+      height: '500px'
+    }
+  }, "Test"))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "scroll-parent-rel",
+    style: {
+      height: '200px',
+      overflow: 'scroll',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '200px',
+      overflow: 'scroll'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "scroll-child-rel",
+    style: {
+      height: '500px',
+      position: 'absolute'
+    }
+  }, "Test"))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '200px',
+      overflow: 'scroll'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "scroll-child-fixed",
+    style: {
+      height: '500px',
+      position: 'fixed'
+    }
+  }, "Test")));
+  beforeEach(() => {
+    (0, _react2.render)(node);
+  });
+  it('should find scroll parent for inline elements', () => {
+    const child = document.getElementById('scroll-child');
+    const parent = document.getElementById('scroll-parent');
+    expect((0, _getScrollParents.getScrollParents)(child)[0]).toBe(parent);
+  });
+  it('should ignore static parents when absolute', () => {
+    const child = document.getElementById('scroll-child-rel');
+    const parent = document.getElementById('scroll-parent-rel');
+    expect((0, _getScrollParents.getScrollParents)(child)[0]).toBe(parent);
+  });
+  it('should handle fixed', () => {
+    const child = document.getElementById('scroll-child-fixed');
+    const scrollParent = (0, _getScrollParents.getScrollParents)(child)[0];
+    expect(scrollParent).toBe(document);
+  });
+});

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _getOffsetParents = require("../getOffsetParents");
+var _div, _div2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('getOffsetParents', () => {
+  // At rendering, we receive the node_wrapper and the body as extra offsetParents
+  const node = /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "node"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child_1_wrapper_parent",
+    style: {
+      transform: '200px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child_1_wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child-1",
+    style: {
+      height: '500px'
+    }
+  }, "Test"))), /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child_2_wrapper_parent",
+    style: {
+      transform: '200px',
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child_2_wrapper",
+    style: {
+      position: 'absolute'
+    }
+  }, _div || (_div = /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child-2"
+  }, "Test")))), _div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child_3_wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "child-3"
+  }, "Test"))));
+  it('should find offset parent for inline elements', () => {
+    const _render = (0, _react2.render)(node),
+      getByTestId = _render.getByTestId;
+    const child = getByTestId('child-1');
+    const parent = getByTestId('child_1_wrapper_parent');
+    const offsetParents = (0, _getOffsetParents.getOffsetParents)(child);
+    expect(offsetParents[1]).toBe(parent);
+  });
+  it('should ignore static parents when absolute', () => {
+    const _render2 = (0, _react2.render)(node),
+      getByTestId = _render2.getByTestId;
+    const child = getByTestId('child-2');
+    const offsetParents = (0, _getOffsetParents.getOffsetParents)(child);
+    expect(offsetParents.length).toBe(5);
+  });
+  it('should handle fixed', () => {
+    const _render3 = (0, _react2.render)(node),
+      getByTestId = _render3.getByTestId;
+    const child = getByTestId('child-3');
+    const offsetParents = (0, _getOffsetParents.getOffsetParents)(child);
+    expect(offsetParents.length).toBe(4);
+  });
+});

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

@@ -0,0 +1,43 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _isDefinedCustomElement = require("../isDefinedCustomElement");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+class TestElement extends HTMLElement {}
+describe('isDefinedCustomElement', () => {
+  beforeAll(() => {
+    customElements.define('test-element', TestElement);
+  });
+  it('should return true for defined elements', () => {
+    const el = document.createElement('test-element');
+    expect((0, _isDefinedCustomElement.isDefinedCustomElement)(el)).toBe(true);
+  });
+  it('should return false for not defined elements', () => {
+    // it is possible to create a custom element that is not defined
+    const el = document.createElement('my-element');
+    expect((0, _isDefinedCustomElement.isDefinedCustomElement)(el)).toBe(false);
+  });
+});

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _isVisible = require("../isVisible");
+var _div;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('isVisible', () => {
+  it('should recognize visible elements', () => {
+    (0, _react2.render)(_div || (_div = /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test"
+    }, "Hello world!")));
+    const element = _react2.screen.getByTestId('test');
+    expect((0, _isVisible.isVisible)(element)).toBe(true);
+  });
+  it('should recognize elements with display: none', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'none'
+      }
+    }, "Hello world!")));
+    const element = _react2.screen.getByTestId('test').firstChild;
+    expect((0, _isVisible.isVisible)(element)).toBe(false);
+  });
+  it('should recognize elements hidden with clip', () => {
+    const style = {
+      position: 'absolute',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)'
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: style
+    }, "Hello world!")));
+    const element = _react2.screen.getByTestId('test').firstChild;
+    expect((0, _isVisible.isVisible)(element)).toBe(false);
+  });
+  it('should recognize clipped elements that are not hidden', () => {
+    const style = {
+      position: 'absolute',
+      overflow: 'hidden',
+      clip: 'rect(0,0,10px,0)'
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: style
+    }, "Hello world!")));
+    const element = _react2.screen.getByTestId('test').firstChild;
+    expect((0, _isVisible.isVisible)(element)).toBe(true);
+  });
+  it('should recursively check parent visibility', () => {
+    const style = {
+      visibility: 'hidden'
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test",
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
+      "data-testid": "test-2",
+      style: {
+        visibility: 'visible'
+      }
+    }, "Hello world!"))));
+    const element = _react2.screen.getByTestId('test-2');
+    expect((0, _isVisible.isVisible)(element, false)).toBe(true);
+    expect((0, _isVisible.isVisible)(element)).toBe(false);
+  });
+  it('should not recursively check text nodes', () => {
+    const style = {
+      visibility: 'hidden'
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "test",
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
+      "data-testid": "test-2",
+      style: {
+        visibility: 'visible'
+      }
+    }, "Hello world!"))));
+    const element = _react2.screen.getByTestId('test-2').firstChild;
+    expect((0, _isVisible.isVisible)(element, false)).toBe(true);
+    expect((0, _isVisible.isVisible)(element)).toBe(false);
+  });
+});

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _requestAnimationFrame = require("../requestAnimationFrame");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('requestAnimationFrame', () => {
+  it('should provide a cancel method', async () => {
+    const callback = jest.fn();
+    const raf = (0, _requestAnimationFrame.requestAnimationFrame)(callback);
+    await (0, _react.waitFor)(() => {
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(typeof raf.cancel).toBe('function');
+    });
+  });
+});

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _transformSelection = require("../transformSelection");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('transformSelection', () => {
+  it('should work with transformCursor', () => {
+    const paramObj = {
+      selectionStart: 2,
+      selectionEnd: 3,
+      selectionDirection: 'none',
+      value: '1x2345'
+    };
+    const result = (0, _transformSelection.transformSelection)(paramObj, '12345');
+    expect(result).toEqual({
+      selectionStart: 1,
+      selectionEnd: 2,
+      selectionDirection: 'none'
+    });
+  });
+});
+describe('transformCursor', () => {
+  it('should retain cursor at the end', () => {
+    const dirtyValue = '12_xxxx_';
+    const cleanedValue = '12';
+    const cursorIndex = dirtyValue.length;
+    expect((0, _transformSelection.transformCursor)(cursorIndex, dirtyValue, cleanedValue)).toBe(cleanedValue.length);
+  });
+  it('should retain cursor at the start', () => {
+    const dirtyValue = '12_xxxx_67';
+    const cleanedValue = '1267';
+    const cursorIndex = 0;
+    expect((0, _transformSelection.transformCursor)(cursorIndex, dirtyValue, cleanedValue)).toBe(0);
+  });
+  it('should retain cursor between cleaned values', () => {
+    const dirtyValue = '12_xxxx_67';
+    const cleanedValue = '1267';
+    const cursorIndex = 6;
+    expect((0, _transformSelection.transformCursor)(cursorIndex, dirtyValue, cleanedValue)).toBe(2);
+  });
+  it('should retain cursor after cleaned values', () => {
+    const dirtyValue = '12_xxxx_67';
+    const cleanedValue = '1267';
+    const cursorIndex = dirtyValue.length - 1;
+    expect((0, _transformSelection.transformCursor)(cursorIndex, dirtyValue, cleanedValue)).toBe(3);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-dom-utils",
-  "version": "8.47.0",
+  "version": "8.47.1-snapshot-0",
   "description": "A DOM utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -22,13 +22,14 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.47.0",
-    "@instructure/ui-test-utils": "8.47.0"
+    "@instructure/ui-babel-preset": "8.47.1-snapshot-0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.47.0",
-    "@instructure/shared-types": "8.47.0"
+    "@instructure/console": "8.47.1-snapshot-0",
+    "@instructure/shared-types": "8.47.1-snapshot-0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18",

package/src/__new-tests__/addEventListener.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { addEventListener } from '../addEventListener'
+
+describe('addEventListener', () => {
+  it('should add an event listener and provide a remove method', () => {
+    const callback = jest.fn()
+
+    const { container } = render(<div />)
+    const node = container.firstChild as HTMLDivElement
+
+    const listener = addEventListener(node, 'click', callback)
+
+    fireEvent.click(node)
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(typeof listener.remove).toBe('function')
+
+    listener.remove()
+  })
+})

package/src/__new-tests__/addInputModeListener.test.tsx

@@ -0,0 +1,60 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { addInputModeListener } from '../addInputModeListener'
+
+describe('addInputModeListener', () => {
+  it('should handle input mode changes', () => {
+    const handleInputModeChange = jest.fn()
+
+    render(
+      <div>
+        <button id="button-1">hello</button>
+        <button>world</button>
+      </div>
+    )
+
+    const inputModeListener = addInputModeListener({
+      onInputModeChange: handleInputModeChange
+    })
+
+    const button = screen.getByRole('button', { name: 'hello' })
+
+    fireEvent.mouseUp(button)
+    expect(inputModeListener.isKeyboardMode()).toBe(false)
+
+    fireEvent.keyDown(button)
+    expect(inputModeListener.isKeyboardMode()).toBe(true)
+    expect(handleInputModeChange).toHaveBeenCalledTimes(2)
+
+    inputModeListener.remove()
+
+    fireEvent.mouseUp(button)
+    expect(inputModeListener.isKeyboardMode()).toBe(true)
+    expect(handleInputModeChange).toHaveBeenCalledTimes(2)
+  })
+})

package/src/__new-tests__/addPositionChangeListener.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { addPositionChangeListener } from '../addPositionChangeListener'
+
+const mockRect = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  toJSON: jest.fn()
+}
+
+describe('addPositionChangeListener', () => {
+  it('should provide a remove method', async () => {
+    const callback = jest.fn()
+    Element.prototype.getBoundingClientRect = jest.fn(() => mockRect as DOMRect)
+
+    const { container } = render(<div />)
+    const node = container.firstChild as HTMLDivElement
+
+    const listener = addPositionChangeListener(node, callback)
+
+    // Manually trigger a position change (since JSDOM won't)
+    Element.prototype.getBoundingClientRect = jest.fn(() => {
+      return { ...mockRect, top: 200 } as DOMRect
+    })
+
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalledTimes(1)
+      expect(typeof listener.remove).toBe('function')
+    })
+
+    listener.remove()
+    jest.restoreAllMocks()
+  })
+})