npm - @jsenv/dom - Versions diffs - 0.6.0 → 0.7.0 - Mend

@jsenv/dom 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/dist/jsenv_dom.js +262 -330
package/package.json +2 -4
package/index.js +0 -124
package/src/attr/add_attribute_effect.js +0 -93
package/src/attr/attributes.js +0 -32
package/src/color/color_constrast.js +0 -69
package/src/color/color_parsing.js +0 -319
package/src/color/color_scheme.js +0 -28
package/src/color/pick_light_or_dark.js +0 -34
package/src/color/resolve_css_color.js +0 -60
package/src/demos/3_columns_resize_demo.html +0 -84
package/src/demos/3_rows_resize_demo.html +0 -89
package/src/demos/aside_and_main_demo.html +0 -93
package/src/demos/coordinates_demo.html +0 -450
package/src/demos/document_autoscroll_demo.html +0 -517
package/src/demos/drag_gesture_constraints_demo.html +0 -701
package/src/demos/drag_gesture_demo.html +0 -1047
package/src/demos/drag_gesture_element_to_impact_demo.html +0 -445
package/src/demos/drag_reference_element_demo.html +0 -480
package/src/demos/flex_details_set_demo.html +0 -302
package/src/demos/flex_details_set_demo_2.html +0 -315
package/src/demos/visible_rect_demo.html +0 -525
package/src/element_signature.js +0 -100
package/src/interaction/drag/constraint_feedback_line.js +0 -92
package/src/interaction/drag/drag_constraint.js +0 -659
package/src/interaction/drag/drag_debug_markers.js +0 -635
package/src/interaction/drag/drag_element_positioner.js +0 -382
package/src/interaction/drag/drag_gesture.js +0 -566
package/src/interaction/drag/drag_resize_demo.html +0 -571
package/src/interaction/drag/drag_to_move.js +0 -301
package/src/interaction/drag/drag_to_resize_gesture.js +0 -68
package/src/interaction/drag/drop_target_detection.js +0 -148
package/src/interaction/drag/sticky_frontiers.js +0 -160
package/src/interaction/event_marker.js +0 -14
package/src/interaction/focus/active_element.js +0 -33
package/src/interaction/focus/arrow_navigation.js +0 -599
package/src/interaction/focus/element_is_focusable.js +0 -57
package/src/interaction/focus/element_visibility.js +0 -111
package/src/interaction/focus/find_focusable.js +0 -21
package/src/interaction/focus/focus_group.js +0 -91
package/src/interaction/focus/focus_group_registry.js +0 -12
package/src/interaction/focus/focus_nav.js +0 -12
package/src/interaction/focus/focus_nav_event_marker.js +0 -14
package/src/interaction/focus/focus_trap.js +0 -105
package/src/interaction/focus/tab_navigation.js +0 -128
package/src/interaction/focus/tests/focus_group_skip_tab_test.html +0 -206
package/src/interaction/focus/tests/tree_focus_test.html +0 -304
package/src/interaction/focus/tests/tree_focus_test.jsx +0 -261
package/src/interaction/focus/tests/tree_focus_test_preact.html +0 -13
package/src/interaction/isolate_interactions.js +0 -161
package/src/interaction/keyboard.js +0 -26
package/src/interaction/scroll/capture_scroll.js +0 -47
package/src/interaction/scroll/is_scrollable.js +0 -159
package/src/interaction/scroll/scroll_container.js +0 -110
package/src/interaction/scroll/scroll_trap.js +0 -44
package/src/interaction/scroll/scrollbar_size.js +0 -20
package/src/interaction/scroll/wheel_through.js +0 -138
package/src/iterable_weak_set.js +0 -66
package/src/position/dom_coords.js +0 -340
package/src/position/offset_parent.js +0 -15
package/src/position/position_fixed.js +0 -15
package/src/position/position_sticky.js +0 -213
package/src/position/sticky_rect.js +0 -79
package/src/position/visible_rect.js +0 -486
package/src/pub_sub.js +0 -31
package/src/size/can_take_size.js +0 -11
package/src/size/details_content_full_height.js +0 -63
package/src/size/flex_details_set.js +0 -974
package/src/size/get_available_height.js +0 -22
package/src/size/get_available_width.js +0 -22
package/src/size/get_border_sizes.js +0 -14
package/src/size/get_height.js +0 -4
package/src/size/get_inner_height.js +0 -15
package/src/size/get_inner_width.js +0 -15
package/src/size/get_margin_sizes.js +0 -10
package/src/size/get_max_height.js +0 -57
package/src/size/get_max_width.js +0 -47
package/src/size/get_min_height.js +0 -14
package/src/size/get_min_width.js +0 -14
package/src/size/get_padding_sizes.js +0 -10
package/src/size/get_width.js +0 -4
package/src/size/hooks/use_available_height.js +0 -27
package/src/size/hooks/use_available_width.js +0 -27
package/src/size/hooks/use_max_height.js +0 -10
package/src/size/hooks/use_max_width.js +0 -10
package/src/size/hooks/use_resize_status.js +0 -62
package/src/size/resize.js +0 -695
package/src/size/resolve_css_size.js +0 -32
package/src/style/dom_styles.js +0 -97
package/src/style/style_composition.js +0 -121
package/src/style/style_controller.js +0 -345
package/src/style/style_default.js +0 -153
package/src/style/style_default_demo.html +0 -128
package/src/style/style_parsing.js +0 -375
package/src/transition/demos/animation_resumption_test.xhtml +0 -500
package/src/transition/demos/height_toggle_test.xhtml +0 -515
package/src/transition/dom_transition.js +0 -254
package/src/transition/easing.js +0 -48
package/src/transition/group_transition.js +0 -261
package/src/transition/transform_style_parser.js +0 -32
package/src/transition/transition_playback.js +0 -366
package/src/transition/transition_timeline.js +0 -79
package/src/traversal.js +0 -247
package/src/ui_transition/demos/content_states_transition_demo.html +0 -628
package/src/ui_transition/demos/smooth_height_transition_demo.html +0 -149
package/src/ui_transition/demos/transition_testing.html +0 -354
package/src/ui_transition/ui_transition.js +0 -1491
package/src/utils.js +0 -69
package/src/value_effect.js +0 -35

package/src/interaction/isolate_interactions.js DELETED Viewed

@@ -1,161 +0,0 @@
-import { setAttributes } from "../attr/attributes.js";
-import { getAssociatedElements } from "../utils.js";
-/**
- * Isolates user interactions to only the specified elements, making everything else non-interactive.
- *
- * This creates a controlled interaction environment where only the target elements (and their ancestors)
- * can receive user input like clicks, keyboard events, focus, etc. All other DOM elements become
- * non-interactive, preventing conflicting or unwanted interactions during critical operations
- * like drag gestures, modal dialogs, or complex UI states.
- *
- * The function uses the `inert` attribute to achieve this isolation, applying it strategically
- * to parts of the DOM tree while preserving the interactive elements and their ancestor chains.
- *
- * Example DOM structure and inert application:
- *
- * Before calling isolateInteractions:
- * ```
- * <body>
- *   <header>...</header>
- *   <main>
- *     <div>
- *       <span>some content</span>
- *       <div class="modal">modal content</div>
- *       <span>more content</span>
- *     </div>
- *     <aside inert>already inert</aside>
- *     <div class="dropdown">dropdown menu</div>
- *   </main>
- *   <footer>...</footer>
- * </body>
- * ```
- *
- * After calling isolateInteractions([modal, dropdown]):
- * ```
- * <body>
- *   <header inert>...</header>  ← made inert (no active descendants)
- *   <main> ← not inert because it contains active elements
- *     <div> ← not inert because it contains .modal
- *       <span inert>some content</span> ← made inert selectively
- *       <div class="modal">modal content</div> ← stays active
- *       <span inert>more content</span> ← made inert selectively
- *     </div>
- *     <aside inert>already inert</aside>
- *     <div class="dropdown">dropdown menu</div> ← stays active
- *   </main>
- *   <footer inert>...</footer>
- * </body>
- * ```
- *
- * After calling cleanup():
- * ```
- * <body>
- *   <header>...</header>
- *   <main>
- *     <div>
- *       <span>some content</span>
- *       <div class="modal">modal content</div>
- *       <span>more content</span>
- *     </div>
- *     <aside inert>already inert</aside> ← [inert] preserved
- *     <div class="dropdown">dropdown menu</div>
- *   </main>
- *   <footer>...</footer>
- * </body>
- * ```
- *
- * @param {Array<Element>} elements - Array of elements to keep interactive (non-inert)
- * @returns {Function} cleanup - Function to restore original inert states
- */
-export const isolateInteractions = (elements) => {
-  const cleanupCallbackSet = new Set();
-  const cleanup = () => {
-    for (const cleanupCallback of cleanupCallbackSet) {
-      cleanupCallback();
-    }
-    cleanupCallbackSet.clear();
-  };
-  const toKeepInteractiveSet = new Set();
-  const keepSelfAndAncestors = (el) => {
-    if (toKeepInteractiveSet.has(el)) {
-      return;
-    }
-    const associatedElements = getAssociatedElements(el);
-    if (associatedElements) {
-      for (const associatedElement of associatedElements) {
-        keepSelfAndAncestors(associatedElement);
-      }
-    }
-    // Add the element itself
-    toKeepInteractiveSet.add(el);
-    // Add all its ancestors up to document.body
-    let ancestor = el.parentNode;
-    while (ancestor && ancestor !== document.body) {
-      toKeepInteractiveSet.add(ancestor);
-      ancestor = ancestor.parentNode;
-    }
-  };
-  // Build set of elements to keep interactive
-  for (const element of elements) {
-    keepSelfAndAncestors(element);
-  }
-  // backdrop elements are meant to control interactions happening at document level
-  // and should stay interactive
-  const backdropElements = document.querySelectorAll("[data-backdrop]");
-  for (const backdropElement of backdropElements) {
-    keepSelfAndAncestors(backdropElement);
-  }
-  const setInert = (el) => {
-    if (toKeepInteractiveSet.has(el)) {
-      // element should stay interactive
-      return;
-    }
-    const restoreAttributes = setAttributes(el, {
-      inert: "",
-    });
-    cleanupCallbackSet.add(() => {
-      restoreAttributes();
-    });
-  };
-  const makeElementInertSelectivelyOrCompletely = (el) => {
-    // If this element should stay interactive, keep it active
-    if (toKeepInteractiveSet.has(el)) {
-      return;
-    }
-    // Since we put all ancestors in toKeepInteractiveSet, if this element
-    // is not in the set, we can check if any of its direct children are.
-    // If none of the direct children are in the set, then no descendants are either.
-    const children = Array.from(el.children);
-    const hasInteractiveChildren = children.some((child) =>
-      toKeepInteractiveSet.has(child),
-    );
-    if (!hasInteractiveChildren) {
-      // No interactive descendants, make the entire element inert
-      setInert(el);
-      return;
-    }
-    // Some children need to stay interactive, process them selectively
-    for (const child of children) {
-      makeElementInertSelectivelyOrCompletely(child);
-    }
-  };
-  // Apply inert to all top-level elements that aren't in our keep-interactive set
-  const bodyChildren = Array.from(document.body.children);
-  for (const child of bodyChildren) {
-    makeElementInertSelectivelyOrCompletely(child);
-  }
-  return () => {
-    cleanup();
-  };
-};

package/src/interaction/keyboard.js DELETED Viewed

@@ -1,26 +0,0 @@
-export const canInterceptKeys = (event) => {
-  const target = event.target;
-  // Don't handle shortcuts when user is typing
-  if (
-    target.tagName === "INPUT" ||
-    target.tagName === "TEXTAREA" ||
-    target.contentEditable === "true" ||
-    target.isContentEditable
-  ) {
-    return false;
-  }
-  // Don't handle shortcuts when select dropdown is open
-  if (target.tagName === "SELECT") {
-    return false;
-  }
-  // Don't handle shortcuts when target or container is disabled
-  if (
-    target.disabled ||
-    target.closest("[disabled]") ||
-    target.inert ||
-    target.closest("[inert]")
-  ) {
-    return false;
-  }
-  return true;
-};

package/src/interaction/scroll/capture_scroll.js DELETED Viewed

@@ -1,47 +0,0 @@
-// Helper to create scroll state capture/restore function for an element
-export const captureScrollState = (element) => {
-  const scrollLeft = element.scrollLeft;
-  const scrollTop = element.scrollTop;
-  const scrollWidth = element.scrollWidth;
-  const scrollHeight = element.scrollHeight;
-  const clientWidth = element.clientWidth;
-  const clientHeight = element.clientHeight;
-  // Calculate scroll percentages to preserve relative position
-  const scrollLeftPercent =
-    scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0;
-  const scrollTopPercent =
-    scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0;
-  // Return preserve function that maintains scroll position relative to content
-  return () => {
-    // Get current dimensions after DOM changes
-    const newScrollWidth = element.scrollWidth;
-    const newScrollHeight = element.scrollHeight;
-    const newClientWidth = element.clientWidth;
-    const newClientHeight = element.clientHeight;
-    // If content dimensions changed significantly, use percentage-based positioning
-    if (
-      Math.abs(newScrollWidth - scrollWidth) > 1 ||
-      Math.abs(newScrollHeight - scrollHeight) > 1 ||
-      Math.abs(newClientWidth - clientWidth) > 1 ||
-      Math.abs(newClientHeight - clientHeight) > 1
-    ) {
-      if (newScrollWidth > newClientWidth) {
-        const newScrollLeft =
-          scrollLeftPercent * (newScrollWidth - newClientWidth);
-        element.scrollLeft = newScrollLeft;
-      }
-      if (newScrollHeight > newClientHeight) {
-        const newScrollTop =
-          scrollTopPercent * (newScrollHeight - newClientHeight);
-        element.scrollTop = newScrollTop;
-      }
-    } else {
-      element.scrollLeft = scrollLeft;
-      element.scrollTop = scrollTop;
-    }
-  };
-};

package/src/interaction/scroll/is_scrollable.js DELETED Viewed

@@ -1,159 +0,0 @@
-import { getStyle } from "../../style/dom_styles.js";
-import { isDocumentElement } from "../../utils.js";
-// note: keep in mind that an element with overflow: 'hidden' is scrollable
-// it can be scrolled using keyboard arrows or JavaScript properties such as scrollTop, scrollLeft
-// the only overflow that prevents scroll is "visible"
-export const isScrollable = (element, { includeHidden } = {}) => {
-  if (canHaveVerticalScroll(element, { includeHidden })) {
-    return true;
-  }
-  if (canHaveHorizontalScroll(element, { includeHidden })) {
-    return true;
-  }
-  return false;
-};
-const canHaveVerticalScroll = (element, { includeHidden }) => {
-  const verticalOverflow = getStyle(element, "overflow-y");
-  if (verticalOverflow === "visible") {
-    // browser returns "visible" on documentElement even if it is scrollable
-    if (isDocumentElement(element)) {
-      return true;
-    }
-    return false;
-  }
-  if (verticalOverflow === "hidden" || verticalOverflow === "clip") {
-    return includeHidden;
-  }
-  const overflow = getStyle(element, "overflow");
-  if (overflow === "visible") {
-    // browser returns "visible" on documentElement even if it is scrollable
-    if (isDocumentElement(element)) {
-      return true;
-    }
-    return false;
-  }
-  if (overflow === "hidden" || overflow === "clip") {
-    return includeHidden;
-  }
-  return true; // "auto", "scroll"
-};
-const canHaveHorizontalScroll = (element, { includeHidden }) => {
-  const horizontalOverflow = getStyle(element, "overflow-x");
-  if (horizontalOverflow === "visible") {
-    // browser returns "visible" on documentElement even if it is scrollable
-    if (isDocumentElement(element)) {
-      return true;
-    }
-    return false;
-  }
-  if (horizontalOverflow === "hidden" || horizontalOverflow === "clip") {
-    return includeHidden;
-  }
-  const overflow = getStyle(element, "overflow");
-  if (overflow === "visible") {
-    if (isDocumentElement(element)) {
-      // browser returns "visible" on documentElement even if it is scrollable
-      return true;
-    }
-    return false;
-  }
-  if (overflow === "hidden" || overflow === "clip") {
-    return includeHidden;
-  }
-  return true; // "auto", "scroll"
-};
-export const getScrollingElement = (document) => {
-  const { scrollingElement } = document;
-  if (scrollingElement) {
-    return scrollingElement;
-  }
-  if (isCompliant(document)) {
-    return document.documentElement;
-  }
-  const body = document.body;
-  const isFrameset = body && !/body/i.test(body.tagName);
-  const possiblyScrollingElement = isFrameset ? getNextBodyElement(body) : body;
-  // If `body` is itself scrollable, it is not the `scrollingElement`.
-  return possiblyScrollingElement && bodyIsScrollable(possiblyScrollingElement)
-    ? null
-    : possiblyScrollingElement;
-};
-const isHidden = (element) => {
-  const display = getStyle(element, "display");
-  if (display === "none") {
-    return false;
-  }
-  if (
-    display === "table-row" ||
-    display === "table-group" ||
-    display === "table-column"
-  ) {
-    return getStyle(element, "visibility") !== "collapsed";
-  }
-  return true;
-};
-const isCompliant = (document) => {
-  // Note: document.compatMode can be toggle at runtime by document.write
-  const isStandardsMode = /^CSS1/.test(document.compatMode);
-  if (isStandardsMode) {
-    return testScrollCompliance(document);
-  }
-  return false;
-};
-const testScrollCompliance = (document) => {
-  const iframe = document.createElement("iframe");
-  iframe.style.height = "1px";
-  const parentNode = document.body || document.documentElement || document;
-  parentNode.appendChild(iframe);
-  const iframeDocument = iframe.contentWindow.document;
-  iframeDocument.write('<!DOCTYPE html><div style="height:9999em">x</div>');
-  iframeDocument.close();
-  const scrollComplianceResult =
-    iframeDocument.documentElement.scrollHeight >
-    iframeDocument.body.scrollHeight;
-  iframe.parentNode.removeChild(iframe);
-  return scrollComplianceResult;
-};
-const getNextBodyElement = (frameset) => {
-  // We use this function to be correct per spec in case `document.body` is
-  // a `frameset` but there exists a later `body`. Since `document.body` is
-  // a `frameset`, we know the root is an `html`, and there was no `body`
-  // before the `frameset`, so we just need to look at siblings after the
-  // `frameset`.
-  let current = frameset;
-  while ((current = current.nextSibling)) {
-    if (current.nodeType === 1 && isBodyElement(current)) {
-      return current;
-    }
-  }
-  return null;
-};
-const isBodyElement = (element) => element.ownerDocument.body === element;
-const bodyIsScrollable = (body) => {
-  // a body element is scrollable if body and html are scrollable and rendered
-  if (!isScrollable(body)) {
-    return false;
-  }
-  if (isHidden(body)) {
-    return false;
-  }
-  const documentElement = body.ownerDocument.documentElement;
-  if (!isScrollable(documentElement)) {
-    return false;
-  }
-  if (isHidden(documentElement)) {
-    return false;
-  }
-  return true;
-};

package/src/interaction/scroll/scroll_container.js DELETED Viewed

@@ -1,110 +0,0 @@
-// https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container
-import { getStyle } from "../../style/dom_styles.js";
-import { getScrollingElement, isScrollable } from "./is_scrollable.js";
-const { documentElement } = document;
-export const getScrollContainer = (arg, { includeHidden } = {}) => {
-  if (typeof arg !== "object" || arg.nodeType !== 1) {
-    throw new TypeError("getScrollContainer first argument must be DOM node");
-  }
-  const element = arg;
-  if (element === document) {
-    return null;
-  }
-  if (element === documentElement) {
-    if (isScrollable(element, { includeHidden })) {
-      return element;
-    }
-    return null;
-  }
-  const position = getStyle(element, "position");
-  if (position === "fixed") {
-    return getScrollingElement(element.ownerDocument);
-  }
-  return (
-    findScrollContainer(element, { includeHidden }) ||
-    getScrollingElement(element.ownerDocument)
-  );
-};
-const findScrollContainer = (element, { includeHidden } = {}) => {
-  const position = getStyle(element, "position");
-  let parent = element.parentNode;
-  // Si l'élément est en position absolute, d'abord trouver le premier parent positionné
-  if (position === "absolute") {
-    while (parent && parent !== document) {
-      if (parent === documentElement) {
-        break; // documentElement est considéré comme positionné
-      }
-      const parentPosition = getStyle(parent, "position");
-      if (parentPosition !== "static") {
-        break; // Trouvé le premier parent positionné
-      }
-      parent = parent.parentNode;
-    }
-  }
-  // Maintenant chercher le premier parent scrollable à partir du parent positionné
-  while (parent) {
-    if (parent === document) {
-      return null;
-    }
-    if (isScrollable(parent, { includeHidden })) {
-      return parent;
-    }
-    parent = parent.parentNode;
-  }
-  return null;
-};
-export const getSelfAndAncestorScrolls = (element, startOnParent) => {
-  let scrollX = 0;
-  let scrollY = 0;
-  const ancestorScrolls = [];
-  const visitElement = (elementOrScrollContainer) => {
-    const scrollContainer = getScrollContainer(elementOrScrollContainer);
-    if (scrollContainer) {
-      ancestorScrolls.push({
-        element: elementOrScrollContainer,
-        scrollContainer,
-      });
-      scrollX += scrollContainer.scrollLeft;
-      scrollY += scrollContainer.scrollTop;
-      if (scrollContainer === document.documentElement) {
-        return;
-      }
-      visitElement(scrollContainer);
-    }
-  };
-  if (startOnParent) {
-    if (element === documentElement) {
-    } else {
-      visitElement(element.parentNode);
-    }
-  } else {
-    visitElement(element);
-  }
-  ancestorScrolls.scrollX = scrollX;
-  ancestorScrolls.scrollY = scrollY;
-  return ancestorScrolls;
-};
-// https://github.com/shipshapecode/tether/blob/d6817f8c49a7a26b04c45e55589279dd1b5dd2bf/src/js/utils/parents.js#L1
-export const getScrollContainerSet = (element) => {
-  const scrollContainerSet = new Set();
-  let elementOrScrollContainer = element;
-  while (true) {
-    const scrollContainer = getScrollContainer(elementOrScrollContainer);
-    if (!scrollContainer) {
-      break;
-    }
-    scrollContainerSet.add(scrollContainer);
-    if (scrollContainer === documentElement) {
-      break;
-    }
-    elementOrScrollContainer = scrollContainer;
-  }
-  return scrollContainerSet;
-};

package/src/interaction/scroll/scroll_trap.js DELETED Viewed

@@ -1,44 +0,0 @@
-import { getStyle, setStyles } from "../../style/dom_styles.js";
-import { isScrollable } from "./is_scrollable.js";
-import { getSelfAndAncestorScrolls } from "./scroll_container.js";
-import { measureScrollbar } from "./scrollbar_size.js";
-export const trapScrollInside = (element) => {
-  const cleanupCallbackSet = new Set();
-  const lockScroll = (el) => {
-    const [scrollbarWidth, scrollbarHeight] = measureScrollbar(el);
-    // scrollbar-gutter would work but would display an empty blank space
-    const paddingRight = parseInt(getStyle(el, "padding-right"), 0);
-    const paddingTop = parseInt(getStyle(el, "padding-top"), 0);
-    const removeScrollLockStyles = setStyles(el, {
-      "padding-right": `${paddingRight + scrollbarWidth}px`,
-      "padding-top": `${paddingTop + scrollbarHeight}px`,
-      "overflow": "hidden",
-    });
-    cleanupCallbackSet.add(() => {
-      removeScrollLockStyles();
-    });
-  };
-  let previous = element.previousSibling;
-  while (previous) {
-    if (previous.nodeType === 1) {
-      if (isScrollable(previous)) {
-        lockScroll(previous);
-      }
-    }
-    previous = previous.previousSibling;
-  }
-  const selfAndAncestorScrolls = getSelfAndAncestorScrolls(element);
-  for (const selfOrAncestorScroll of selfAndAncestorScrolls) {
-    const elementToScrollLock = selfOrAncestorScroll.scrollContainer;
-    lockScroll(elementToScrollLock);
-  }
-  return () => {
-    for (const cleanupCallback of cleanupCallbackSet) {
-      cleanupCallback();
-    }
-    cleanupCallbackSet.clear();
-  };
-};

package/src/interaction/scroll/scrollbar_size.js DELETED Viewed

@@ -1,20 +0,0 @@
-// https://davidwalsh.name/detect-scrollbar-width
-export const measureScrollbar = (scrollableElement) => {
-  const hasXScrollbar =
-    scrollableElement.scrollHeight > scrollableElement.clientHeight;
-  const hasYScrollbar =
-    scrollableElement.scrollWidth > scrollableElement.clientWidth;
-  if (!hasXScrollbar && !hasYScrollbar) {
-    return [0, 0];
-  }
-  const scrollDiv = document.createElement("div");
-  scrollDiv.style.cssText = `position: absolute; width: 100px; height: 100px; overflow: scroll; pointer-events: none; visibility: hidden;`;
-  scrollableElement.appendChild(scrollDiv);
-  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  const scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
-  scrollableElement.removeChild(scrollDiv);
-  return [
-    hasXScrollbar ? scrollbarWidth : 0,
-    hasYScrollbar ? scrollbarHeight : 0,
-  ];
-};