@watermarkinsights/ripple 3.8.0-3 → 3.8.0-4

package/dist/collection/global/functions.js

@@ -1,449 +1,468 @@
-import * as lang from "../lang/lang";
-import { createIntl, createIntlCache } from "@formatjs/intl";
-const DEFAULT_LANGUAGE = "en";
-function getBrowserLang() {
-  const langAttr = document.documentElement.getAttribute("lang");
-  if (!!langAttr) {
-    return langAttr;
-  }
-  else if (window.navigator && window.navigator.language) {
-    const lang = window.navigator.languages ? window.navigator.languages[0] : window.navigator.language;
-    return lang.slice(0, 2);
-  }
-  else {
-    return DEFAULT_LANGUAGE;
-  }
-}
-// prevents memory leak
-const cache = createIntlCache();
-const locale = getBrowserLang();
-export const intl = createIntl({
-  locale: locale,
-  defaultLocale: "en",
-  messages: lang[locale] || lang.en,
-}, cache);
-export function generateId() {
-  return "wmcl-" + Math.random().toString(36).substr(2, 10);
-}
-export function debounce(fn, wait) {
-  let timeout;
-  return function () {
-    const context = this;
-    const functionCall = () => fn.apply(context, arguments);
-    clearTimeout(timeout);
-    timeout = setTimeout(functionCall, wait);
-  };
-}
-export function getTextDir() {
-  const dir = document.querySelector("html").getAttribute("dir");
-  return dir ? dir.toLowerCase() : "";
-}
-export function getPosition(el) {
-  const coords = el.getBoundingClientRect();
-  let x = coords.x;
-  let y = coords.y;
-  // Edge doesn't have x and y
-  if (!x) {
-    if (getTextDir() === "rtl") {
-      x = coords.right;
-    }
-    else {
-      x = coords.left;
-    }
-    y = coords.top;
-  }
-  return { x, y };
-}
-export function findParentWithScrollbar(el) {
-  while (!!el) {
-    if (el.scrollHeight > el.clientHeight && ["scroll", "auto"].includes(window.getComputedStyle(el).overflowY)) {
-      return el;
-    }
-    el = el.parentElement;
-  }
-}
-export function findParentWithHiddenOverflow(el) {
-  while (!!el) {
-    if (window.getComputedStyle(el).overflowY !== "visible") {
-      return el;
-    }
-    el = el.parentElement;
-  }
-}
-export function getClosableElementMeasurements(fixedEl, closableEl) {
-  const parent = findParentWithHiddenOverflow(fixedEl);
-  // if parent is not found, measurements are checked against the viewport
-  return {
-    closableElHeight: closableEl.clientHeight,
-    closableElWidth: closableEl.clientWidth,
-    // NB boundingClientRect.bottom is space from top of viewport to bottom of el
-    // to get space below the el -> height of viewport minus boundingClientRect.bottom
-    spaceAbove: parent
-      ? fixedEl.getBoundingClientRect().top - parent.getBoundingClientRect().top
-      : fixedEl.getBoundingClientRect().top,
-    // NB boundingClientRect.bottom is space from top of viewport to bottom of el
-    // to get space below the el -> height of viewport minus boundingClientRect.bottom
-    spaceBelow: parent
-      ? parent.getBoundingClientRect().bottom - fixedEl.getBoundingClientRect().bottom
-      : document.documentElement.clientHeight - fixedEl.getBoundingClientRect().bottom,
-    spaceLeft: parent
-      ? fixedEl.getBoundingClientRect().left - parent.getBoundingClientRect().left
-      : fixedEl.getBoundingClientRect().left,
-    spaceRight: parent
-      ? parent.getBoundingClientRect().right - fixedEl.getBoundingClientRect().right
-      : document.documentElement.clientWidth - fixedEl.getBoundingClientRect().right,
-  };
-}
-export function shouldOpenUp(fixedEl, //the element visible on the page when the component is closed
-closableEl, //the dropdown/popup/etc that becomes visible when the component is open
-offsetAbove = 0, // if closableEl covers a part of fixedEl, that part should be offset
-offsetBelow = 0 // if closableEl covers a part of fixedEl, that part should be offset
-) {
-  const { closableElHeight, spaceAbove, spaceBelow } = getClosableElementMeasurements(fixedEl, closableEl);
-  //we want to open up only if there's not enough space below AND there is enough space above
-  const openUp = closableElHeight > spaceBelow + offsetBelow && closableElHeight <= spaceAbove + offsetAbove;
-  return openUp;
-}
-export function shouldOpenDown(fixedEl, //the element visible on the page when the component is closed
-closableEl, //the dropdown/popup/etc that becomes visible when the component is open
-offsetAbove = 0, // if closableEl covers a part of fixedEl, that part should be offset
-offsetBelow = 0 // if closableEl covers a part of fixedEl, that part should be offset
-) {
-  const { closableElHeight, spaceAbove, spaceBelow } = getClosableElementMeasurements(fixedEl, closableEl);
-  //we want to open up only if there's not enough space below AND there is enough space above
-  const openDown = closableElHeight > spaceAbove + offsetAbove && closableElHeight <= spaceBelow + offsetBelow;
-  return openDown;
-}
-export function shouldShiftRight(fixedEl, closableEl) {
-  const { closableElWidth, spaceLeft, spaceRight } = getClosableElementMeasurements(fixedEl, closableEl);
-  const needsSpaceLeft = closableElWidth > spaceLeft && spaceRight > spaceLeft;
-  return needsSpaceLeft;
-}
-export function shouldShiftLeft(fixedEl, closableEl) {
-  const { closableElWidth, spaceLeft, spaceRight } = getClosableElementMeasurements(fixedEl, closableEl);
-  const needsSpaceRight = closableElWidth > spaceRight && spaceLeft > spaceRight;
-  return needsSpaceRight;
-}
-export function adjustTooltipPosition(tPos, el, tooltipEl) {
-  // position must be reset before measurements are taken in adjustTooltipPosition
-  // otherwise text-wrapping from previous position makes width measurement inconsistent
-  tooltipEl.style.top = "";
-  tooltipEl.style.left = "";
-  const { spaceLeft, spaceRight, spaceBelow, spaceAbove } = getClosableElementMeasurements(el, tooltipEl);
-  const tooltipWidth = tooltipEl.getBoundingClientRect().width;
-  const tooltipHeight = tooltipEl.getBoundingClientRect().height;
-  const enoughSpaceAbove = spaceAbove > tooltipHeight;
-  const enoughSpaceBelow = spaceBelow > tooltipHeight;
-  // a tooltip should never be closer than 24px to the edge of a screen
-  const enoughSpaceLeft = spaceLeft - 24 > tooltipWidth;
-  const enoughSpaceRight = spaceRight - 24 > tooltipWidth;
-  const swapAbove = (position) => {
-    return !enoughSpaceAbove ? position.replace("top", "bottom") : position;
-  };
-  const swapBelow = (position) => {
-    return !enoughSpaceBelow && enoughSpaceAbove ? position.replace("bottom", "top") : position;
-  };
-  const swapLeft = (position, centeredPosition) => {
-    if (!enoughSpaceLeft && enoughSpaceRight) {
-      position = position.replace("left", "right");
-    }
-    else if (!enoughSpaceLeft && !enoughSpaceRight) {
-      position = centeredPosition;
-    }
-    return position;
-  };
-  const swapRight = (position, centeredPosition) => {
-    if (!enoughSpaceRight && enoughSpaceLeft) {
-      position = position.replace("right", "left");
-    }
-    else if (!enoughSpaceRight && !enoughSpaceLeft) {
-      position = centeredPosition;
-    }
-    return position;
-  };
-  // horizontal checks must occur before vertical checks, because horizontal can affect vertical positioning but not vice versa
-  switch (tPos) {
-    case "left":
-      tPos = swapLeft(tPos, "bottom");
-    case "right":
-      tPos = swapRight(tPos, "bottom");
-    case "top-left":
-      tPos = swapLeft(tPos, "top");
-      tPos = swapAbove(tPos);
-    case "top-right":
-      tPos = swapRight(tPos, "top");
-      tPos = swapAbove(tPos);
-    case "bottom-left":
-      tPos = swapLeft(tPos, "bottom");
-      tPos = swapBelow(tPos);
-    case "bottom-right":
-      tPos = swapRight(tPos, "bottom");
-      tPos = swapBelow(tPos);
-    case "top":
-      tPos = swapAbove(tPos);
-    case "bottom":
-      tPos = swapBelow(tPos);
-  }
-  return tPos;
-}
-export function hasRoomRight(x, spaceNeeded) {
-  let horizOffset = 0;
-  // if (getTextDir() === "ltr") {
-  if (x.type === "click") {
-    // if it's a mouse event, deal with mouse coords
-    horizOffset = x.clientX;
-    // if it's a focus event, the offset is 0
-  }
-  else if (x.type === "focus") {
-    horizOffset = 0;
-  }
-  else {
-    // otherwise an element was passed, calculate how far it is from the edge of the window
-    let el = x; // re-assignment is for clarity
-    while (el) {
-      if (el.tagName == "BODY") {
-        // deal with browser quirks with body/window/document and page scroll
-        var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
-        horizOffset += el.offsetLeft - xScroll + el.clientLeft;
-      }
-      else {
-        // for all other non-BODY elements
-        horizOffset += el.offsetLeft - el.scrollLeft + el.clientLeft;
-      }
-      el = el.offsetParent;
-    }
-    // }
-  }
-  return window.innerWidth - horizOffset >= spaceNeeded;
-}
-export function checkForActiveElInShadow(element) {
-  while (element && element.shadowRoot) {
-    element = element.shadowRoot.activeElement;
-  }
-  return element;
-}
-export function checkForFocusableElInShadow(element) {
-  const selectors = [
-    "button",
-    "a",
-    "input",
-    "select",
-    "textarea",
-    "wm-button",
-    "wm-search",
-    "wm-select",
-    "wm-action-menu",
-    "wm-tab-item",
-    "wm-datepicker",
-  ];
-  let focusableEl = element;
-  selectors.forEach((selector) => {
-    if (focusableEl && focusableEl.shadowRoot) {
-      let elInShadow = focusableEl.shadowRoot.querySelector(selector);
-      if (elInShadow) {
-        if (selector.startsWith("wm-")) {
-          focusableEl = checkForFocusableElInShadow(elInShadow);
-        }
-        else {
-          focusableEl = elInShadow;
-        }
-      }
-    }
-  });
-  return focusableEl;
-}
-export function isFocusable(element) {
-  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute("tabIndex") !== null)) {
-    return true;
-  }
-  if (element.disabled) {
-    return false;
-  }
-  switch (element.nodeName) {
-    case "A":
-      return !!element.href && element.rel != "ignore";
-    case "INPUT":
-      return element.type != "hidden" && element.type != "file";
-    case "BUTTON":
-    case "SELECT":
-    case "TEXTAREA":
-    case "WM-BUTTON":
-    case "WM-SELECT":
-    case "WM-ACTION-MENU":
-    case "WM-DATEPICKER":
-    case "WM-TIMEPICKER":
-    case "WM-INPUT":
-    case "WM-TAG-INPUT":
-    case "WM-TAB-ITEM":
-    case "WM-SEARCH":
-      return true;
-    default:
-      return false;
-  }
-}
-export function getFirstFocusableDescendant(element) {
-  if (isFocusable(element)) {
-    return checkForFocusableElInShadow(element);
-  }
-  else if (element.childNodes.length > 0) {
-    element.childNodes.forEach((i) => {
-      const childEl = getFirstFocusableDescendant(i);
-      return childEl && checkForFocusableElInShadow(childEl);
-    });
-  }
-}
-export function hasValidType(file, types) {
-  const acceptedExtensions = types.split(" ");
-  const parts = file.name && file.name.split(".");
-  const ext = parts && parts.length > 1 && parts[parts.length - 1];
-  return ext
-    ? acceptedExtensions.includes(ext.toLowerCase())
-    : // fallback: if we couldn't obtain an extension,
-      // validate based on MIME type...
-      !!file.type
-        ? getAcceptedMimeTypesList(acceptedExtensions).includes(file.type)
-        : // ...and if that failed too, accept the file
-          // as it's preferable to accept an invalid file
-          // than refusing a valid one (back-end will take care of what slips through)
-          true;
-}
-// takes a string (space separated list of extensions), returns an array of strings (corresponding MIME types)
-export function getAcceptedMimeTypesList(acceptedExtensions) {
-  // this is just a list of common file types (regardless of whether they are/can be valid or not)
-  // front end checks are just a convenience to users, independent of security.
-  // it allows users to be notified of an invalid type as soon as they select the file, rather than when it gets uploaded
-  const lookupTable = {
-    aac: ["audio/aac"],
-    abw: ["application/x-abiword"],
-    arc: ["application/x-freearc"],
-    avi: ["video/x-msvideo"],
-    azw: ["application/vnd.amazon.ebook"],
-    bin: ["application/octet-stream"],
-    bmp: ["image/bmp"],
-    bz: ["application/x-bzip"],
-    bz2: ["application/x-bzip2"],
-    csh: ["application/x-csh"],
-    css: ["text/css"],
-    csv: ["text/csv"],
-    doc: ["application/msword"],
-    docx: ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
-    eot: ["application/vnd.ms-fontobject"],
-    epub: ["application/epub+zip"],
-    gz: ["application/gzip"],
-    gif: ["image/gif"],
-    htm: ["text/html"],
-    html: ["text/html"],
-    ico: ["image/vnd.microsoft.icon"],
-    ics: ["text/calendar"],
-    jar: ["application/java-archive"],
-    jpeg: ["image/jpeg"],
-    jpg: ["image/jpeg"],
-    js: ["text/javascript"],
-    json: ["application/json"],
-    jsonld: ["application/ld+json"],
-    log: ["text/plain"],
-    mid: ["audio/x-midi"],
-    midi: ["audio/x-midi"],
-    mjs: ["text/javascript"],
-    mp3: ["audio/mpeg"],
-    mpeg: ["video/mpeg"],
-    mpkg: ["application/vnd.apple.installer+xml"],
-    odp: ["application/vnd.oasis.opendocument.presentation"],
-    ods: ["application/vnd.oasis.opendocument.spreadsheet"],
-    odt: ["application/vnd.oasis.opendocument.text"],
-    oga: ["audio/ogg"],
-    ogv: ["video/ogg"],
-    ogx: ["application/ogg"],
-    opus: ["audio/opus"],
-    otf: ["font/otf"],
-    png: ["image/png"],
-    pdf: ["application/pdf"],
-    php: ["application/php"],
-    ppt: ["application/vnd.ms-powerpoint"],
-    pptx: ["application/vnd.openxmlformats-officedocument.presentationml.presentation"],
-    rar: ["application/vnd.rar", "application/x-rar", "application/x-rar-compressed"],
-    rtf: ["application/rtf"],
-    sh: ["application/x-sh"],
-    svg: ["image/svg+xml"],
-    swf: ["application/x-shockwave-flash"],
-    tar: ["application/x-tar"],
-    tif: ["image/tiff"],
-    tiff: ["image/tiff"],
-    ts: ["video/mp2t"],
-    ttf: ["font/ttf"],
-    txt: ["text/plain"],
-    vsd: ["application/vnd.visio"],
-    wav: ["audio/wav"],
-    weba: ["audio/webm"],
-    webm: ["video/webm"],
-    webp: ["image/webp"],
-    woff: ["font/woff"],
-    woff2: ["font/woff2"],
-    xhtml: ["application/xhtml+xml"],
-    xls: ["application/vnd.ms-excel"],
-    xlsx: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
-    xml: ["application/xml", "text/xml"],
-    xul: ["application/vnd.mozilla.xul+xml"],
-    zip: ["application/zip", "application/x-zip-compressed", "multipart/x-zip"],
-    "3gp": ["video/3gpp", "audio/3gpp"],
-    "3g2": ["video/3gpp2", "audio/3gpp2"],
-    "7z": ["application/x-7z-compressed"],
-  };
-  return acceptedExtensions.reduce((acc, ext) => acc.concat(lookupTable[ext]), []);
-}
-export function snakeCaseToCamelCase(str) {
-  const snakeCaseRegexp = /^([a-z0-9]*)(_[a-z0-9]*)*$/g;
-  if (snakeCaseRegexp.test(str)) {
-    let camelCase = "";
-    let arr = str.split("_");
-    arr.forEach((word, idx) => {
-      camelCase += idx === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1);
-    });
-    return camelCase;
-  }
-  else {
-    return str;
-  }
-}
-export function getNewIndexToFocus(currentIndex, direction, listLength) {
-  let newIndex = currentIndex;
-  if (direction === "ArrowDown") {
-    newIndex = (currentIndex + 1) % listLength;
-  }
-  if (direction === "ArrowUp") {
-    newIndex = currentIndex === 0 ? listLength - 1 : currentIndex - 1;
-  }
-  return newIndex;
-}
-export function isRelatedTarget(ev, id) {
-  // used for onBlur events to check the element that has been clicked
-  const ids = id.split(" ");
-  return ev.relatedTarget && ids.includes(ev.relatedTarget.id);
-}
-export function toBool(val) {
-  // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-  return val == "false" ? false : !!val;
-}
-/*
- * this is going to be needed to solve the extra tabbing on navigator
- * and for programmatic focus of tabs
- * Here's a draft, not bug proof, see:
- * https://stackoverflow.com/a/10730308/3741713
-
-function getKeyboardFocusableElements(element = document) {
-  const els = Array.from(element.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), wm-search, wm-timepicker, wm-tab-list, wm-tab-item, wm-button, wm-action-menu'));
-  return els.filter((el: Element) => !el.hasAttribute("disabled")) as HTMLElement[];
-}
-
-export function getPreviousKeyboardFocusableElement(element: HTMLElement) {
-  const els = getKeyboardFocusableElements();
-  const current = els.indexOf(element);
-  return els[current - 1] as HTMLElement;
-}
-
-export function getNextKeyboardFocusableElement(element: HTMLElement) {
-  const els = getKeyboardFocusableElements();
-  const current = els.indexOf(element);
-  return els[current + 1] as HTMLElement;
-}
- */
+import * as lang from "../lang/lang";
+import { createIntl, createIntlCache } from "@formatjs/intl";
+const DEFAULT_LANGUAGE = "en";
+function getBrowserLang() {
+  const langAttr = document.documentElement.getAttribute("lang");
+  if (!!langAttr) {
+    return langAttr;
+  }
+  else if (window.navigator && window.navigator.language) {
+    const lang = window.navigator.languages ? window.navigator.languages[0] : window.navigator.language;
+    return lang.slice(0, 2);
+  }
+  else {
+    return DEFAULT_LANGUAGE;
+  }
+}
+// prevents memory leak
+const cache = createIntlCache();
+const locale = getBrowserLang();
+export const intl = createIntl({
+  locale: locale,
+  defaultLocale: "en",
+  messages: lang[locale] || lang.en,
+}, cache);
+export function generateId() {
+  return "wmcl-" + Math.random().toString(36).substr(2, 10);
+}
+// limits how many times a function fires 
+// use when the function should run periodically, but not too often (e.g. window resize) 
+export function throttle(fn, wait) {
+  let timeout;
+  let shouldWait = false;
+  return function () {
+    const context = this;
+    if (!shouldWait) {
+      fn.apply(context, arguments);
+      shouldWait = true;
+      clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        shouldWait = false;
+      }, wait);
+    }
+  };
+}
+// waits until it hasn't been called for [timeout] ms.
+// use when the function should run only after something (event) is done firing 
+export function debounce(fn, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const functionCall = () => fn.apply(context, arguments);
+    clearTimeout(timeout);
+    timeout = setTimeout(functionCall, wait);
+  };
+}
+export function getTextDir() {
+  const dir = document.querySelector("html").getAttribute("dir");
+  return dir ? dir.toLowerCase() : "";
+}
+export function getPosition(el) {
+  const coords = el.getBoundingClientRect();
+  let x = coords.x;
+  let y = coords.y;
+  // Edge doesn't have x and y
+  if (!x) {
+    if (getTextDir() === "rtl") {
+      x = coords.right;
+    }
+    else {
+      x = coords.left;
+    }
+    y = coords.top;
+  }
+  return { x, y };
+}
+export function findParentWithScrollbar(el) {
+  while (!!el) {
+    if (el.scrollHeight > el.clientHeight && ["scroll", "auto"].includes(window.getComputedStyle(el).overflowY)) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+}
+export function findParentWithHiddenOverflow(el) {
+  while (!!el) {
+    if (window.getComputedStyle(el).overflowY !== "visible") {
+      return el;
+    }
+    el = el.parentElement;
+  }
+}
+export function getClosableElementMeasurements(fixedEl, closableEl) {
+  const parent = findParentWithHiddenOverflow(fixedEl);
+  // if parent is not found, measurements are checked against the viewport
+  return {
+    closableElHeight: closableEl.clientHeight,
+    closableElWidth: closableEl.clientWidth,
+    // NB boundingClientRect.bottom is space from top of viewport to bottom of el
+    // to get space below the el -> height of viewport minus boundingClientRect.bottom
+    spaceAbove: parent
+      ? fixedEl.getBoundingClientRect().top - parent.getBoundingClientRect().top
+      : fixedEl.getBoundingClientRect().top,
+    // NB boundingClientRect.bottom is space from top of viewport to bottom of el
+    // to get space below the el -> height of viewport minus boundingClientRect.bottom
+    spaceBelow: parent
+      ? parent.getBoundingClientRect().bottom - fixedEl.getBoundingClientRect().bottom
+      : document.documentElement.clientHeight - fixedEl.getBoundingClientRect().bottom,
+    spaceLeft: parent
+      ? fixedEl.getBoundingClientRect().left - parent.getBoundingClientRect().left
+      : fixedEl.getBoundingClientRect().left,
+    spaceRight: parent
+      ? parent.getBoundingClientRect().right - fixedEl.getBoundingClientRect().right
+      : document.documentElement.clientWidth - fixedEl.getBoundingClientRect().right,
+  };
+}
+export function shouldOpenUp(fixedEl, //the element visible on the page when the component is closed
+closableEl, //the dropdown/popup/etc that becomes visible when the component is open
+offsetAbove = 0, // if closableEl covers a part of fixedEl, that part should be offset
+offsetBelow = 0 // if closableEl covers a part of fixedEl, that part should be offset
+) {
+  const { closableElHeight, spaceAbove, spaceBelow } = getClosableElementMeasurements(fixedEl, closableEl);
+  //we want to open up only if there's not enough space below AND there is enough space above
+  const openUp = closableElHeight > spaceBelow + offsetBelow && closableElHeight <= spaceAbove + offsetAbove;
+  return openUp;
+}
+export function shouldOpenDown(fixedEl, //the element visible on the page when the component is closed
+closableEl, //the dropdown/popup/etc that becomes visible when the component is open
+offsetAbove = 0, // if closableEl covers a part of fixedEl, that part should be offset
+offsetBelow = 0 // if closableEl covers a part of fixedEl, that part should be offset
+) {
+  const { closableElHeight, spaceAbove, spaceBelow } = getClosableElementMeasurements(fixedEl, closableEl);
+  //we want to open up only if there's not enough space below AND there is enough space above
+  const openDown = closableElHeight > spaceAbove + offsetAbove && closableElHeight <= spaceBelow + offsetBelow;
+  return openDown;
+}
+export function shouldShiftRight(fixedEl, closableEl) {
+  const { closableElWidth, spaceLeft, spaceRight } = getClosableElementMeasurements(fixedEl, closableEl);
+  const needsSpaceLeft = closableElWidth > spaceLeft && spaceRight > spaceLeft;
+  return needsSpaceLeft;
+}
+export function shouldShiftLeft(fixedEl, closableEl) {
+  const { closableElWidth, spaceLeft, spaceRight } = getClosableElementMeasurements(fixedEl, closableEl);
+  const needsSpaceRight = closableElWidth > spaceRight && spaceLeft > spaceRight;
+  return needsSpaceRight;
+}
+export function adjustTooltipPosition(tPos, el, tooltipEl) {
+  // position must be reset before measurements are taken in adjustTooltipPosition
+  // otherwise text-wrapping from previous position makes width measurement inconsistent
+  tooltipEl.style.top = "";
+  tooltipEl.style.left = "";
+  const { spaceLeft, spaceRight, spaceBelow, spaceAbove } = getClosableElementMeasurements(el, tooltipEl);
+  const tooltipWidth = tooltipEl.getBoundingClientRect().width;
+  const tooltipHeight = tooltipEl.getBoundingClientRect().height;
+  const enoughSpaceAbove = spaceAbove > tooltipHeight;
+  const enoughSpaceBelow = spaceBelow > tooltipHeight;
+  // a tooltip should never be closer than 24px to the edge of a screen
+  const enoughSpaceLeft = spaceLeft - 24 > tooltipWidth;
+  const enoughSpaceRight = spaceRight - 24 > tooltipWidth;
+  const swapAbove = (position) => {
+    return !enoughSpaceAbove ? position.replace("top", "bottom") : position;
+  };
+  const swapBelow = (position) => {
+    return !enoughSpaceBelow && enoughSpaceAbove ? position.replace("bottom", "top") : position;
+  };
+  const swapLeft = (position, centeredPosition) => {
+    if (!enoughSpaceLeft && enoughSpaceRight) {
+      position = position.replace("left", "right");
+    }
+    else if (!enoughSpaceLeft && !enoughSpaceRight) {
+      position = centeredPosition;
+    }
+    return position;
+  };
+  const swapRight = (position, centeredPosition) => {
+    if (!enoughSpaceRight && enoughSpaceLeft) {
+      position = position.replace("right", "left");
+    }
+    else if (!enoughSpaceRight && !enoughSpaceLeft) {
+      position = centeredPosition;
+    }
+    return position;
+  };
+  // horizontal checks must occur before vertical checks, because horizontal can affect vertical positioning but not vice versa
+  switch (tPos) {
+    case "left":
+      tPos = swapLeft(tPos, "bottom");
+    case "right":
+      tPos = swapRight(tPos, "bottom");
+    case "top-left":
+      tPos = swapLeft(tPos, "top");
+      tPos = swapAbove(tPos);
+    case "top-right":
+      tPos = swapRight(tPos, "top");
+      tPos = swapAbove(tPos);
+    case "bottom-left":
+      tPos = swapLeft(tPos, "bottom");
+      tPos = swapBelow(tPos);
+    case "bottom-right":
+      tPos = swapRight(tPos, "bottom");
+      tPos = swapBelow(tPos);
+    case "top":
+      tPos = swapAbove(tPos);
+    case "bottom":
+      tPos = swapBelow(tPos);
+  }
+  return tPos;
+}
+export function hasRoomRight(x, spaceNeeded) {
+  let horizOffset = 0;
+  // if (getTextDir() === "ltr") {
+  if (x.type === "click") {
+    // if it's a mouse event, deal with mouse coords
+    horizOffset = x.clientX;
+    // if it's a focus event, the offset is 0
+  }
+  else if (x.type === "focus") {
+    horizOffset = 0;
+  }
+  else {
+    // otherwise an element was passed, calculate how far it is from the edge of the window
+    let el = x; // re-assignment is for clarity
+    while (el) {
+      if (el.tagName == "BODY") {
+        // deal with browser quirks with body/window/document and page scroll
+        var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
+        horizOffset += el.offsetLeft - xScroll + el.clientLeft;
+      }
+      else {
+        // for all other non-BODY elements
+        horizOffset += el.offsetLeft - el.scrollLeft + el.clientLeft;
+      }
+      el = el.offsetParent;
+    }
+    // }
+  }
+  return window.innerWidth - horizOffset >= spaceNeeded;
+}
+export function checkForActiveElInShadow(element) {
+  while (element && element.shadowRoot) {
+    element = element.shadowRoot.activeElement;
+  }
+  return element;
+}
+export function checkForFocusableElInShadow(element) {
+  const selectors = [
+    "button",
+    "a",
+    "input",
+    "select",
+    "textarea",
+    "wm-button",
+    "wm-search",
+    "wm-select",
+    "wm-action-menu",
+    "wm-tab-item",
+    "wm-datepicker",
+  ];
+  let focusableEl = element;
+  selectors.forEach((selector) => {
+    if (focusableEl && focusableEl.shadowRoot) {
+      let elInShadow = focusableEl.shadowRoot.querySelector(selector);
+      if (elInShadow) {
+        if (selector.startsWith("wm-")) {
+          focusableEl = checkForFocusableElInShadow(elInShadow);
+        }
+        else {
+          focusableEl = elInShadow;
+        }
+      }
+    }
+  });
+  return focusableEl;
+}
+export function isFocusable(element) {
+  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute("tabIndex") !== null)) {
+    return true;
+  }
+  if (element.disabled) {
+    return false;
+  }
+  switch (element.nodeName) {
+    case "A":
+      return !!element.href && element.rel != "ignore";
+    case "INPUT":
+      return element.type != "hidden" && element.type != "file";
+    case "BUTTON":
+    case "SELECT":
+    case "TEXTAREA":
+    case "WM-BUTTON":
+    case "WM-SELECT":
+    case "WM-ACTION-MENU":
+    case "WM-DATEPICKER":
+    case "WM-TIMEPICKER":
+    case "WM-INPUT":
+    case "WM-TAG-INPUT":
+    case "WM-TAB-ITEM":
+    case "WM-SEARCH":
+      return true;
+    default:
+      return false;
+  }
+}
+export function getFirstFocusableDescendant(element) {
+  if (isFocusable(element)) {
+    return checkForFocusableElInShadow(element);
+  }
+  else if (element.childNodes.length > 0) {
+    element.childNodes.forEach((i) => {
+      const childEl = getFirstFocusableDescendant(i);
+      return childEl && checkForFocusableElInShadow(childEl);
+    });
+  }
+}
+export function hasValidType(file, types) {
+  const acceptedExtensions = types.split(" ");
+  const parts = file.name && file.name.split(".");
+  const ext = parts && parts.length > 1 && parts[parts.length - 1];
+  return ext
+    ? acceptedExtensions.includes(ext.toLowerCase())
+    : // fallback: if we couldn't obtain an extension,
+      // validate based on MIME type...
+      !!file.type
+        ? getAcceptedMimeTypesList(acceptedExtensions).includes(file.type)
+        : // ...and if that failed too, accept the file
+          // as it's preferable to accept an invalid file
+          // than refusing a valid one (back-end will take care of what slips through)
+          true;
+}
+// takes a string (space separated list of extensions), returns an array of strings (corresponding MIME types)
+export function getAcceptedMimeTypesList(acceptedExtensions) {
+  // this is just a list of common file types (regardless of whether they are/can be valid or not)
+  // front end checks are just a convenience to users, independent of security.
+  // it allows users to be notified of an invalid type as soon as they select the file, rather than when it gets uploaded
+  const lookupTable = {
+    aac: ["audio/aac"],
+    abw: ["application/x-abiword"],
+    arc: ["application/x-freearc"],
+    avi: ["video/x-msvideo"],
+    azw: ["application/vnd.amazon.ebook"],
+    bin: ["application/octet-stream"],
+    bmp: ["image/bmp"],
+    bz: ["application/x-bzip"],
+    bz2: ["application/x-bzip2"],
+    csh: ["application/x-csh"],
+    css: ["text/css"],
+    csv: ["text/csv"],
+    doc: ["application/msword"],
+    docx: ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
+    eot: ["application/vnd.ms-fontobject"],
+    epub: ["application/epub+zip"],
+    gz: ["application/gzip"],
+    gif: ["image/gif"],
+    htm: ["text/html"],
+    html: ["text/html"],
+    ico: ["image/vnd.microsoft.icon"],
+    ics: ["text/calendar"],
+    jar: ["application/java-archive"],
+    jpeg: ["image/jpeg"],
+    jpg: ["image/jpeg"],
+    js: ["text/javascript"],
+    json: ["application/json"],
+    jsonld: ["application/ld+json"],
+    log: ["text/plain"],
+    mid: ["audio/x-midi"],
+    midi: ["audio/x-midi"],
+    mjs: ["text/javascript"],
+    mp3: ["audio/mpeg"],
+    mpeg: ["video/mpeg"],
+    mpkg: ["application/vnd.apple.installer+xml"],
+    odp: ["application/vnd.oasis.opendocument.presentation"],
+    ods: ["application/vnd.oasis.opendocument.spreadsheet"],
+    odt: ["application/vnd.oasis.opendocument.text"],
+    oga: ["audio/ogg"],
+    ogv: ["video/ogg"],
+    ogx: ["application/ogg"],
+    opus: ["audio/opus"],
+    otf: ["font/otf"],
+    png: ["image/png"],
+    pdf: ["application/pdf"],
+    php: ["application/php"],
+    ppt: ["application/vnd.ms-powerpoint"],
+    pptx: ["application/vnd.openxmlformats-officedocument.presentationml.presentation"],
+    rar: ["application/vnd.rar", "application/x-rar", "application/x-rar-compressed"],
+    rtf: ["application/rtf"],
+    sh: ["application/x-sh"],
+    svg: ["image/svg+xml"],
+    swf: ["application/x-shockwave-flash"],
+    tar: ["application/x-tar"],
+    tif: ["image/tiff"],
+    tiff: ["image/tiff"],
+    ts: ["video/mp2t"],
+    ttf: ["font/ttf"],
+    txt: ["text/plain"],
+    vsd: ["application/vnd.visio"],
+    wav: ["audio/wav"],
+    weba: ["audio/webm"],
+    webm: ["video/webm"],
+    webp: ["image/webp"],
+    woff: ["font/woff"],
+    woff2: ["font/woff2"],
+    xhtml: ["application/xhtml+xml"],
+    xls: ["application/vnd.ms-excel"],
+    xlsx: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
+    xml: ["application/xml", "text/xml"],
+    xul: ["application/vnd.mozilla.xul+xml"],
+    zip: ["application/zip", "application/x-zip-compressed", "multipart/x-zip"],
+    "3gp": ["video/3gpp", "audio/3gpp"],
+    "3g2": ["video/3gpp2", "audio/3gpp2"],
+    "7z": ["application/x-7z-compressed"],
+  };
+  return acceptedExtensions.reduce((acc, ext) => acc.concat(lookupTable[ext]), []);
+}
+export function snakeCaseToCamelCase(str) {
+  const snakeCaseRegexp = /^([a-z0-9]*)(_[a-z0-9]*)*$/g;
+  if (snakeCaseRegexp.test(str)) {
+    let camelCase = "";
+    let arr = str.split("_");
+    arr.forEach((word, idx) => {
+      camelCase += idx === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1);
+    });
+    return camelCase;
+  }
+  else {
+    return str;
+  }
+}
+export function getNewIndexToFocus(currentIndex, direction, listLength) {
+  let newIndex = currentIndex;
+  if (direction === "ArrowDown") {
+    newIndex = (currentIndex + 1) % listLength;
+  }
+  if (direction === "ArrowUp") {
+    newIndex = currentIndex === 0 ? listLength - 1 : currentIndex - 1;
+  }
+  return newIndex;
+}
+export function isRelatedTarget(ev, id) {
+  // used for onBlur events to check the element that has been clicked
+  const ids = id.split(" ");
+  return ev.relatedTarget && ids.includes(ev.relatedTarget.id);
+}
+export function toBool(val) {
+  // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+  return val == "false" ? false : !!val;
+}
+/*
+ * this is going to be needed to solve the extra tabbing on navigator
+ * and for programmatic focus of tabs
+ * Here's a draft, not bug proof, see:
+ * https://stackoverflow.com/a/10730308/3741713
+
+function getKeyboardFocusableElements(element = document) {
+  const els = Array.from(element.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), wm-search, wm-timepicker, wm-tab-list, wm-tab-item, wm-button, wm-action-menu'));
+  return els.filter((el: Element) => !el.hasAttribute("disabled")) as HTMLElement[];
+}
+
+export function getPreviousKeyboardFocusableElement(element: HTMLElement) {
+  const els = getKeyboardFocusableElements();
+  const current = els.indexOf(element);
+  return els[current - 1] as HTMLElement;
+}
+
+export function getNextKeyboardFocusableElement(element: HTMLElement) {
+  const els = getKeyboardFocusableElements();
+  const current = els.indexOf(element);
+  return els[current + 1] as HTMLElement;
+}
+ */