@instructure/ui-dom-utils 8.33.2-snapshot-0 → 8.33.2

package/CHANGELOG.md

@@ -3,14 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.33.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-0) (2023-01-13)
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
 
 **Note:** Version bump only for package @instructure/ui-dom-utils
 
-
-
-
-
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-dom-utils

package/es/InputModeListener.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { logWarn as warn } from '@instructure/console';
 import { addEventListener } from './addEventListener';
 import { canUseDOM } from './canUseDOM';
@@ -28,35 +29,27 @@ export const MODES = {
   keyboard: 'keyboard',
   pointer: 'pointer'
 };
-
 class InputModeListenerImpl {
   constructor() {
     this._listeners = [];
     this._initialized = false;
     this._mode = MODES.keyboard;
-
     this.onInitialPointerMove = event => {
       var _event$target, _event$target$nodeNam;
-
       // Work around a Safari quirk that fires a mousemove on <html> whenever the
       // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
       if ((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$nodeNam = _event$target.nodeName) === null || _event$target$nodeNam === void 0 ? void 0 : _event$target$nodeNam.toLowerCase()) === 'html') {
         return;
       }
-
       this._mode = MODES.pointer;
-
       this._listeners.forEach(listener => listener.remove());
     };
-
     this.onKeyDown = () => {
       this._mode = MODES.keyboard;
     };
-
     this.onPointerDown = () => {
       this._mode = MODES.pointer;
     };
-
     this.init = () => {
       if (!canUseDOM || this._initialized) return;
       addEventListener(document, 'keydown', this.onKeyDown, true);
@@ -66,43 +59,29 @@ class InputModeListenerImpl {
       this.addInitialPointerMoveListeners();
       this._initialized = true;
     };
-
     warn(false, `[InputModeListener] is deprecated and will be removed in version 7.0.0. Use addInputModeListener instead.`);
     this.init();
   }
-
   addInitialPointerMoveListeners() {
     this._listeners.push(addEventListener(document, 'mousemove', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'mousedown', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'mouseup', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'pointermove', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'pointerdown', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'pointerup', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'touchmove', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'touchstart', this.onInitialPointerMove, true));
-
     this._listeners.push(addEventListener(document, 'touchend', this.onInitialPointerMove, true));
   }
-
   get mode() {
     this.init();
     return this._mode;
   }
-
   isKeyboardMode() {
     this.init();
     return this._mode === MODES.keyboard;
   }
-
 }
-
 const InputModeListener = new InputModeListenerImpl();
 export default InputModeListener;
 export { InputModeListener };

package/es/addEventListener.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { findDOMNode } from './findDOMNode';
 
+import { findDOMNode } from './findDOMNode';
 /**
  * ---
  * category: utilities/DOM
@@ -42,9 +42,7 @@ function addEventListener(el, event, handler, capture) {
     remove() {
       node === null || node === void 0 ? void 0 : node.removeEventListener(event, handler, capture);
     }
-
   };
 }
-
 export default addEventListener;
 export { addEventListener };

package/es/addInputModeListener.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { addEventListener } from './addEventListener';
 import { canUseDOM } from './canUseDOM';
 const MODES = {
@@ -32,90 +33,63 @@ let _downListeners = [];
 let _mode = MODES.keyboard;
 let _registeredCount = 0;
 const _modeChangeHandlers = {};
-
 const handleInitialPointerMove = event => {
   // Work around a Safari quirk that fires a mousemove on <html> whenever the
   // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
   if (event.target.nodeName.toLowerCase() === 'html') {
     return;
   }
-
   handleInputModeChange(_mode, MODES.pointer);
-
   _moveListeners.forEach(listener => listener.remove());
 };
-
 const handleInputModeChange = (currentMode, newMode) => {
   if (currentMode === newMode) return;
   _mode = newMode;
   Object.keys(_modeChangeHandlers).forEach(handlerId => _modeChangeHandlers[handlerId](currentMode, newMode));
 };
-
 const handleKeyDown = () => {
   handleInputModeChange(_mode, MODES.keyboard);
 };
-
 const handlePointerDown = () => {
   handleInputModeChange(_mode, MODES.pointer);
 };
-
 const addMoveListeners = () => {
   if (_moveListeners.length === 0) {
     _moveListeners.push(addEventListener(document, 'mousemove', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'mousedown', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'mouseup', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'pointermove', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'pointerdown', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'pointerup', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'touchmove', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'touchstart', handleInitialPointerMove, true));
-
     _moveListeners.push(addEventListener(document, 'touchend', handleInitialPointerMove, true));
   }
 };
-
 const addDownListeners = () => {
   if (_downListeners.length === 0) {
     _downListeners.push(addEventListener(document, 'keydown', handleKeyDown, true));
-
     _downListeners.push(addEventListener(document, 'mousedown', handlePointerDown, true));
-
     _downListeners.push(addEventListener(document, 'pointerdown', handlePointerDown, true));
-
     _downListeners.push(addEventListener(document, 'touchstart', handlePointerDown, true));
   }
 };
-
 const removeListeners = () => {
   _moveListeners.forEach(listener => listener.remove());
-
   _moveListeners = [];
-
   _downListeners.forEach(listener => listener.remove());
-
   _downListeners = [];
 };
-
 const addInputModeListener = handlerObject => {
   const onInputModeChange = handlerObject.onInputModeChange;
   const id = _registeredCount++;
-
   if (typeof onInputModeChange === 'function') {
     _modeChangeHandlers[id] = onInputModeChange;
   }
-
   if (canUseDOM) {
     addDownListeners();
     addMoveListeners();
   }
-
   return {
     isKeyboardMode: () => {
       return _mode === MODES.keyboard;
@@ -124,12 +98,10 @@ const addInputModeListener = handlerObject => {
       if (_registeredCount === 1) {
         removeListeners();
       }
-
       delete _modeChangeHandlers[id];
       _registeredCount--;
     }
   };
 };
-
 export default addInputModeListener;
 export { addInputModeListener, MODES };

package/es/addPositionChangeListener.js

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { findDOMNode } from './findDOMNode';
 import { getBoundingClientRect } from './getBoundingClientRect';
 import { requestAnimationFrame } from './requestAnimationFrame';
-
 /**
  * ---
  * category: utilities/DOM
@@ -41,30 +41,24 @@ function addPositionChangeListener(el, handler) {
   const raf = [];
   let coords = getBoundingClientRect(node) || {};
   let cancelled = false;
-
   function checkPosition() {
     if (!cancelled) {
       const newCoords = getBoundingClientRect(node) || {};
       const positionChanged = newCoords.top !== coords.top || newCoords.left !== coords.left || newCoords.right !== coords.right || newCoords.bottom !== coords.bottom || newCoords.width !== coords.width || newCoords.height !== coords.height;
-
       if (positionChanged && typeof handler === 'function') {
         handler(newCoords);
       }
-
       coords = newCoords;
       raf.push(requestAnimationFrame(checkPosition));
     }
   }
-
   checkPosition();
   return {
     remove() {
       cancelled = true;
       raf.forEach(req => req.cancel());
     }
-
   };
 }
-
 export default addPositionChangeListener;
 export { addPositionChangeListener };

package/es/addResizeListener.js

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { findDOMNode } from './findDOMNode';
 import { getBoundingClientRect } from './getBoundingClientRect';
 import { requestAnimationFrame } from './requestAnimationFrame';
-
 /**
  * ---
  * category: utilities/DOM
@@ -67,35 +67,28 @@ function addResizeListener(el, handler) {
   let origSize = getBoundingClientRect(node);
   let cancelled = false;
   let raf;
-
   const checkDimensions = () => {
     if (cancelled) {
       return;
     }
-
     const boundingRect = getBoundingClientRect(node);
     const size = {
       width: boundingRect.width,
       height: boundingRect.height
     };
-
     if (dimensions.some(dim => size[dim] != origSize[dim]) && typeof handler === 'function') {
       handler(size);
     }
-
     origSize = size;
     raf = requestAnimationFrame(checkDimensions);
   };
-
   checkDimensions();
   return {
     remove() {
       cancelled = true;
       raf.cancel();
     }
-
   };
 }
-
 export default addResizeListener;
 export { addResizeListener };

package/es/contains.js

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { findDOMNode } from './findDOMNode';
 import { canUseDOM } from './canUseDOM';
-
 /**
  * ---
  * category: utilities/DOM
@@ -38,7 +38,6 @@ import { canUseDOM } from './canUseDOM';
 function containsWithDOM(context, el) {
   const container = context && findDOMNode(context);
   const node = el && findDOMNode(el);
-
   if (!container || !node) {
     return false;
   } else if (!(container instanceof Window) && !(node instanceof Window)) {
@@ -47,23 +46,18 @@ function containsWithDOM(context, el) {
     return containsFallback(container, node);
   }
 }
-/* istanbul ignore next  */
-
 
+/* istanbul ignore next  */
 function containsFallback(context, el) {
   let node = el;
-
   while (node) {
     if (node === context) {
       return true;
     }
-
     node = node.parentNode;
   }
-
   return false;
 }
-
 const contains = canUseDOM ? containsWithDOM : containsFallback;
 export default contains;
 export { contains };

package/es/containsActiveElement.js

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { findDOMNode } from './findDOMNode';
 import { contains } from './contains';
 import { getActiveElement } from './getActiveElement';
-
 /**
  * ---
  * category: utilities/DOM
@@ -40,6 +40,5 @@ function containsActiveElement(el) {
   const active = getActiveElement();
   return !!node && (active === node || contains(node, active));
 }
-
 export default containsActiveElement;
 export { containsActiveElement };

package/es/elementMatches.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { findDOMNode } from './findDOMNode';
 
+import { findDOMNode } from './findDOMNode';
 /**
  * ---
  * category: utilities/DOM
@@ -37,11 +37,10 @@ import { findDOMNode } from './findDOMNode';
  */
 function elementMatches(el, selectorString) {
   const node = el && findDOMNode(el);
-  if (!node) return false; // this cast is in a separate line to circumvent a react-docgen bug
-
+  if (!node) return false;
+  // this cast is in a separate line to circumvent a react-docgen bug
   const elem = node;
   return elem.matches(selectorString);
 }
-
 export default elementMatches;
 export { elementMatches };

package/es/findDOMNode.js

@@ -21,12 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import ReactDOM from 'react-dom';
 
+import ReactDOM from 'react-dom';
 const isReactNodeWithRef = el => {
   return !!el && el.ref !== void 0;
 };
-
 const isRefObject = obj => {
   return !!obj && obj.current !== void 0;
 };
@@ -41,35 +40,29 @@ const isRefObject = obj => {
  * @param { Node | Window | React.ReactElement | React.Component | function } el - component, DOM node, or function returning a DOM node
  * @returns { Node | Window | null | undefined } The root node of this element
  */
-
-
 function findDOMNode(el) {
   const node = typeof el === 'function' ? el() : el;
-
   if (node === document) {
     return document.documentElement; // HTMLElement
   } else if (node instanceof Element || node === window || node && typeof node.nodeType !== 'undefined') {
     return node;
   } else if (node) {
     const reactNode = node;
-
     if (isReactNodeWithRef(reactNode)) {
       const refElement = isRefObject(reactNode.ref) ? reactNode.ref.current : reactNode.ref;
-
       if (!(refElement instanceof HTMLElement)) {
         return findDOMNode(refElement);
       }
-
       return refElement;
     } else {
-      const elName = reactNode.constructor.componentId ? reactNode.constructor.componentId : reactNode.constructor.name; // eslint-disable-next-line no-console
+      const elName = reactNode.constructor.componentId ? reactNode.constructor.componentId : reactNode.constructor.name;
+
+      // eslint-disable-next-line no-console
 
       return ReactDOM.findDOMNode(node);
     }
   }
-
   return void 0;
 }
-
 export default findDOMNode;
 export { findDOMNode };

package/es/findFocusable.js

@@ -33,22 +33,18 @@
  *
  * http://api.jqueryui.com/category/ui-core/
  **/
-import { getComputedStyle, findDOMNode, elementMatches } from './';
 
+import { getComputedStyle, findDOMNode, elementMatches } from './';
 function findFocusable(el, filter, shouldSearchRootNode) {
   const element = el && findDOMNode(el);
-
   if (!element || typeof element.querySelectorAll !== 'function') {
     return [];
   }
-
   const focusableSelector = 'a[href],frame,iframe,object,input:not([type=hidden]),select,textarea,button,*[tabindex]';
   let matches = Array.from(element.querySelectorAll(focusableSelector));
-
   if (shouldSearchRootNode && elementMatches(element, focusableSelector)) {
     matches = [...matches, element];
   }
-
   return matches.filter(el => {
     if (typeof filter === 'function') {
       return filter(el) && focusable(el);
@@ -57,22 +53,18 @@ function findFocusable(el, filter, shouldSearchRootNode) {
     }
   });
 }
-
 function hidden(element) {
   const cs = getComputedStyle(element);
   return cs.display !== 'inline' && element.offsetWidth <= 0 && element.offsetHeight <= 0 || cs.display === 'none';
 }
-
 function positioned(element) {
   const POS = ['fixed', 'absolute'];
   if (POS.includes(element.style.position.toLowerCase())) return true;
   if (POS.includes(getComputedStyle(element).getPropertyValue('position').toLowerCase())) return true;
   return false;
 }
-
 function visible(element) {
   let el = element;
-
   while (el) {
     if (el === document.body) break;
     if (el instanceof ShadowRoot) break;
@@ -80,14 +72,11 @@ function visible(element) {
     if (positioned(el)) break;
     el = el.parentNode;
   }
-
   return true;
 }
-
 function focusable(element) {
   return !element.disabled && visible(element);
 }
-
 export default findFocusable;
 export {
 /**

package/es/findTabbable.js

@@ -21,19 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { findFocusable } from './findFocusable';
 
+import { findFocusable } from './findFocusable';
 function findTabbable(el, shouldSearchRootNode) {
   return findFocusable(el, element => {
     return !isInvalidTabIndex(element.getAttribute('tabindex'));
   }, shouldSearchRootNode);
 }
-
 function isInvalidTabIndex(tabIndex) {
   // TS wants it to be number to be valid, but this method in fact checks if the parameter is a valid positive number
   return !isNaN(tabIndex) && tabIndex < 0;
 }
-
 export default findTabbable;
 export {
 /**

package/es/getActiveElement.js

@@ -21,7 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { isDefinedCustomElement } from './isDefinedCustomElement';
+
 /**
  * ---
  * category: utilities/DOM
@@ -32,16 +34,14 @@ import { isDefinedCustomElement } from './isDefinedCustomElement';
  * @param { Document } doc - document by default or user specified doc
  * @return { Element | null } the active element
  */
-
 function getActiveElement(doc) {
-  const activeElement = (doc || document).activeElement; //check if activeElement is a custom element or not
+  const activeElement = (doc || document).activeElement;
 
+  //check if activeElement is a custom element or not
   if (activeElement && isDefinedCustomElement(activeElement)) {
     return activeElement.shadowRoot.activeElement;
   }
-
   return activeElement;
 }
-
 export default getActiveElement;
 export { getActiveElement };

package/es/getBoundingClientRect.js

@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { findDOMNode } from './findDOMNode';
 import { canUseDOM } from './canUseDOM';
 import { contains } from './contains';
 import { ownerDocument } from './ownerDocument';
-
 /**
  * ---
  * category: utilities/DOM
@@ -46,17 +46,13 @@ function getBoundingClientRect(el) {
     height: 0,
     width: 0
   };
-
   if (!canUseDOM) {
     return rect;
   }
-
   const node = el && findDOMNode(el);
-
   if (!node) {
     return rect;
   }
-
   if (node === window) {
     return {
       left: window.pageXOffset,
@@ -67,24 +63,18 @@ function getBoundingClientRect(el) {
       bottom: window.innerHeight + window.pageYOffset
     };
   }
-
   const doc = el === document ? document : ownerDocument(node);
   const docEl = doc && doc.documentElement;
-
   if (!docEl || !contains(docEl, node)) {
     return rect;
   }
-
   const boundingRect = node.getBoundingClientRect();
   let k;
-
   for (k in rect) {
     rect[k] = boundingRect[k];
   }
-
   if (doc !== document && doc.defaultView) {
     const frameElement = doc.defaultView.frameElement;
-
     if (frameElement) {
       const frameRect = getBoundingClientRect(frameElement);
       rect.top += frameRect.top;
@@ -93,7 +83,6 @@ function getBoundingClientRect(el) {
       rect.right += frameRect.left;
     }
   }
-
   return {
     top: rect.top + (window.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0),
     left: rect.left + (window.pageXOffset || docEl.scrollLeft) - (docEl.clientLeft || 0),
@@ -104,6 +93,5 @@ function getBoundingClientRect(el) {
     bottom: doc.body.clientHeight - rect.height - rect.top
   };
 }
-
 export default getBoundingClientRect;
 export { getBoundingClientRect };