intergalactic 15.126.0-prerelease.1 → 15.126.0-prerelease.3

package/utils/lib/use/useFocusLock.mjs

@@ -1,146 +1,266 @@
-import g from "@babel/runtime/helpers/esm/typeof";
-import q from "@babel/runtime/helpers/esm/toConsumableArray";
-import C from "../canUseDOM.mjs";
-import B from "react";
-import { isFocusInside as M } from "../focus-lock/isFocusInside.mjs";
-import { setFocus as L } from "../focus-lock/setFocus.mjs";
-import { getFocusableIn as w } from "../focus-lock/getFocusableIn.mjs";
-import { addFocusBorders as F, removeFocusBorders as K } from "../focus-lock/focusBorders.mjs";
-var l = {
-  blur: "focusout-intergalactic-focus-lock-synthetic",
-  keydown: "keydown-intergalactic-focus-lock-synthetic"
-}, T = function(r) {
-  var e = r, u = e.type;
-  if (!(u in l)) {
-    var n = Object.keys(l).join(", ");
-    throw new Error("Unable to make synthetic event for ".concat(u, ", ").concat(n, " are supported"));
+import _typeof from "@babel/runtime/helpers/typeof";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import canUseDOM from "../canUseDOM.mjs";
+import LocalReact from 'react';
+import { isFocusInside } from "../focus-lock/isFocusInside.mjs";
+import { setFocus } from "../focus-lock/setFocus.mjs";
+import { getFocusableIn } from "../focus-lock/getFocusableIn.mjs";
+import { addFocusBorders, removeFocusBorders } from "../focus-lock/focusBorders.mjs";
+export { isFocusInside, setFocus };
+var syntheticEvents = {
+  blur: 'focusout-intergalactic-focus-lock-synthetic',
+  keydown: 'keydown-intergalactic-focus-lock-synthetic'
+};
+/**
+ * Synthetic event are special events that always bypass all propagation guards and reaches focus lock event listeners.
+ * You should always prevent native event propagation in order to prevent focus enforcing double calls.
+ */
+export var makeFocusLockSyntheticEvent = function makeFocusLockSyntheticEvent(baseEvent) {
+  var event = baseEvent;
+  var type = event.type;
+  if (!(type in syntheticEvents)) {
+    var supported = Object.keys(syntheticEvents).join(', ');
+    throw new Error("Unable to make synthetic event for ".concat(type, ", ").concat(supported, " are supported"));
   }
-  var o = new Event(l[u], {
-    bubbles: !0
+  var syntheticEvent = new Event(syntheticEvents[type], {
+    bubbles: true
+  });
+  Object.defineProperty(syntheticEvent, 'target', {
+    writable: false,
+    value: event.target
   });
-  return Object.defineProperty(o, "target", {
-    writable: !1,
-    value: e.target
-  }), Object.defineProperty(o, "relatedTarget", {
-    writable: !1,
-    value: e.relatedTarget
-  }), o;
-}, N = function(r, e, u) {
-  S(r), r.useEffect(function() {
-    var n = u == null ? void 0 : u.current;
-    return n && !e && w(n).length > 0 && F(n), function() {
-      n && K(n);
+  Object.defineProperty(syntheticEvent, 'relatedTarget', {
+    writable: false,
+    value: event.relatedTarget
+  });
+  return syntheticEvent;
+};
+var useFocusBorders = function useFocusBorders(React, disabled, trapRef) {
+  useUniqueIdHookMock(React);
+  React.useEffect(function () {
+    var trapNode = trapRef === null || trapRef === void 0 ? void 0 : trapRef.current;
+    if (trapNode && !disabled && getFocusableIn(trapNode).length > 0) {
+      addFocusBorders(trapNode);
+    }
+    return function () {
+      if (trapNode) {
+        removeFocusBorders(trapNode);
+      }
     };
-  }, [e]);
-}, P = 0, x = function(r) {
-  return "".concat(r, "-").concat(Math.random().toString(36).slice(2), "-").concat(P++);
-}, O = 5, h = "__intergalactic_focus_lock_hook_react_v_respectful", p = /* @__PURE__ */ new Set(), _ = /* @__PURE__ */ new Set(), c = [], G = function() {
-}, S = function(r) {
-  r.useState(void 0);
-  var e = C() ? r.useLayoutEffect : r.useEffect;
-  e(G, []);
-}, U = function(r, e, u, n) {
-  var o = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, f = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : !1, d = arguments.length > 6 ? arguments[6] : void 0;
-  N(r, o, e);
-  var a = r.useRef(null), v = r.useRef(void 0), k = r.useCallback(function(t) {
-    var i = t.target, m = t.relatedTarget;
-    setTimeout(function() {
-      i && (a.current || (a.current = i));
-    }, 0), v.current !== "mouse" && Promise.resolve().then(function() {
-      if (e.current) {
-        var b = c[c.length - 1];
-        if (!(b && b !== e.current)) {
-          var A = b ? [e.current] : [e.current].concat(q(p));
-          M(A, m) || g(n) === "object" && n !== null && n !== void 0 && n.current && M(n.current) || (i && m && L(e.current, i, m), d == null || d(t));
-        }
+  }, [disabled]);
+};
+var uniqueId = 0;
+var getUniqueId = function getUniqueId(prefix) {
+  return "".concat(prefix, "-").concat(Math.random().toString(36).slice(2), "-").concat(uniqueId++);
+};
+
+/**
+ * # Focus lock hook merging
+ * In some cases same page might contain different versions of components.
+ * In such cases, we need to ensure that only one version of focus lock hook is used.
+ * So, it's why we have `useFocusLockHook` function that is wrapped into `useFocusLock`.
+ *
+ * While evaluating this file code, we check if global focus lock hook is already defined.
+ * If it's defined, we replace it ONLY if our version is higher and no components currently use it.
+ * The last condition is very important because we are unable to replace React hook without reimplementing
+ * React hooks lifecycle in some kind of wrapper.
+ *
+ * ## Versioning
+ * Such versions merging requires us to keep hook api backward compatible.
+ * When hook logic changes, the variable `focusLockVersion` should be incremented.
+ *
+ * Version update `1 -> 2`. Fixed call `safeMoveFocusInside` in `handleFocusIn` with correct second parameter (focusCameFrom instead of event.target)
+ * Version update `2 -> 3`. Fixed React version isolation in nested hooks (`useFocusBorders`, `useUniqueId`).
+ * Version update `3 -> 4`. Fixed lock for correct working with iframes in modal
+ * Version update `4 -> 5`. Changed placements for border - now they wrap trap node
+ *
+ * Initially (for a several versions) key was `__intergalactic_focus_lock_hook_`.
+ * Making it respect react version required to change key. So key was changed to `__intergalactic_focus_lock_hook_react_v_respectful`.
+ *
+ * ## React hooks order
+ * When updating from version 2 to version 3 `useUniqueId` hook was removed.
+ * Due to replacing useFocusLock hook in runtime, the order of hooks must be preserved.
+ * So, useUniqueIdHookMock helps to preserve hooks order when hook is being replaced from version 2 to version 3.
+ *
+ * If new update requires to remove some hooks – add mocks instead of them.
+ * If new update requires to add some hooks and no workaround with current hooks list is possible – probably focus lock hook key should be changed.
+ */
+var focusLockVersion = 5;
+var globalFocusLockHookKey = '__intergalactic_focus_lock_hook_react_v_respectful';
+var focusLockAllTraps = new Set();
+var focusLockUsedInMountedComponents = new Set();
+/** Focus master is a special mode in which focus lock might work.
+ * Normally, focus lock hook allows user focus to move freely between
+ * all active focus traps. When component provides `focusMaster=true`
+ * parameter, it says that it doesn't want to share focus with other traps.
+ * It is very useful for a big components like modals or side-bars that
+ * also have some visual backdrop.
+ * The last element in focus masters stack is considered as a current focus master.
+ */
+var focusMastersStack = [];
+var noop = function noop() {};
+var useUniqueIdHookMock = function useUniqueIdHookMock(React) {
+  React.useState(undefined);
+  var useEnhancedEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
+  useEnhancedEffect(noop, []);
+};
+var useFocusLockHook = function useFocusLockHook(React, trapRef, autoFocus, returnFocusTo) {
+  var disabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var focusMaster = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var onFocusOut = arguments.length > 6 ? arguments[6] : undefined;
+  useFocusBorders(React, disabled, trapRef);
+  var autoTriggerRef = React.useRef(null);
+  var lastUserInteractionRef = React.useRef(undefined);
+  var handleFocusOut = React.useCallback(function (event) {
+    var focusCameFrom = event.target;
+    var focusMovedTo = event.relatedTarget;
+    setTimeout(function () {
+      if (!focusCameFrom) return;
+      if (autoTriggerRef.current) return;
+      autoTriggerRef.current = focusCameFrom;
+    }, 0);
+    if (lastUserInteractionRef.current === 'mouse') return;
+    Promise.resolve().then(function () {
+      if (!trapRef.current) return;
+      var currentFocusMaster = focusMastersStack[focusMastersStack.length - 1];
+      if (currentFocusMaster && currentFocusMaster !== trapRef.current) return;
+      var trapNodes = currentFocusMaster ? [trapRef.current] : [trapRef.current].concat(_toConsumableArray(focusLockAllTraps));
+      if (isFocusInside(trapNodes, focusMovedTo)) return;
+      if (_typeof(returnFocusTo) === 'object' && returnFocusTo !== null && returnFocusTo !== void 0 && returnFocusTo.current && isFocusInside(returnFocusTo.current)) return;
+      if (focusCameFrom && focusMovedTo) {
+        setFocus(trapRef.current, focusCameFrom, focusMovedTo);
       }
+      onFocusOut === null || onFocusOut === void 0 ? void 0 : onFocusOut(event);
     });
-  }, [d]), y = r.useCallback(function() {
-    v.current = "mouse";
-  }, []), E = r.useCallback(function() {
-    v.current = "keyboard";
-  }, []), j = r.useCallback(function() {
-    var t = e.current;
-    if (!(t && !M(t))) {
-      var i = c.length;
-      if (g(n) === "object" && n !== null && n !== void 0 && n.current) {
-        var m = n == null ? void 0 : n.current;
-        setTimeout(function() {
-          i !== c.length && L(m, t);
-        }, 0);
-      }
-      if (n === "auto" && a.current) {
-        var b = a.current;
-        setTimeout(function() {
-          i !== c.length && L(b, t);
-        }, 0);
-      }
+  }, [onFocusOut]);
+  var handleMouseEvent = React.useCallback(function () {
+    lastUserInteractionRef.current = 'mouse';
+  }, []);
+  var handleKeyboardEvent = React.useCallback(function () {
+    lastUserInteractionRef.current = 'keyboard';
+  }, []);
+  var returnFocus = React.useCallback(function () {
+    var trapNode = trapRef.current;
+    if (trapNode && !isFocusInside(trapNode)) return;
+    var focusMastersStackCount = focusMastersStack.length;
+    if (_typeof(returnFocusTo) === 'object' && returnFocusTo !== null && returnFocusTo !== void 0 && returnFocusTo.current) {
+      var returnFocusNode = returnFocusTo === null || returnFocusTo === void 0 ? void 0 : returnFocusTo.current;
+      setTimeout(function () {
+        if (focusMastersStackCount !== focusMastersStack.length) {
+          setFocus(returnFocusNode, trapNode);
+        }
+      }, 0);
     }
-  }, [n]);
-  r.useEffect(function() {
-    if (!(g(e) !== "object" || e === null)) {
-      var t = e.current;
-      if (t)
-        return p.add(t), function() {
-          t && p.delete(t);
-        };
+    if (returnFocusTo === 'auto' && autoTriggerRef.current) {
+      var autoTrigger = autoTriggerRef.current;
+      setTimeout(function () {
+        if (focusMastersStackCount !== focusMastersStack.length) {
+          setFocus(autoTrigger, trapNode);
+        }
+      }, 0);
     }
-  }, [o]), r.useEffect(function() {
-    if (!o && C() && e.current) {
-      var t = Array.from(e.current.children).flatMap(function(i) {
-        return w(i);
-      });
-      if (!(t.length === 0 && u !== "enforced"))
-        return document.body.addEventListener("focusout", k), document.body.addEventListener(l.blur, k), document.body.addEventListener("mousedown", y), document.body.addEventListener("touchstart", y), document.body.addEventListener("keydown", E), document.body.addEventListener(l.keydown, E), u && setTimeout(function() {
-          L(e.current, g(n) === "object" ? n == null ? void 0 : n.current : document.body);
-        }, 0), function() {
-          document.body.removeEventListener("focusout", k), document.body.removeEventListener(l.blur, k), document.body.removeEventListener("mousedown", y), document.body.removeEventListener("touchstart", y), document.body.removeEventListener("keydown", E), document.body.removeEventListener(l.keydown, E), j(), a.current = null;
-        };
+  }, [returnFocusTo]);
+  React.useEffect(function () {
+    if (_typeof(trapRef) !== 'object' || trapRef === null) return;
+    var node = trapRef.current;
+    if (!node) return;
+    focusLockAllTraps.add(node);
+    return function () {
+      if (!node) return;
+      focusLockAllTraps["delete"](node);
+    };
+  }, [disabled]);
+  React.useEffect(function () {
+    if (disabled) return;
+    if (!canUseDOM()) return;
+    if (!trapRef.current) return;
+    var focusableChildren = Array.from(trapRef.current.children).flatMap(function (node) {
+      return getFocusableIn(node);
+    });
+    if (focusableChildren.length === 0 && autoFocus !== 'enforced') return;
+    document.body.addEventListener('focusout', handleFocusOut);
+    document.body.addEventListener(syntheticEvents.blur, handleFocusOut);
+    document.body.addEventListener('mousedown', handleMouseEvent);
+    document.body.addEventListener('touchstart', handleMouseEvent);
+    document.body.addEventListener('keydown', handleKeyboardEvent);
+    document.body.addEventListener(syntheticEvents.keydown, handleKeyboardEvent);
+    if (autoFocus) {
+      setTimeout(function () {
+        setFocus(trapRef.current, _typeof(returnFocusTo) === 'object' ? returnFocusTo === null || returnFocusTo === void 0 ? void 0 : returnFocusTo.current : document.body);
+      }, 0);
     }
-  }, [o, u, n, j]), r.useEffect(function() {
-    if (!(g(e) !== "object" || e === null) && !o && C() && e.current) {
-      var t = Array.from(e.current.children).flatMap(function(i) {
-        return w(i);
-      });
-      if (t.length !== 0)
-        return f && c.push(e.current), function() {
-          f && (c[c.length - 1] === e.current ? c.pop() : c.splice(c.indexOf(e.current), 1));
-        };
+    return function () {
+      document.body.removeEventListener('focusout', handleFocusOut);
+      document.body.removeEventListener(syntheticEvents.blur, handleFocusOut);
+      document.body.removeEventListener('mousedown', handleMouseEvent);
+      document.body.removeEventListener('touchstart', handleMouseEvent);
+      document.body.removeEventListener('keydown', handleKeyboardEvent);
+      document.body.removeEventListener(syntheticEvents.keydown, handleKeyboardEvent);
+      returnFocus();
+      autoTriggerRef.current = null;
+    };
+  }, [disabled, autoFocus, returnFocusTo, returnFocus]);
+  React.useEffect(function () {
+    if (_typeof(trapRef) !== 'object' || trapRef === null) return;
+    if (disabled) return;
+    if (!canUseDOM()) return;
+    if (!trapRef.current) return;
+    var focusableChildren = Array.from(trapRef.current.children).flatMap(function (node) {
+      return getFocusableIn(node);
+    });
+    if (focusableChildren.length === 0) return;
+    if (focusMaster) {
+      focusMastersStack.push(trapRef.current);
     }
-  }, [o, f]), S(r), r.useEffect(function() {
-    var t = x("focus-lock-consumer");
-    if (!o)
-      return _.add(t), function() {
-        _.delete(t);
-      };
-  }, [o]);
-}, I = function() {
-  globalThis[h] = {
-    hook: U,
-    version: O,
-    usedInComponents: _
+    return function () {
+      if (!focusMaster) return;
+      if (focusMastersStack[focusMastersStack.length - 1] === trapRef.current) {
+        focusMastersStack.pop();
+      } else {
+        focusMastersStack.splice(focusMastersStack.indexOf(trapRef.current), 1);
+      }
+    };
+  }, [disabled, focusMaster]);
+  useUniqueIdHookMock(React);
+  React.useEffect(function () {
+    var id = getUniqueId('focus-lock-consumer');
+    if (disabled) return;
+    focusLockUsedInMountedComponents.add(id);
+    return function () {
+      focusLockUsedInMountedComponents["delete"](id);
+    };
+  }, [disabled]);
+};
+var establishHookAsGlobal = function establishHookAsGlobal() {
+  globalThis[globalFocusLockHookKey] = {
+    hook: useFocusLockHook,
+    version: focusLockVersion,
+    usedInComponents: focusLockUsedInMountedComponents
   };
 };
-if (!globalThis[h])
-  I();
-else if (typeof globalThis[h].version != "number")
-  I();
-else {
-  var H = globalThis[h], z = H.version, D = H.usedInComponents;
-  O > z && D.size === 0 && I();
+if (!globalThis[globalFocusLockHookKey]) {
+  establishHookAsGlobal();
+} else if (typeof globalThis[globalFocusLockHookKey].version !== 'number') {
+  establishHookAsGlobal();
+} else {
+  var _globalFocusLockHookK = globalThis[globalFocusLockHookKey],
+    theirVersion = _globalFocusLockHookK.version,
+    usedInComponents = _globalFocusLockHookK.usedInComponents;
+  if (focusLockVersion > theirVersion && usedInComponents.size === 0) {
+    establishHookAsGlobal();
+  }
 }
-var R = function(r, e, u) {
-  var n, o, f = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, d = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, a = arguments.length > 5 ? arguments[5] : void 0, v = (n = (o = globalThis[h]) === null || o === void 0 ? void 0 : o.hook) !== null && n !== void 0 ? n : U;
-  return v(B, r, e, u, f, d, a);
-}, ee = function(r) {
-  return Array.from(r.children).flatMap(function(e) {
-    return w(e);
-  }).length > 0;
+export var useFocusLock = function useFocusLock(trapRef, autoFocus, returnFocusTo) {
+  var _globalFocusLockHookK2, _globalFocusLockHookK3;
+  var disabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var focusMaster = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var onFocusOut = arguments.length > 5 ? arguments[5] : undefined;
+  var hook = (_globalFocusLockHookK2 = (_globalFocusLockHookK3 = globalThis[globalFocusLockHookKey]) === null || _globalFocusLockHookK3 === void 0 ? void 0 : _globalFocusLockHookK3.hook) !== null && _globalFocusLockHookK2 !== void 0 ? _globalFocusLockHookK2 : useFocusLockHook;
+  return hook(LocalReact, trapRef, autoFocus, returnFocusTo, disabled, focusMaster, onFocusOut);
 };
-export {
-  ee as hasFocusableIn,
-  M as isFocusInside,
-  T as makeFocusLockSyntheticEvent,
-  L as setFocus,
-  R as useFocusLock
+export var hasFocusableIn = function hasFocusableIn(element) {
+  return Array.from(element.children).flatMap(function (node) {
+    return getFocusableIn(node);
+  }).length > 0;
 };
+//# sourceMappingURL=useFocusLock.mjs.map

package/utils/lib/use/usePreventScroll.mjs

@@ -1,43 +1,70 @@
-import u from "react";
-import a from "../canUseDOM.mjs";
-import { useUID as b } from "../uniqueID.mjs";
-function g() {
-  var t;
-  if (!a()) return 0;
-  var e = document.createElement("div");
-  e.style.visibility = "hidden", e.style.width = "100px", e.style.msOverflowStyle = "scrollbar", document.body.appendChild(e);
-  var n = e.offsetWidth;
-  e.style.overflow = "scroll";
-  var r = document.createElement("div");
-  r.style.width = "100%", e.appendChild(r);
-  var i = r.offsetWidth;
-  return (t = e.parentNode) === null || t === void 0 || t.removeChild(e), n - i;
+import React from 'react';
+import canUseDOM from "../canUseDOM.mjs";
+import { useUID } from "../uniqueID.mjs";
+export function getScrollbarWidth() {
+  var _outer$parentNode;
+  if (!canUseDOM()) return 0;
+  var outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  // @ts-expect-error
+  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  document.body.appendChild(outer);
+  var widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+  var inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+  var widthWithScroll = inner.offsetWidth;
+  (_outer$parentNode = outer.parentNode) === null || _outer$parentNode === void 0 ? void 0 : _outer$parentNode.removeChild(outer);
+  return widthNoScroll - widthWithScroll;
 }
-function f(t) {
-  return Number.isNaN(Number(t)) ? Number.parseInt(t, 10) : Number(t);
+function getIntValueFromCss(value) {
+  return !Number.isNaN(Number(value)) ? Number(value) : Number.parseInt(value, 10);
 }
-var d = /* @__PURE__ */ new Set(), o = {
+var scrollPreventers = new Set();
+var lockedBodyStyles = {
   paddingRight: null,
   overflow: null,
   boxSizing: null
 };
-function w() {
-  var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !0, e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, n = u.useMemo(g, [g]), r = b("scroll-preventer-");
-  u.useEffect(function() {
-    if (!e && !(!a() || !t) && (d.add(r), !(d.size > 1))) {
-      var i = window.getComputedStyle(document.body), m = i.overflow, s = i.paddingRight, c = i.boxSizing;
-      o.paddingRight = s, o.overflow = m, o.boxSizing = c;
-      var v = f(s), l = f(document.body.style.paddingRight);
-      l !== n && (l = 0), document.body.style.overflow = "hidden", document.body.style.paddingRight = n + (v - l) + "px", document.body.style.boxSizing = "border-box";
+export default function usePreventScroll() {
+  var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var disabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var scrollbarWidth = React.useMemo(getScrollbarWidth, [getScrollbarWidth]);
+  var id = useUID('scroll-preventer-');
+  React.useEffect(function () {
+    if (disabled) return;
+    if (!canUseDOM() || !visible) return;
+    scrollPreventers.add(id);
+    if (scrollPreventers.size > 1) return;
+    var _window$getComputedSt = window.getComputedStyle(document.body),
+      overflow = _window$getComputedSt.overflow,
+      paddingRight = _window$getComputedSt.paddingRight,
+      boxSizing = _window$getComputedSt.boxSizing;
+    lockedBodyStyles.paddingRight = paddingRight;
+    lockedBodyStyles.overflow = overflow;
+    lockedBodyStyles.boxSizing = boxSizing;
+    var intPaddingRight = getIntValueFromCss(paddingRight);
+    var intPaddingRightFromStyle = getIntValueFromCss(document.body.style.paddingRight);
+    // Detected own style for window inside window
+    if (intPaddingRightFromStyle !== scrollbarWidth) {
+      intPaddingRightFromStyle = 0;
     }
-  }, [t, r, e]), u.useEffect(function() {
-    if (!e && !(!a() || !t))
-      return function() {
-        d.delete(r), d.size === 0 && (document.body.style.overflow = o.overflow, document.body.style.paddingRight = o.paddingRight, document.body.style.boxSizing = o.boxSizing);
-      };
-  }, [t, r, e]);
+    document.body.style.overflow = 'hidden';
+    document.body.style.paddingRight = scrollbarWidth + (intPaddingRight - intPaddingRightFromStyle) + 'px';
+    document.body.style.boxSizing = 'border-box';
+  }, [visible, id, disabled]);
+  React.useEffect(function () {
+    if (disabled) return;
+    if (!canUseDOM() || !visible) return;
+    return function () {
+      scrollPreventers["delete"](id);
+      if (scrollPreventers.size !== 0) return;
+      document.body.style.overflow = lockedBodyStyles.overflow;
+      document.body.style.paddingRight = lockedBodyStyles.paddingRight;
+      document.body.style.boxSizing = lockedBodyStyles.boxSizing;
+    };
+  }, [visible, id, disabled]);
 }
-export {
-  w as default,
-  g as getScrollbarWidth
-};
+//# sourceMappingURL=usePreventScroll.mjs.map

package/utils/lib/useCssVariable.mjs

@@ -1,33 +1,46 @@
-import b from "@babel/runtime/helpers/esm/defineProperty";
-import s from "@babel/runtime/helpers/esm/objectSpread2";
-import V from "@babel/runtime/helpers/esm/slicedToArray";
-import u from "react";
-import R from "./canUseDOM.mjs";
-import { useForkRef as S } from "./ref.mjs";
-import { useContextTokens as y } from "./ThemeProvider.mjs";
-var C = function(e, n, a) {
-  var r = y(), t = u.useCallback(function() {
-    var l;
-    if (r != null && r[e]) return r[e];
-    if (!R()) return n;
-    var p = (l = a == null ? void 0 : a.current) !== null && l !== void 0 ? l : document.documentElement, d = getComputedStyle(p);
-    return d.getPropertyValue(e) || n;
-  }, [e, a, n, r]), o = u.useMemo(t, [t]), v = u.useState(o), c = V(v, 2), m = c[0], i = c[1];
-  return u.useEffect(function() {
-    return i(t);
-  }, [t]), m;
-}, T = function(e) {
-  var n = e.variable, a = e.fallback, r = e.prop, t = e.map;
-  return function(o) {
-    var v = o, c = v.ref, m = u.useRef(), i = C(n, a, m), l = u.useMemo(function() {
-      return t ? t(i) : i;
-    }, [t, i]);
-    return s(s({}, o), {}, b({
-      ref: S(c, m)
-    }, r, o[r] === void 0 ? l : o[r]));
-  };
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import canUseDOM from "./canUseDOM.mjs";
+import { useForkRef } from "./ref.mjs";
+import { useContextTokens } from "./ThemeProvider.mjs";
+export var useCssVariable = function useCssVariable(name, fallbackValue, ref) {
+  var contextTheme = useContextTokens();
+  var getValue = React.useCallback(function () {
+    var _ref$current;
+    if (contextTheme !== null && contextTheme !== void 0 && contextTheme[name]) return contextTheme[name];
+    if (!canUseDOM()) return fallbackValue;
+    var element = (_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : document.documentElement;
+    var computedStyles = getComputedStyle(element);
+    return computedStyles.getPropertyValue(name) || fallbackValue;
+  }, [name, ref, fallbackValue, contextTheme]);
+  var initialValue = React.useMemo(getValue, [getValue]);
+  var _React$useState = React.useState(initialValue),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  React.useEffect(function () {
+    return setValue(getValue);
+  }, [getValue]);
+  return value;
 };
-export {
-  T as cssVariableEnhance,
-  C as useCssVariable
+export var cssVariableEnhance = function cssVariableEnhance(_ref) {
+  var variable = _ref.variable,
+    fallback = _ref.fallback,
+    prop = _ref.prop,
+    map = _ref.map;
+  return function (props) {
+    var _ref2 = props,
+      ref = _ref2.ref;
+    var nodeRef = React.useRef();
+    var variableValue = useCssVariable(variable, fallback, nodeRef);
+    var mappedValue = React.useMemo(function () {
+      return map ? map(variableValue) : variableValue;
+    }, [map, variableValue]);
+    return _objectSpread(_objectSpread({}, props), {}, _defineProperty({
+      ref: useForkRef(ref, nodeRef)
+    }, prop, props[prop] === undefined ? mappedValue : props[prop]));
+  };
 };
+//# sourceMappingURL=useCssVariable.mjs.map