@wordpress/components/build/scroll-lock/index.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/scroll-lock/index.tsx"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/*\n * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.\n * Save scroll top so we can restore it after locking scroll.\n *\n * NOTE: It would be cleaner and possibly safer to find a localized solution such\n * as preventing default on certain touchmove events.\n */\nlet previousScrollTop = 0;\nfunction setLocked(locked) {\n  const scrollingElement = document.scrollingElement || document.body;\n  if (locked) {\n    previousScrollTop = scrollingElement.scrollTop;\n  }\n  const methodName = locked ? 'add' : 'remove';\n  scrollingElement.classList[methodName]('lockscroll');\n\n  // Adding the class to the document element seems to be necessary in iOS.\n  document.documentElement.classList[methodName]('lockscroll');\n  if (!locked) {\n    scrollingElement.scrollTop = previousScrollTop;\n  }\n}\nlet lockCounter = 0;\n\n/**\n * ScrollLock is a content-free React component for declaratively preventing\n * scroll bleed from modal UI to the page body. This component applies a\n * `lockscroll` class to the `document.documentElement` and\n * `document.scrollingElement` elements to stop the body from scrolling. When it\n * is present, the lock is applied.\n *\n * ```jsx\n * import { ScrollLock, Button } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyScrollLock = () => {\n *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );\n *\n *   const toggleLock = () => {\n *     setIsScrollLocked( ( locked ) => ! locked ) );\n *   };\n *\n *   return (\n *     <div>\n *       <Button variant=\"secondary\" onClick={ toggleLock }>\n *         Toggle scroll lock\n *       </Button>\n *       { isScrollLocked && <ScrollLock /> }\n *       <p>\n *         Scroll locked:\n *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>\n *       </p>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function ScrollLock() {\n  useEffect(() => {\n    if (lockCounter === 0) {\n      setLocked(true);\n    }\n    ++lockCounter;\n    return () => {\n      if (lockCounter === 1) {\n        setLocked(false);\n      }\n      --lockCounter;\n    };\n  }, []);\n  return null;\n}\nexport default ScrollLock;"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0B;AAS1B,IAAI,oBAAoB;AACxB,SAAS,UAAU,QAAQ;AACzB,QAAM,mBAAmB,SAAS,oBAAoB,SAAS;AAC/D,MAAI,QAAQ;AACV,wBAAoB,iBAAiB;AAAA,EACvC;AACA,QAAM,aAAa,SAAS,QAAQ;AACpC,mBAAiB,UAAU,UAAU,EAAE,YAAY;AAGnD,WAAS,gBAAgB,UAAU,UAAU,EAAE,YAAY;AAC3D,MAAI,CAAC,QAAQ;AACX,qBAAiB,YAAY;AAAA,EAC/B;AACF;AACA,IAAI,cAAc;AAmCX,SAAS,aAAa;AAC3B,gCAAU,MAAM;AACd,QAAI,gBAAgB,GAAG;AACrB,gBAAU,IAAI;AAAA,IAChB;AACA,MAAE;AACF,WAAO,MAAM;AACX,UAAI,gBAAgB,GAAG;AACrB,kBAAU,KAAK;AAAA,MACjB;AACA,QAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AACA,IAAO,sBAAQ;",
  "names": []
}