@openedx/paragon 23.1.1 → 23.2.0

package/dist/hooks/useArrowKeyNavigation.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ArrowKeyNavProps {
+    /** e.g. 'a,button,input' */
+    selectors?: string;
+    ignoredKeys?: string[];
+}
+/**
+ * A React hook to enable arrow key navigation on a component.
+ */
+export default function useArrowKeyNavigation(props?: ArrowKeyNavProps): import("react").MutableRefObject<HTMLElement | undefined>;

package/dist/hooks/useArrowKeyNavigation.js

@@ -5,11 +5,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useRef, useEffect } from 'react';
-
-/**
- * A React hook to enable arrow key navigation on a component.
- */
-
 function handleEnter(_ref) {
   var event = _ref.event,
     currentIndex = _ref.currentIndex,
@@ -48,7 +43,6 @@ function handleArrowKey(_ref2) {
   (_nextElement = nextElement) === null || _nextElement === void 0 ? void 0 : _nextElement.focus();
   event.preventDefault();
 }
-
 /**
  * Implement arrow key navigation for the given parentNode
  */
@@ -86,7 +80,7 @@ function handleEvents(_ref3) {
   var currentIndex = Array.from(availableElements).findIndex(function (availableElement) {
     return availableElement === activeElement;
   });
-  if (key === 'Enter') {
+  if (key === 'Enter' && activeElement) {
     handleEnter({
       event: event,
       currentIndex: currentIndex,
@@ -99,10 +93,13 @@ function handleEvents(_ref3) {
     availableElements: availableElements
   });
 }
-export default function useArrowKeyNavigation(props) {
-  var _ref4 = props || {},
-    selectors = _ref4.selectors,
-    ignoredKeys = _ref4.ignoredKeys;
+/**
+ * A React hook to enable arrow key navigation on a component.
+ */
+export default function useArrowKeyNavigation() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var selectors = props.selectors,
+    ignoredKeys = props.ignoredKeys;
   var parentNode = useRef();
   useEffect(function () {
     var eventHandler = function eventHandler(event) {

package/dist/hooks/useArrowKeyNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","_nextElement","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","_ref4","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.jsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\n\nfunction handleEnter({ event, currentIndex, activeElement }) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  nextElement?.focus();\n  event.preventDefault();\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter') {\n    handleEnter({ event, currentIndex, activeElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport default function useArrowKeyNavigation(props) {\n  const { selectors, ignoredKeys } = props || {};\n  const parentNode = useRef();\n\n  useEffect(() => {\n    const eventHandler = (event) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","_nextElement","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","arguments","undefined","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.tsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ninterface HandleEnterArgs {\n  event: KeyboardEvent;\n  currentIndex: number;\n  activeElement: HTMLElement;\n}\n\nfunction handleEnter({ event, currentIndex, activeElement }: HandleEnterArgs) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\ninterface HandleArrowKeyArgs {\n  event: KeyboardEvent;\n  currentIndex: number;\n  availableElements: NodeListOf<HTMLElement>;\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }: HandleArrowKeyArgs) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  nextElement?.focus();\n  event.preventDefault();\n}\n\ninterface HandleEventsArgs {\n  event: KeyboardEvent;\n  ignoredKeys?: string[];\n  parentNode: HTMLElement | undefined;\n  selectors?: string;\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}: HandleEventsArgs) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll<HTMLElement>(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter' && activeElement) {\n    handleEnter({ event, currentIndex, activeElement: activeElement as HTMLElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport interface ArrowKeyNavProps {\n  /** e.g. 'a,button,input' */\n  selectors?: string;\n  ignoredKeys?: string[];\n}\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\nexport default function useArrowKeyNavigation(props: ArrowKeyNavProps = {}) {\n  const { selectors, ignoredKeys } = props;\n  const parentNode = useRef<HTMLElement>();\n\n  useEffect(() => {\n    const eventHandler = (event: KeyboardEvent) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/hooks/useIndexOfLastVisibleChild.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This hook will find the index of the last child of a containing element
+ * that fits within its bounding rectangle. This is done by summing the widths
+ * of the children until they exceed the width of the container.
+ *
+ * The hook returns the index of the last visible child.
+ *
+ * @param containerElementRef - container element
+ * @param overflowElementRef - overflow element
+ */
+declare const useIndexOfLastVisibleChild: (containerElementRef: HTMLElement | null, overflowElementRef: HTMLElement | null) => number;
+export default useIndexOfLastVisibleChild;

package/dist/hooks/useIndexOfLastVisibleChild.js

@@ -11,10 +11,10 @@ import { useLayoutEffect, useState } from 'react';
  * that fits within its bounding rectangle. This is done by summing the widths
  * of the children until they exceed the width of the container.
  *
- * @param {Element} containerElementRef - container element
- * @param {Element} overflowElementRef - overflow element
- *
  * The hook returns the index of the last visible child.
+ *
+ * @param containerElementRef - container element
+ * @param overflowElementRef - overflow element
  */
 var useIndexOfLastVisibleChild = function useIndexOfLastVisibleChild(containerElementRef, overflowElementRef) {
   var _useState = useState(-1),
@@ -22,7 +22,11 @@ var useIndexOfLastVisibleChild = function useIndexOfLastVisibleChild(containerEl
     indexOfLastVisibleChild = _useState2[0],
     setIndexOfLastVisibleChild = _useState2[1];
   useLayoutEffect(function () {
+    if (!containerElementRef) {
+      return undefined;
+    }
     function updateLastVisibleChildIndex() {
+      var _overflowElementRef$g;
       // Get array of child nodes from NodeList form
       var childNodesArr = Array.prototype.slice.call(containerElementRef.children);
       var _childNodesArr$filter = childNodesArr
@@ -42,23 +46,20 @@ var useIndexOfLastVisibleChild = function useIndexOfLastVisibleChild(containerEl
           // sometimes we'll show a dropdown with one item in it when it would fit,
           // but allowing this case dramatically simplifies the calculations we need
           // to do above.
-          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+          sumWidth: (_overflowElementRef$g = overflowElementRef === null || overflowElementRef === void 0 ? void 0 : overflowElementRef.getBoundingClientRect().width) !== null && _overflowElementRef$g !== void 0 ? _overflowElementRef$g : 0,
           nextIndexOfLastVisibleChild: -1
         }),
         nextIndexOfLastVisibleChild = _childNodesArr$filter.nextIndexOfLastVisibleChild;
       setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
     }
-    if (containerElementRef) {
-      updateLastVisibleChildIndex();
-      var resizeObserver = new ResizeObserver(function () {
-        return updateLastVisibleChildIndex();
-      });
-      resizeObserver.observe(containerElementRef);
-      return function () {
-        return resizeObserver.disconnect();
-      };
-    }
-    return undefined;
+    updateLastVisibleChildIndex();
+    var resizeObserver = new ResizeObserver(function () {
+      return updateLastVisibleChildIndex();
+    });
+    resizeObserver.observe(containerElementRef);
+    return function () {
+      return resizeObserver.disconnect();
+    };
   }, [containerElementRef, overflowElementRef]);
   return indexOfLastVisibleChild;
 };

package/dist/hooks/useIndexOfLastVisibleChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIndexOfLastVisibleChild.js","names":["useLayoutEffect","useState","useIndexOfLastVisibleChild","containerElementRef","overflowElementRef","_useState","_useState2","_slicedToArray","indexOfLastVisibleChild","setIndexOfLastVisibleChild","updateLastVisibleChildIndex","childNodesArr","Array","prototype","slice","call","children","_childNodesArr$filter","filter","childNode","reduce","acc","index","sumWidth","getBoundingClientRect","width","nextIndexOfLastVisibleChild","resizeObserver","ResizeObserver","observe","disconnect","undefined"],"sources":["../../src/hooks/useIndexOfLastVisibleChild.jsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * @param {Element} containerElementRef - container element\n * @param {Element} overflowElementRef - overflow element\n *\n * The hook returns the index of the last visible child.\n */\nconst useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {\n  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n\n  useLayoutEffect(() => {\n    function updateLastVisibleChildIndex() {\n      // Get array of child nodes from NodeList form\n      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);\n      const { nextIndexOfLastVisibleChild } = childNodesArr\n        // filter out the overflow element\n        .filter(childNode => childNode !== overflowElementRef)\n        // sum the widths to find the last visible element's index\n        .reduce((acc, childNode, index) => {\n          acc.sumWidth += childNode.getBoundingClientRect().width;\n          if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {\n            acc.nextIndexOfLastVisibleChild = index;\n          }\n          return acc;\n        }, {\n          // Include the overflow element's width to begin with. Doing this means\n          // sometimes we'll show a dropdown with one item in it when it would fit,\n          // but allowing this case dramatically simplifies the calculations we need\n          // to do above.\n          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,\n          nextIndexOfLastVisibleChild: -1,\n        });\n\n      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n    }\n\n    if (containerElementRef) {\n      updateLastVisibleChildIndex();\n\n      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());\n      resizeObserver.observe(containerElementRef);\n\n      return () => resizeObserver.disconnect();\n    }\n\n    return undefined;\n  }, [containerElementRef, overflowElementRef]);\n\n  return indexOfLastVisibleChild;\n};\n\nexport default useIndexOfLastVisibleChild;\n"],"mappings":";;;;;;AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAIC,mBAAmB,EAAEC,kBAAkB,EAAK;EAC9E,IAAAC,SAAA,GAA8DJ,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAnEG,uBAAuB,GAAAF,UAAA;IAAEG,0BAA0B,GAAAH,UAAA;EAE1DN,eAAe,CAAC,YAAM;IACpB,SAASU,2BAA2BA,CAAA,EAAG;MACrC;MACA,IAAMC,aAAa,GAAGC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACZ,mBAAmB,CAACa,QAAQ,CAAC;MAC9E,IAAAC,qBAAA,GAAwCN;QACtC;QAAA,CACCO,MAAM,CAAC,UAAAC,SAAS;UAAA,OAAIA,SAAS,KAAKf,kBAAkB;QAAA;QACrD;QAAA,CACCgB,MAAM,CAAC,UAACC,GAAG,EAAEF,SAAS,EAAEG,KAAK,EAAK;UACjCD,GAAG,CAACE,QAAQ,IAAIJ,SAAS,CAACK,qBAAqB,CAAC,CAAC,CAACC,KAAK;UACvD,IAAIJ,GAAG,CAACE,QAAQ,IAAIpB,mBAAmB,CAACqB,qBAAqB,CAAC,CAAC,CAACC,KAAK,EAAE;YACrEJ,GAAG,CAACK,2BAA2B,GAAGJ,KAAK;UACzC;UACA,OAAOD,GAAG;QACZ,CAAC,EAAE;UACD;UACA;UACA;UACA;UACAE,QAAQ,EAAEnB,kBAAkB,GAAGA,kBAAkB,CAACoB,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,CAAC;UACnFC,2BAA2B,EAAE,CAAC;QAChC,CAAC,CAAC;QAjBIA,2BAA2B,GAAAT,qBAAA,CAA3BS,2BAA2B;MAmBnCjB,0BAA0B,CAACiB,2BAA2B,CAAC;IACzD;IAEA,IAAIvB,mBAAmB,EAAE;MACvBO,2BAA2B,CAAC,CAAC;MAE7B,IAAMiB,cAAc,GAAG,IAAIC,cAAc,CAAC;QAAA,OAAMlB,2BAA2B,CAAC,CAAC;MAAA,EAAC;MAC9EiB,cAAc,CAACE,OAAO,CAAC1B,mBAAmB,CAAC;MAE3C,OAAO;QAAA,OAAMwB,cAAc,CAACG,UAAU,CAAC,CAAC;MAAA;IAC1C;IAEA,OAAOC,SAAS;EAClB,CAAC,EAAE,CAAC5B,mBAAmB,EAAEC,kBAAkB,CAAC,CAAC;EAE7C,OAAOI,uBAAuB;AAChC,CAAC;AAED,eAAeN,0BAA0B","ignoreList":[]}
+{"version":3,"file":"useIndexOfLastVisibleChild.js","names":["useLayoutEffect","useState","useIndexOfLastVisibleChild","containerElementRef","overflowElementRef","_useState","_useState2","_slicedToArray","indexOfLastVisibleChild","setIndexOfLastVisibleChild","undefined","updateLastVisibleChildIndex","_overflowElementRef$g","childNodesArr","Array","prototype","slice","call","children","_childNodesArr$filter","filter","childNode","reduce","acc","index","sumWidth","getBoundingClientRect","width","nextIndexOfLastVisibleChild","resizeObserver","ResizeObserver","observe","disconnect"],"sources":["../../src/hooks/useIndexOfLastVisibleChild.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * The hook returns the index of the last visible child.\n *\n * @param containerElementRef - container element\n * @param overflowElementRef - overflow element\n */\nconst useIndexOfLastVisibleChild = (\n  containerElementRef: HTMLElement | null,\n  overflowElementRef: HTMLElement | null,\n): number => {\n  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n\n  useLayoutEffect(() => {\n    if (!containerElementRef) {\n      return undefined;\n    }\n\n    function updateLastVisibleChildIndex() {\n      // Get array of child nodes from NodeList form\n      const childNodesArr = Array.prototype.slice.call(containerElementRef!.children);\n      const { nextIndexOfLastVisibleChild } = childNodesArr\n        // filter out the overflow element\n        .filter(childNode => childNode !== overflowElementRef)\n        // sum the widths to find the last visible element's index\n        .reduce((acc, childNode, index) => {\n          acc.sumWidth += childNode.getBoundingClientRect().width;\n          if (acc.sumWidth <= containerElementRef!.getBoundingClientRect().width) {\n            acc.nextIndexOfLastVisibleChild = index;\n          }\n          return acc;\n        }, {\n          // Include the overflow element's width to begin with. Doing this means\n          // sometimes we'll show a dropdown with one item in it when it would fit,\n          // but allowing this case dramatically simplifies the calculations we need\n          // to do above.\n          sumWidth: overflowElementRef?.getBoundingClientRect().width ?? 0,\n          nextIndexOfLastVisibleChild: -1,\n        });\n\n      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n    }\n\n    updateLastVisibleChildIndex();\n\n    const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());\n    resizeObserver.observe(containerElementRef);\n    return () => resizeObserver.disconnect();\n  }, [containerElementRef, overflowElementRef]);\n\n  return indexOfLastVisibleChild;\n};\n\nexport default useIndexOfLastVisibleChild;\n"],"mappings":";;;;;;AAAA,SAASA,eAAe,EAAEC,QAAQ,QAAQ,OAAO;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAC9BC,mBAAuC,EACvCC,kBAAsC,EAC3B;EACX,IAAAC,SAAA,GAA8DJ,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAnEG,uBAAuB,GAAAF,UAAA;IAAEG,0BAA0B,GAAAH,UAAA;EAE1DN,eAAe,CAAC,YAAM;IACpB,IAAI,CAACG,mBAAmB,EAAE;MACxB,OAAOO,SAAS;IAClB;IAEA,SAASC,2BAA2BA,CAAA,EAAG;MAAA,IAAAC,qBAAA;MACrC;MACA,IAAMC,aAAa,GAAGC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACd,mBAAmB,CAAEe,QAAQ,CAAC;MAC/E,IAAAC,qBAAA,GAAwCN;QACtC;QAAA,CACCO,MAAM,CAAC,UAAAC,SAAS;UAAA,OAAIA,SAAS,KAAKjB,kBAAkB;QAAA;QACrD;QAAA,CACCkB,MAAM,CAAC,UAACC,GAAG,EAAEF,SAAS,EAAEG,KAAK,EAAK;UACjCD,GAAG,CAACE,QAAQ,IAAIJ,SAAS,CAACK,qBAAqB,CAAC,CAAC,CAACC,KAAK;UACvD,IAAIJ,GAAG,CAACE,QAAQ,IAAItB,mBAAmB,CAAEuB,qBAAqB,CAAC,CAAC,CAACC,KAAK,EAAE;YACtEJ,GAAG,CAACK,2BAA2B,GAAGJ,KAAK;UACzC;UACA,OAAOD,GAAG;QACZ,CAAC,EAAE;UACD;UACA;UACA;UACA;UACAE,QAAQ,GAAAb,qBAAA,GAAER,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEsB,qBAAqB,CAAC,CAAC,CAACC,KAAK,cAAAf,qBAAA,cAAAA,qBAAA,GAAI,CAAC;UAChEgB,2BAA2B,EAAE,CAAC;QAChC,CAAC,CAAC;QAjBIA,2BAA2B,GAAAT,qBAAA,CAA3BS,2BAA2B;MAmBnCnB,0BAA0B,CAACmB,2BAA2B,CAAC;IACzD;IAEAjB,2BAA2B,CAAC,CAAC;IAE7B,IAAMkB,cAAc,GAAG,IAAIC,cAAc,CAAC;MAAA,OAAMnB,2BAA2B,CAAC,CAAC;IAAA,EAAC;IAC9EkB,cAAc,CAACE,OAAO,CAAC5B,mBAAmB,CAAC;IAC3C,OAAO;MAAA,OAAM0B,cAAc,CAACG,UAAU,CAAC,CAAC;IAAA;EAC1C,CAAC,EAAE,CAAC7B,mBAAmB,EAAEC,kBAAkB,CAAC,CAAC;EAE7C,OAAOI,uBAAuB;AAChC,CAAC;AAED,eAAeN,0BAA0B","ignoreList":[]}

package/dist/hooks/useIsVisible.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useIsVisible: (defaultIsVisible?: boolean) => [isVisible: boolean, sentinelRef: React.MutableRefObject<HTMLElement | null>];
+export default useIsVisible;

package/dist/hooks/useIsVisible.js

@@ -7,7 +7,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useRef, useState, useEffect } from 'react';
 var useIsVisible = function useIsVisible() {
   var defaultIsVisible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-  var sentinelRef = useRef();
+  var sentinelRef = useRef(null);
   var _useState = useState(defaultIsVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],

package/dist/hooks/useIsVisible.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsVisible.js","names":["useRef","useState","useEffect","useIsVisible","defaultIsVisible","arguments","length","undefined","sentinelRef","_useState","_useState2","_slicedToArray","isVisible","setIsVisible","current","observer","IntersectionObserver","entries","forEach","_ref","isIntersecting","observe","disconnect","e","isReferenceError","ReferenceError"],"sources":["../../src/hooks/useIsVisible.jsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'react';\n\nconst useIsVisible = (defaultIsVisible = true) => {\n  const sentinelRef = useRef();\n  const [isVisible, setIsVisible] = useState(defaultIsVisible);\n\n  useEffect(() => {\n    try {\n      if (sentinelRef.current) {\n        const observer = new IntersectionObserver((entries) => {\n          entries.forEach(({ isIntersecting }) => {\n            setIsVisible(isIntersecting);\n          });\n        }, {});\n        observer.observe(sentinelRef.current);\n        return () => {\n          observer.disconnect();\n        };\n      }\n    } catch (e) {\n      const isReferenceError = e instanceof ReferenceError;\n      if (!isReferenceError) {\n        throw e;\n      }\n      // Do nothing if an intersection observer can't be created.\n    }\n    return () => {};\n  }, []);\n\n  return [isVisible, sentinelRef];\n};\n\nexport default useIsVisible;\n"],"mappings":";;;;;;AAAA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAEnD,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAgC;EAAA,IAA5BC,gBAAgB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAC3C,IAAMG,WAAW,GAAGR,MAAM,CAAC,CAAC;EAC5B,IAAAS,SAAA,GAAkCR,QAAQ,CAACG,gBAAgB,CAAC;IAAAM,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAArDG,SAAS,GAAAF,UAAA;IAAEG,YAAY,GAAAH,UAAA;EAE9BR,SAAS,CAAC,YAAM;IACd,IAAI;MACF,IAAIM,WAAW,CAACM,OAAO,EAAE;QACvB,IAAMC,QAAQ,GAAG,IAAIC,oBAAoB,CAAC,UAACC,OAAO,EAAK;UACrDA,OAAO,CAACC,OAAO,CAAC,UAAAC,IAAA,EAAwB;YAAA,IAArBC,cAAc,GAAAD,IAAA,CAAdC,cAAc;YAC/BP,YAAY,CAACO,cAAc,CAAC;UAC9B,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,CAAC,CAAC;QACNL,QAAQ,CAACM,OAAO,CAACb,WAAW,CAACM,OAAO,CAAC;QACrC,OAAO,YAAM;UACXC,QAAQ,CAACO,UAAU,CAAC,CAAC;QACvB,CAAC;MACH;IACF,CAAC,CAAC,OAAOC,CAAC,EAAE;MACV,IAAMC,gBAAgB,GAAGD,CAAC,YAAYE,cAAc;MACpD,IAAI,CAACD,gBAAgB,EAAE;QACrB,MAAMD,CAAC;MACT;MACA;IACF;IACA,OAAO,YAAM,CAAC,CAAC;EACjB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,CAACX,SAAS,EAAEJ,WAAW,CAAC;AACjC,CAAC;AAED,eAAeL,YAAY","ignoreList":[]}
+{"version":3,"file":"useIsVisible.js","names":["useRef","useState","useEffect","useIsVisible","defaultIsVisible","arguments","length","undefined","sentinelRef","_useState","_useState2","_slicedToArray","isVisible","setIsVisible","current","observer","IntersectionObserver","entries","forEach","_ref","isIntersecting","observe","disconnect","e","isReferenceError","ReferenceError"],"sources":["../../src/hooks/useIsVisible.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\n\nconst useIsVisible = (defaultIsVisible = true): [\n  isVisible: boolean,\n  sentinelRef: React.MutableRefObject<HTMLElement | null>,\n] => {\n  const sentinelRef = useRef<HTMLElement | null>(null);\n  const [isVisible, setIsVisible] = useState(defaultIsVisible);\n\n  useEffect(() => {\n    try {\n      if (sentinelRef.current) {\n        const observer = new IntersectionObserver((entries) => {\n          entries.forEach(({ isIntersecting }) => {\n            setIsVisible(isIntersecting);\n          });\n        }, {});\n        observer.observe(sentinelRef.current);\n        return () => {\n          observer.disconnect();\n        };\n      }\n    } catch (e) {\n      const isReferenceError = e instanceof ReferenceError;\n      if (!isReferenceError) {\n        throw e;\n      }\n      // Do nothing if an intersection observer can't be created.\n    }\n    return () => {};\n  }, []);\n\n  return [isVisible, sentinelRef];\n};\n\nexport default useIsVisible;\n"],"mappings":";;;;;;AAAA,SAAgBA,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAE1D,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAGb;EAAA,IAHiBC,gBAAgB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAI3C,IAAMG,WAAW,GAAGR,MAAM,CAAqB,IAAI,CAAC;EACpD,IAAAS,SAAA,GAAkCR,QAAQ,CAACG,gBAAgB,CAAC;IAAAM,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAArDG,SAAS,GAAAF,UAAA;IAAEG,YAAY,GAAAH,UAAA;EAE9BR,SAAS,CAAC,YAAM;IACd,IAAI;MACF,IAAIM,WAAW,CAACM,OAAO,EAAE;QACvB,IAAMC,QAAQ,GAAG,IAAIC,oBAAoB,CAAC,UAACC,OAAO,EAAK;UACrDA,OAAO,CAACC,OAAO,CAAC,UAAAC,IAAA,EAAwB;YAAA,IAArBC,cAAc,GAAAD,IAAA,CAAdC,cAAc;YAC/BP,YAAY,CAACO,cAAc,CAAC;UAC9B,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,CAAC,CAAC;QACNL,QAAQ,CAACM,OAAO,CAACb,WAAW,CAACM,OAAO,CAAC;QACrC,OAAO,YAAM;UACXC,QAAQ,CAACO,UAAU,CAAC,CAAC;QACvB,CAAC;MACH;IACF,CAAC,CAAC,OAAOC,CAAC,EAAE;MACV,IAAMC,gBAAgB,GAAGD,CAAC,YAAYE,cAAc;MACpD,IAAI,CAACD,gBAAgB,EAAE;QACrB,MAAMD,CAAC;MACT;MACA;IACF;IACA,OAAO,YAAM,CAAC,CAAC;EACjB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,CAACX,SAAS,EAAEJ,WAAW,CAAC;AACjC,CAAC;AAED,eAAeL,YAAY","ignoreList":[]}

package/dist/hooks/useToggle.d.ts

@@ -0,0 +1,12 @@
+export type Toggler = [
+    isOn: boolean,
+    setOn: () => void,
+    setOff: () => void,
+    toggle: () => void
+];
+export interface ToggleHandlers {
+    handleToggleOn?: () => void;
+    handleToggleOff?: () => void;
+    handleToggle?: (newStatus: boolean) => void;
+}
+export default function useToggle(defaultIsOn?: boolean, handlers?: ToggleHandlers): Toggler;

package/dist/hooks/useToggle.js

@@ -5,36 +5,25 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useCallback } from 'react';
-export default function useToggle(defaultIsOn) {
+export default function useToggle() {
+  var defaultIsOn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var handlers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var handleToggleOn = handlers.handleToggleOn,
     handleToggleOff = handlers.handleToggleOff,
     handleToggle = handlers.handleToggle;
-  var _useState = useState(defaultIsOn || false),
+  var _useState = useState(defaultIsOn),
     _useState2 = _slicedToArray(_useState, 2),
     isOn = _useState2[0],
     setIsOn = _useState2[1];
   var setOn = useCallback(function () {
     setIsOn(true);
-    // istanbul ignore else
-    if (handleToggleOn) {
-      handleToggleOn();
-    }
-    // istanbul ignore else
-    if (handleToggle) {
-      handleToggle(true);
-    }
+    handleToggleOn === null || handleToggleOn === void 0 ? void 0 : handleToggleOn();
+    handleToggle === null || handleToggle === void 0 ? void 0 : handleToggle(true);
   }, [handleToggleOn, handleToggle]);
   var setOff = useCallback(function () {
     setIsOn(false);
-    // istanbul ignore else
-    if (handleToggleOff) {
-      handleToggleOff();
-    }
-    // istanbul ignore else
-    if (handleToggle) {
-      handleToggle(false);
-    }
+    handleToggleOff === null || handleToggleOff === void 0 ? void 0 : handleToggleOff();
+    handleToggle === null || handleToggle === void 0 ? void 0 : handleToggle(false);
   }, [handleToggleOff, handleToggle]);
   var toggle = useCallback(function () {
     var doToggle = isOn ? setOff : setOn;

package/dist/hooks/useToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggle.js","names":["useState","useCallback","useToggle","defaultIsOn","handlers","arguments","length","undefined","handleToggleOn","handleToggleOff","handleToggle","_useState","_useState2","_slicedToArray","isOn","setIsOn","setOn","setOff","toggle","doToggle"],"sources":["../../src/hooks/useToggle.jsx"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nexport default function useToggle(defaultIsOn, handlers = {}) {\n  const { handleToggleOn, handleToggleOff, handleToggle } = handlers;\n  const [isOn, setIsOn] = useState(defaultIsOn || false);\n\n  const setOn = useCallback(() => {\n    setIsOn(true);\n    // istanbul ignore else\n    if (handleToggleOn) {\n      handleToggleOn();\n    }\n    // istanbul ignore else\n    if (handleToggle) {\n      handleToggle(true);\n    }\n  }, [handleToggleOn, handleToggle]);\n\n  const setOff = useCallback(() => {\n    setIsOn(false);\n    // istanbul ignore else\n    if (handleToggleOff) {\n      handleToggleOff();\n    }\n    // istanbul ignore else\n    if (handleToggle) {\n      handleToggle(false);\n    }\n  }, [handleToggleOff, handleToggle]);\n\n  const toggle = useCallback(() => {\n    const doToggle = isOn ? setOff : setOn;\n    doToggle();\n  }, [isOn, setOn, setOff]);\n\n  return [isOn, setOn, setOff, toggle];\n}\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAE7C,eAAe,SAASC,SAASA,CAACC,WAAW,EAAiB;EAAA,IAAfC,QAAQ,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAC1D,IAAQG,cAAc,GAAoCJ,QAAQ,CAA1DI,cAAc;IAAEC,eAAe,GAAmBL,QAAQ,CAA1CK,eAAe;IAAEC,YAAY,GAAKN,QAAQ,CAAzBM,YAAY;EACrD,IAAAC,SAAA,GAAwBX,QAAQ,CAACG,WAAW,IAAI,KAAK,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA/CG,IAAI,GAAAF,UAAA;IAAEG,OAAO,GAAAH,UAAA;EAEpB,IAAMI,KAAK,GAAGf,WAAW,CAAC,YAAM;IAC9Bc,OAAO,CAAC,IAAI,CAAC;IACb;IACA,IAAIP,cAAc,EAAE;MAClBA,cAAc,CAAC,CAAC;IAClB;IACA;IACA,IAAIE,YAAY,EAAE;MAChBA,YAAY,CAAC,IAAI,CAAC;IACpB;EACF,CAAC,EAAE,CAACF,cAAc,EAAEE,YAAY,CAAC,CAAC;EAElC,IAAMO,MAAM,GAAGhB,WAAW,CAAC,YAAM;IAC/Bc,OAAO,CAAC,KAAK,CAAC;IACd;IACA,IAAIN,eAAe,EAAE;MACnBA,eAAe,CAAC,CAAC;IACnB;IACA;IACA,IAAIC,YAAY,EAAE;MAChBA,YAAY,CAAC,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACD,eAAe,EAAEC,YAAY,CAAC,CAAC;EAEnC,IAAMQ,MAAM,GAAGjB,WAAW,CAAC,YAAM;IAC/B,IAAMkB,QAAQ,GAAGL,IAAI,GAAGG,MAAM,GAAGD,KAAK;IACtCG,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,CAACL,IAAI,EAAEE,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEzB,OAAO,CAACH,IAAI,EAAEE,KAAK,EAAEC,MAAM,EAAEC,MAAM,CAAC;AACtC","ignoreList":[]}
+{"version":3,"file":"useToggle.js","names":["useState","useCallback","useToggle","defaultIsOn","arguments","length","undefined","handlers","handleToggleOn","handleToggleOff","handleToggle","_useState","_useState2","_slicedToArray","isOn","setIsOn","setOn","setOff","toggle","doToggle"],"sources":["../../src/hooks/useToggle.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nexport type Toggler = [\n  isOn: boolean,\n  setOn: () => void,\n  setOff: () => void,\n  toggle: () => void,\n];\n\nexport interface ToggleHandlers {\n  handleToggleOn?: () => void;\n  handleToggleOff?: () => void;\n  handleToggle?: (newStatus: boolean) => void;\n}\n\nexport default function useToggle(defaultIsOn = false, handlers: ToggleHandlers = {}): Toggler {\n  const { handleToggleOn, handleToggleOff, handleToggle } = handlers;\n  const [isOn, setIsOn] = useState(defaultIsOn);\n\n  const setOn = useCallback(() => {\n    setIsOn(true);\n    handleToggleOn?.();\n    handleToggle?.(true);\n  }, [handleToggleOn, handleToggle]);\n\n  const setOff = useCallback(() => {\n    setIsOn(false);\n    handleToggleOff?.();\n    handleToggle?.(false);\n  }, [handleToggleOff, handleToggle]);\n\n  const toggle = useCallback(() => {\n    const doToggle = isOn ? setOff : setOn;\n    doToggle();\n  }, [isOn, setOn, setOff]);\n\n  return [isOn, setOn, setOff, toggle];\n}\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAe7C,eAAe,SAASC,SAASA,CAAA,EAA8D;EAAA,IAA7DC,WAAW,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,IAAEG,QAAwB,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAClF,IAAQI,cAAc,GAAoCD,QAAQ,CAA1DC,cAAc;IAAEC,eAAe,GAAmBF,QAAQ,CAA1CE,eAAe;IAAEC,YAAY,GAAKH,QAAQ,CAAzBG,YAAY;EACrD,IAAAC,SAAA,GAAwBX,QAAQ,CAACG,WAAW,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAtCG,IAAI,GAAAF,UAAA;IAAEG,OAAO,GAAAH,UAAA;EAEpB,IAAMI,KAAK,GAAGf,WAAW,CAAC,YAAM;IAC9Bc,OAAO,CAAC,IAAI,CAAC;IACbP,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAC;IAClBE,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,IAAI,CAAC;EACtB,CAAC,EAAE,CAACF,cAAc,EAAEE,YAAY,CAAC,CAAC;EAElC,IAAMO,MAAM,GAAGhB,WAAW,CAAC,YAAM;IAC/Bc,OAAO,CAAC,KAAK,CAAC;IACdN,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAG,CAAC;IACnBC,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,KAAK,CAAC;EACvB,CAAC,EAAE,CAACD,eAAe,EAAEC,YAAY,CAAC,CAAC;EAEnC,IAAMQ,MAAM,GAAGjB,WAAW,CAAC,YAAM;IAC/B,IAAMkB,QAAQ,GAAGL,IAAI,GAAGG,MAAM,GAAGD,KAAK;IACtCG,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,CAACL,IAAI,EAAEE,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEzB,OAAO,CAACH,IAAI,EAAEE,KAAK,EAAEC,MAAM,EAAEC,MAAM,CAAC;AACtC","ignoreList":[]}

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,6 @@
+export interface WindowSizeData {
+    width: number | undefined;
+    height: number | undefined;
+}
+declare function useWindowSize(): WindowSizeData;
+export default useWindowSize;

package/dist/hooks/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","names":["useState","useLayoutEffect","useWindowSize","_useState","width","undefined","height","_useState2","_slicedToArray","windowSize","setWindowSize","handleResize","global","innerWidth","innerHeight","addEventListener","removeEventListener"],"sources":["../../src/hooks/useWindowSize.jsx"],"sourcesContent":["import { useState, useLayoutEffect } from 'react';\n\nfunction useWindowSize() {\n  // Initialize state with undefined width/height so server and client renders match\n  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/\n  const [windowSize, setWindowSize] = useState({\n    width: undefined,\n    height: undefined,\n  });\n\n  useLayoutEffect(() => {\n    // Handler to call on window resize\n    function handleResize() {\n      // Set window width/height to state\n      setWindowSize({\n        width: global.innerWidth,\n        height: global.innerHeight,\n      });\n    }\n\n    // Add event listener\n    global.addEventListener('resize', handleResize);\n\n    // Call handler right away so state gets updated with initial window size\n    handleResize();\n\n    // Remove event listener on cleanup\n    return () => global.removeEventListener('resize', handleResize);\n  }, []); // Empty array ensures that effect is only run on mount\n\n  return windowSize;\n}\n\nexport default useWindowSize;\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,OAAO;AAEjD,SAASC,aAAaA,CAAA,EAAG;EACvB;EACA;EACA,IAAAC,SAAA,GAAoCH,QAAQ,CAAC;MAC3CI,KAAK,EAAEC,SAAS;MAChBC,MAAM,EAAED;IACV,CAAC,CAAC;IAAAE,UAAA,GAAAC,cAAA,CAAAL,SAAA;IAHKM,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAKhCN,eAAe,CAAC,YAAM;IACpB;IACA,SAASU,YAAYA,CAAA,EAAG;MACtB;MACAD,aAAa,CAAC;QACZN,KAAK,EAAEQ,MAAM,CAACC,UAAU;QACxBP,MAAM,EAAEM,MAAM,CAACE;MACjB,CAAC,CAAC;IACJ;;IAEA;IACAF,MAAM,CAACG,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;;IAE/C;IACAA,YAAY,CAAC,CAAC;;IAEd;IACA,OAAO;MAAA,OAAMC,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;;EAER,OAAOF,UAAU;AACnB;AAEA,eAAeP,aAAa","ignoreList":[]}
+{"version":3,"file":"useWindowSize.js","names":["useState","useLayoutEffect","useWindowSize","_useState","width","undefined","height","_useState2","_slicedToArray","windowSize","setWindowSize","handleResize","global","innerWidth","innerHeight","addEventListener","removeEventListener"],"sources":["../../src/hooks/useWindowSize.tsx"],"sourcesContent":["import { useState, useLayoutEffect } from 'react';\n\nexport interface WindowSizeData {\n  width: number | undefined;\n  height: number | undefined;\n}\n\nfunction useWindowSize(): WindowSizeData {\n  // Initialize state with undefined width/height so server and client renders match\n  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/\n  const [windowSize, setWindowSize] = useState<WindowSizeData>({\n    width: undefined,\n    height: undefined,\n  });\n\n  useLayoutEffect(() => {\n    // Handler to call on window resize\n    function handleResize() {\n      // Set window width/height to state\n      setWindowSize({\n        width: global.innerWidth,\n        height: global.innerHeight,\n      });\n    }\n\n    // Add event listener\n    global.addEventListener('resize', handleResize);\n\n    // Call handler right away so state gets updated with initial window size\n    handleResize();\n\n    // Remove event listener on cleanup\n    return () => global.removeEventListener('resize', handleResize);\n  }, []); // Empty array ensures that effect is only run on mount\n\n  return windowSize;\n}\n\nexport default useWindowSize;\n"],"mappings":";;;;;;AAAA,SAASA,QAAQ,EAAEC,eAAe,QAAQ,OAAO;AAOjD,SAASC,aAAaA,CAAA,EAAmB;EACvC;EACA;EACA,IAAAC,SAAA,GAAoCH,QAAQ,CAAiB;MAC3DI,KAAK,EAAEC,SAAS;MAChBC,MAAM,EAAED;IACV,CAAC,CAAC;IAAAE,UAAA,GAAAC,cAAA,CAAAL,SAAA;IAHKM,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAKhCN,eAAe,CAAC,YAAM;IACpB;IACA,SAASU,YAAYA,CAAA,EAAG;MACtB;MACAD,aAAa,CAAC;QACZN,KAAK,EAAEQ,MAAM,CAACC,UAAU;QACxBP,MAAM,EAAEM,MAAM,CAACE;MACjB,CAAC,CAAC;IACJ;;IAEA;IACAF,MAAM,CAACG,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;;IAE/C;IACAA,YAAY,CAAC,CAAC;;IAEd;IACA,OAAO;MAAA,OAAMC,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;;EAER,OAAOF,UAAU;AACnB;AAEA,eAAeP,aAAa","ignoreList":[]}

package/dist/index.d.ts

@@ -18,6 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
+export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSize';
+export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggle';
+export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigation';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
+export { default as useIsVisible } from './hooks/useIsVisible';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -187,11 +192,6 @@ export const Sticky: any; // from './Sticky';
 export const SelectableBox: any; // from './SelectableBox';
 export const breakpoints: any; // from './utils/breakpoints';
 export const Variant: any; // from './utils/constants';
-export const useWindowSize: any; // from './hooks/useWindowSize';
-export const useToggle: any; // from './hooks/useToggle';
-export const useArrowKeyNavigation: any; // from './hooks/useArrowKeyNavigation';
-export const useIndexOfLastVisibleChild: any; // from './hooks/useIndexOfLastVisibleChild';
-export const useIsVisible: any; // from './hooks/useIsVisible';
 export const
   OverflowScrollContext: any,
   OverflowScroll: any,

package/dist/index.js

@@ -18,6 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
+export { default as useWindowSize } from './hooks/useWindowSize';
+export { default as useToggle } from './hooks/useToggle';
+export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
+export { default as useIsVisible } from './hooks/useIsVisible';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -159,11 +164,6 @@ export { default as Sticky } from './Sticky';
 export { default as SelectableBox } from './SelectableBox';
 export { default as breakpoints } from './utils/breakpoints';
 export { default as Variant } from './utils/constants';
-export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useToggle } from './hooks/useToggle';
-export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
-export { default as useIsVisible } from './hooks/useIsVisible';
 export {
   OverflowScrollContext,
   OverflowScroll,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.1.1",
+  "version": "23.2.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/hooks/tests/{useIndexOfLastVisibleChild.test.jsx → useIndexOfLastVisibleChild.test.tsx}

@@ -12,8 +12,8 @@ window.ResizeObserver = window.ResizeObserver
   }));
 
 function TestComponent() {
-  const [containerElementRef, setContainerElementRef] = React.useState(null);
-  const overflowElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState<HTMLDivElement | null>(null);
+  const overflowElementRef = React.useRef<HTMLDivElement>(null);
   const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef, overflowElementRef.current);
 
   return (

package/src/hooks/tests/{useToggle.test.jsx → useToggle.test.tsx}

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { useToggle } from '../..';
+import { ToggleHandlers } from '../useToggle';
 
 const TOGGLE_IS_ON = 'on';
 const TOGGLE_IS_OFF = 'off';
@@ -19,7 +20,7 @@ const resetHandlerMocks = () => {
 };
 
 // eslint-disable-next-line react/prop-types
-function FakeComponent({ defaultIsOn, handlers }) {
+function FakeComponent({ defaultIsOn, handlers }: { defaultIsOn: boolean, handlers: ToggleHandlers }) {
   const [isOn, setOn, setOff, toggle] = useToggle(defaultIsOn, handlers);
 
   return (

package/src/hooks/{useArrowKeyNavigation.jsx → useArrowKeyNavigation.tsx}

@@ -1,16 +1,24 @@
 import { useRef, useEffect } from 'react';
 
-/**
- * A React hook to enable arrow key navigation on a component.
- */
+interface HandleEnterArgs {
+  event: KeyboardEvent;
+  currentIndex: number;
+  activeElement: HTMLElement;
+}
 
-function handleEnter({ event, currentIndex, activeElement }) {
+function handleEnter({ event, currentIndex, activeElement }: HandleEnterArgs) {
   if (currentIndex === -1) { return; }
   activeElement.click();
   event.preventDefault();
 }
 
-function handleArrowKey({ event, currentIndex, availableElements }) {
+interface HandleArrowKeyArgs {
+  event: KeyboardEvent;
+  currentIndex: number;
+  availableElements: NodeListOf<HTMLElement>;
+}
+
+function handleArrowKey({ event, currentIndex, availableElements }: HandleArrowKeyArgs) {
   // If the focus isn't in the container, focus on the first thing
   if (currentIndex === -1) { availableElements[0].focus(); }
 
@@ -36,6 +44,13 @@ function handleArrowKey({ event, currentIndex, availableElements }) {
   event.preventDefault();
 }
 
+interface HandleEventsArgs {
+  event: KeyboardEvent;
+  ignoredKeys?: string[];
+  parentNode: HTMLElement | undefined;
+  selectors?: string;
+}
+
 /**
  * Implement arrow key navigation for the given parentNode
  */
@@ -44,7 +59,7 @@ function handleEvents({
   ignoredKeys = [],
   parentNode,
   selectors = 'a,button,input',
-}) {
+}: HandleEventsArgs) {
   if (!parentNode) { return; }
 
   const { key } = event;
@@ -60,7 +75,7 @@ function handleEvents({
   if (!parentNode.contains(activeElement)) { return; }
 
   // Get the list of elements we're allowed to scroll through
-  const availableElements = parentNode.querySelectorAll(selectors);
+  const availableElements = parentNode.querySelectorAll<HTMLElement>(selectors);
 
   // No elements are available to loop through.
   if (!availableElements.length) { return; }
@@ -70,18 +85,27 @@ function handleEvents({
     (availableElement) => availableElement === activeElement,
   );
 
-  if (key === 'Enter') {
-    handleEnter({ event, currentIndex, activeElement });
+  if (key === 'Enter' && activeElement) {
+    handleEnter({ event, currentIndex, activeElement: activeElement as HTMLElement });
   }
   handleArrowKey({ event, currentIndex, availableElements });
 }
 
-export default function useArrowKeyNavigation(props) {
-  const { selectors, ignoredKeys } = props || {};
-  const parentNode = useRef();
+export interface ArrowKeyNavProps {
+  /** e.g. 'a,button,input' */
+  selectors?: string;
+  ignoredKeys?: string[];
+}
+
+/**
+ * A React hook to enable arrow key navigation on a component.
+ */
+export default function useArrowKeyNavigation(props: ArrowKeyNavProps = {}) {
+  const { selectors, ignoredKeys } = props;
+  const parentNode = useRef<HTMLElement>();
 
   useEffect(() => {
-    const eventHandler = (event) => {
+    const eventHandler = (event: KeyboardEvent) => {
       handleEvents({
         event, ignoredKeys, parentNode: parentNode.current, selectors,
       });

package/src/hooks/{useIndexOfLastVisibleChild.jsx → useIndexOfLastVisibleChild.tsx}

@@ -5,25 +5,32 @@ import { useLayoutEffect, useState } from 'react';
  * that fits within its bounding rectangle. This is done by summing the widths
  * of the children until they exceed the width of the container.
  *
- * @param {Element} containerElementRef - container element
- * @param {Element} overflowElementRef - overflow element
- *
  * The hook returns the index of the last visible child.
+ *
+ * @param containerElementRef - container element
+ * @param overflowElementRef - overflow element
  */
-const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {
+const useIndexOfLastVisibleChild = (
+  containerElementRef: HTMLElement | null,
+  overflowElementRef: HTMLElement | null,
+): number => {
   const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
 
   useLayoutEffect(() => {
+    if (!containerElementRef) {
+      return undefined;
+    }
+
     function updateLastVisibleChildIndex() {
       // Get array of child nodes from NodeList form
-      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
+      const childNodesArr = Array.prototype.slice.call(containerElementRef!.children);
       const { nextIndexOfLastVisibleChild } = childNodesArr
         // filter out the overflow element
         .filter(childNode => childNode !== overflowElementRef)
         // sum the widths to find the last visible element's index
         .reduce((acc, childNode, index) => {
           acc.sumWidth += childNode.getBoundingClientRect().width;
-          if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
+          if (acc.sumWidth <= containerElementRef!.getBoundingClientRect().width) {
             acc.nextIndexOfLastVisibleChild = index;
           }
           return acc;
@@ -32,23 +39,18 @@ const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) =>
           // sometimes we'll show a dropdown with one item in it when it would fit,
           // but allowing this case dramatically simplifies the calculations we need
           // to do above.
-          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+          sumWidth: overflowElementRef?.getBoundingClientRect().width ?? 0,
           nextIndexOfLastVisibleChild: -1,
         });
 
       setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
     }
 
-    if (containerElementRef) {
-      updateLastVisibleChildIndex();
-
-      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
-      resizeObserver.observe(containerElementRef);
-
-      return () => resizeObserver.disconnect();
-    }
+    updateLastVisibleChildIndex();
 
-    return undefined;
+    const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
+    resizeObserver.observe(containerElementRef);
+    return () => resizeObserver.disconnect();
   }, [containerElementRef, overflowElementRef]);
 
   return indexOfLastVisibleChild;

package/src/hooks/{useIsVisible.jsx → useIsVisible.tsx}

@@ -1,7 +1,10 @@
-import { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
-const useIsVisible = (defaultIsVisible = true) => {
-  const sentinelRef = useRef();
+const useIsVisible = (defaultIsVisible = true): [
+  isVisible: boolean,
+  sentinelRef: React.MutableRefObject<HTMLElement | null>,
+] => {
+  const sentinelRef = useRef<HTMLElement | null>(null);
   const [isVisible, setIsVisible] = useState(defaultIsVisible);
 
   useEffect(() => {

package/src/hooks/useToggle.tsx

@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react';
+
+export type Toggler = [
+  isOn: boolean,
+  setOn: () => void,
+  setOff: () => void,
+  toggle: () => void,
+];
+
+export interface ToggleHandlers {
+  handleToggleOn?: () => void;
+  handleToggleOff?: () => void;
+  handleToggle?: (newStatus: boolean) => void;
+}
+
+export default function useToggle(defaultIsOn = false, handlers: ToggleHandlers = {}): Toggler {
+  const { handleToggleOn, handleToggleOff, handleToggle } = handlers;
+  const [isOn, setIsOn] = useState(defaultIsOn);
+
+  const setOn = useCallback(() => {
+    setIsOn(true);
+    handleToggleOn?.();
+    handleToggle?.(true);
+  }, [handleToggleOn, handleToggle]);
+
+  const setOff = useCallback(() => {
+    setIsOn(false);
+    handleToggleOff?.();
+    handleToggle?.(false);
+  }, [handleToggleOff, handleToggle]);
+
+  const toggle = useCallback(() => {
+    const doToggle = isOn ? setOff : setOn;
+    doToggle();
+  }, [isOn, setOn, setOff]);
+
+  return [isOn, setOn, setOff, toggle];
+}

package/src/hooks/{useWindowSize.jsx → useWindowSize.tsx}

@@ -1,9 +1,14 @@
 import { useState, useLayoutEffect } from 'react';
 
-function useWindowSize() {
+export interface WindowSizeData {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+function useWindowSize(): WindowSizeData {
   // Initialize state with undefined width/height so server and client renders match
   // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-  const [windowSize, setWindowSize] = useState({
+  const [windowSize, setWindowSize] = useState<WindowSizeData>({
     width: undefined,
     height: undefined,
   });

package/src/index.d.ts

@@ -18,6 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
+export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSize';
+export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggle';
+export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigation';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
+export { default as useIsVisible } from './hooks/useIsVisible';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -187,11 +192,6 @@ export const Sticky: any; // from './Sticky';
 export const SelectableBox: any; // from './SelectableBox';
 export const breakpoints: any; // from './utils/breakpoints';
 export const Variant: any; // from './utils/constants';
-export const useWindowSize: any; // from './hooks/useWindowSize';
-export const useToggle: any; // from './hooks/useToggle';
-export const useArrowKeyNavigation: any; // from './hooks/useArrowKeyNavigation';
-export const useIndexOfLastVisibleChild: any; // from './hooks/useIndexOfLastVisibleChild';
-export const useIsVisible: any; // from './hooks/useIsVisible';
 export const
   OverflowScrollContext: any,
   OverflowScroll: any,

package/src/index.js

@@ -18,6 +18,11 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
+export { default as useWindowSize } from './hooks/useWindowSize';
+export { default as useToggle } from './hooks/useToggle';
+export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
+export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
+export { default as useIsVisible } from './hooks/useIsVisible';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -159,11 +164,6 @@ export { default as Sticky } from './Sticky';
 export { default as SelectableBox } from './SelectableBox';
 export { default as breakpoints } from './utils/breakpoints';
 export { default as Variant } from './utils/constants';
-export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useToggle } from './hooks/useToggle';
-export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
-export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
-export { default as useIsVisible } from './hooks/useIsVisible';
 export {
   OverflowScrollContext,
   OverflowScroll,

package/src/hooks/useToggle.jsx

@@ -1,37 +0,0 @@
-import { useState, useCallback } from 'react';
-
-export default function useToggle(defaultIsOn, handlers = {}) {
-  const { handleToggleOn, handleToggleOff, handleToggle } = handlers;
-  const [isOn, setIsOn] = useState(defaultIsOn || false);
-
-  const setOn = useCallback(() => {
-    setIsOn(true);
-    // istanbul ignore else
-    if (handleToggleOn) {
-      handleToggleOn();
-    }
-    // istanbul ignore else
-    if (handleToggle) {
-      handleToggle(true);
-    }
-  }, [handleToggleOn, handleToggle]);
-
-  const setOff = useCallback(() => {
-    setIsOn(false);
-    // istanbul ignore else
-    if (handleToggleOff) {
-      handleToggleOff();
-    }
-    // istanbul ignore else
-    if (handleToggle) {
-      handleToggle(false);
-    }
-  }, [handleToggleOff, handleToggle]);
-
-  const toggle = useCallback(() => {
-    const doToggle = isOn ? setOff : setOn;
-    doToggle();
-  }, [isOn, setOn, setOff]);
-
-  return [isOn, setOn, setOff, toggle];
-}