@opengovsg/oui 0.0.28 → 0.0.29

package/dist/cjs/navbar/navbar-menu/item.cjs

@@ -0,0 +1,44 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../../system/utils.cjs');
+var navbarContext = require('../navbar-context.cjs');
+var refs = require('../../system/react-utils/refs.cjs');
+
+const NavbarMenuItem = utils.forwardRef(
+  (props, ref) => {
+    const { className, children, isActive, ...otherProps } = props;
+    const domRef = refs.useDomRef(ref);
+    const { isMenuOpen, classNames } = navbarContext.useNavbarContext();
+    const renderProps = reactAriaComponents.useRenderProps({
+      className: reactAriaComponents.composeRenderProps(
+        className,
+        (className2, renderProps2) => ouiTheme.navbarMenuItemStyles({
+          className: ouiTheme.cn(classNames?.menuItem, className2),
+          ...renderProps2
+        })
+      ),
+      values: {
+        isActive: !!isActive
+      }
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref: domRef,
+        className: renderProps.className,
+        "data-active": ouiTheme.dataAttr(isActive),
+        "data-open": ouiTheme.dataAttr(isMenuOpen),
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+NavbarMenuItem.displayName = "NavbarMenuItem";
+
+exports.NavbarMenuItem = NavbarMenuItem;

package/dist/cjs/navbar/navbar-menu/menu.cjs

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Overlay = require('../../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.cjs');
+var reactAria = require('react-aria');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../../system/utils.cjs');
+var navbarContext = require('../navbar-context.cjs');
+var refs = require('../../system/react-utils/refs.cjs');
+
+const NavbarMenu = utils.forwardRef(
+  ({ className, children, portalContainer, style, onKeyDown, ...props }, ref) => {
+    const domRef = refs.useDomRef(ref);
+    const {
+      slots,
+      isMenuOpen,
+      height,
+      classNames,
+      setIsMenuOpen,
+      domRef: parentRef,
+      menuRef
+    } = navbarContext.useNavbarContext();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setIsMenuOpen(false);
+        menuRef.current?.focus();
+      }
+    };
+    if (!isMenuOpen) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Overlay.Overlay,
+      {
+        disableFocusManagement: true,
+        portalContainer: portalContainer ?? parentRef.current ?? void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            ref: domRef,
+            className: slots.menu?.({
+              className: ouiTheme.cn(classNames?.menu, className)
+            }),
+            "data-open": ouiTheme.dataAttr(isMenuOpen),
+            style: {
+              ...style,
+              // @ts-expect-error due to not having any type declaration for CSS variables in React style prop
+              "--navbar-height": typeof height === "number" ? `${height}px` : height
+            },
+            onKeyDown: reactAria.chain(handleKeyDown, onKeyDown),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+NavbarMenu.displayName = "NavbarMenu";
+
+exports.NavbarMenu = NavbarMenu;

package/dist/cjs/navbar/navbar-menu/toggle.cjs

@@ -0,0 +1,94 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var navbarContext = require('../navbar-context.cjs');
+var i18n = require('./i18n.cjs');
+
+const NavbarMenuToggle = ({
+  icon,
+  className,
+  onChange,
+  classNames,
+  size = "sm",
+  radius,
+  isIconOnly = true,
+  ...props
+}) => {
+  const {
+    slots,
+    classNames: contextClassNames,
+    isMenuOpen,
+    setIsMenuOpen,
+    menuRef,
+    position
+  } = navbarContext.useNavbarContext();
+  const shouldScrollToTop = (isMenuOpen2) => {
+    if (!isMenuOpen2 || position === "sticky" || typeof window === "undefined") {
+      return;
+    }
+    window.scrollTo({ top: 0, behavior: "instant" });
+  };
+  const formatMessage = reactAria.useMessageFormatter(i18n.i18nStrings);
+  const toggleStyles = $670gB$react.useMemo(() => {
+    return ouiTheme.buttonStyles({
+      variant: "unstyled",
+      size,
+      radius,
+      isIconOnly,
+      className: slots.toggle({
+        className: ouiTheme.cn(
+          contextClassNames?.toggle,
+          className ?? classNames?.toggle
+        )
+      })
+    });
+  }, [
+    className,
+    classNames?.toggle,
+    contextClassNames?.toggle,
+    isIconOnly,
+    radius,
+    size,
+    slots
+  ]);
+  const child = $670gB$react.useMemo(() => {
+    if (typeof icon === "function") {
+      return icon(isMenuOpen ?? false);
+    }
+    return icon || /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: slots.toggleIcon({
+          class: ouiTheme.cn(contextClassNames?.toggleIcon, classNames?.toggleIcon)
+        })
+      }
+    );
+  }, [
+    icon,
+    slots,
+    classNames?.toggleIcon,
+    contextClassNames?.toggleIcon,
+    isMenuOpen
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ToggleButton,
+    {
+      "aria-label": isMenuOpen ? formatMessage("closeMenu") : formatMessage("openMenu"),
+      ref: menuRef,
+      "data-open": ouiTheme.dataAttr(isMenuOpen),
+      className: toggleStyles,
+      isSelected: isMenuOpen,
+      onChange: reactAria.chain(onChange, shouldScrollToTop, setIsMenuOpen),
+      ...props,
+      children: child
+    }
+  );
+};
+
+exports.NavbarMenuToggle = NavbarMenuToggle;

package/dist/cjs/navbar/navbar.cjs

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAria = require('react-aria');
+var children = require('../system/react-utils/children.cjs');
+var utils = require('../system/utils.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var menu = require('./navbar-menu/menu.cjs');
+var useNavbar = require('./use-navbar.cjs');
+
+const Navbar = utils.forwardRef((props, ref) => {
+  const { children: children$1, ...otherProps } = props;
+  const context = useNavbar.useNavbar({ ...otherProps, ref });
+  const Component = context.Component;
+  const [childrenWithoutMenu, menu$1] = children.pickChildren(children$1, menu.NavbarMenu);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
+    menu$1
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(navbarContext.NavbarProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: context.isMenuOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...context.getBaseProps(), children: content }) }) });
+});
+Navbar.displayName = "Navbar";
+
+exports.Navbar = Navbar;

package/dist/cjs/navbar/use-navbar.cjs

@@ -0,0 +1,116 @@
+"use strict";
+"use client";
+'use strict';
+
+var $670gB$react = require('react');
+var usePreventScroll = require('../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/usePreventScroll.cjs');
+var utils$2 = require('@react-aria/utils');
+var utils$1 = require('@react-stately/utils');
+var useDeepCompare = require('use-deep-compare');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+function useNavbar(originalProps) {
+  const [
+    {
+      ref,
+      as,
+      height = "4rem",
+      shouldBlockScroll = true,
+      isMenuOpen: isMenuOpenProp,
+      isMenuDefaultOpen,
+      onMenuOpenChange = () => {
+      },
+      className,
+      classNames,
+      ...otherProps
+    },
+    variantProps
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.navbarStyles.variantKeys);
+  const Component = as || "nav";
+  const domRef = refs.useDomRef(ref);
+  const menuRef = $670gB$react.useRef(null);
+  const prevWidth = $670gB$react.useRef(0);
+  const navHeight = $670gB$react.useRef(0);
+  const handleMenuOpenChange = $670gB$react.useCallback(
+    (isOpen) => {
+      onMenuOpenChange(isOpen || false);
+    },
+    [onMenuOpenChange]
+  );
+  const [isMenuOpen, setIsMenuOpen] = utils$1.useControlledState(
+    isMenuOpenProp,
+    isMenuDefaultOpen ?? false,
+    handleMenuOpenChange
+  );
+  const updateWidth = $670gB$react.useCallback(() => {
+    if (domRef.current) {
+      const width = domRef.current.offsetWidth;
+      if (width !== prevWidth.current) {
+        prevWidth.current = width;
+      }
+    }
+  }, [domRef]);
+  usePreventScroll.usePreventScroll({
+    isDisabled: !(shouldBlockScroll && isMenuOpen)
+  });
+  utils$2.useResizeObserver({
+    ref: domRef,
+    onResize: () => {
+      const currentWidth = domRef.current?.offsetWidth;
+      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+      if (currentWidth && currentWidth + scrollWidth == prevWidth.current) {
+        return;
+      }
+      if (currentWidth !== prevWidth.current) {
+        updateWidth();
+        setIsMenuOpen(false);
+      }
+    }
+  });
+  $670gB$react.useEffect(() => {
+    updateWidth();
+    navHeight.current = domRef.current?.offsetHeight || 0;
+  }, [domRef, updateWidth]);
+  const slots = useDeepCompare.useDeepCompareMemo(
+    () => ouiTheme.navbarStyles({
+      ...variantProps
+    }),
+    [variantProps]
+  );
+  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  const getBaseProps = (props = {}) => ({
+    ...utils$2.mergeProps(otherProps, props),
+    "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
+    ref: domRef,
+    className: slots.base({ class: ouiTheme.cn(baseStyles, props?.className) }),
+    style: {
+      "--navbar-height": typeof height === "number" ? `${height}px` : height,
+      ...otherProps?.style,
+      ...props?.style
+    }
+  });
+  const getWrapperProps = (props = {}) => ({
+    ...props,
+    "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
+    className: slots.wrapper({
+      class: ouiTheme.cn(classNames?.wrapper, props?.className)
+    })
+  });
+  return {
+    Component,
+    slots,
+    domRef,
+    height,
+    isMenuOpen,
+    classNames,
+    setIsMenuOpen,
+    menuRef,
+    getBaseProps,
+    getWrapperProps,
+    position: variantProps.position ?? "sticky"
+  };
+}
+
+exports.useNavbar = useNavbar;

package/dist/cjs/node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var PortalProvider = require('./PortalProvider.cjs');
+var interactions = require('@react-aria/interactions');
+var focus = require('@react-aria/focus');
+var $670gB$react = require('react');
+var $4AOtR$reactdom = require('react-dom');
+var SSRProvider = require('../../../../../@react-aria_ssr@3.9.10_react@19.2.3/node_modules/@react-aria/ssr/dist/SSRProvider.cjs');
+require('@react-aria/utils');
+
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+const $337b884510726a0d$export$a2200b96afd16271 = /*#__PURE__*/ ($670gB$react).createContext(null);
+function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
+    let isSSR = (SSRProvider.useIsSSR)();
+    let { portalContainer: portalContainer = isSSR ? null : document.body, isExiting: isExiting } = props;
+    let [contain, setContain] = ($670gB$react.useState)(false);
+    let contextValue = ($670gB$react.useMemo)(()=>({
+            contain: contain,
+            setContain: setContain
+        }), [
+        contain,
+        setContain
+    ]);
+    let { getContainer: getContainer } = (PortalProvider.useUNSAFE_PortalContext)();
+    if (!props.portalContainer && getContainer) portalContainer = getContainer();
+    if (!portalContainer) return null;
+    let contents = props.children;
+    if (!props.disableFocusManagement) contents = /*#__PURE__*/ ($670gB$react).createElement((focus.FocusScope), {
+        restoreFocus: true,
+        contain: (props.shouldContainFocus || contain) && !isExiting
+    }, contents);
+    contents = /*#__PURE__*/ ($670gB$react).createElement($337b884510726a0d$export$a2200b96afd16271.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ ($670gB$react).createElement((interactions.ClearPressResponder), null, contents));
+    return /*#__PURE__*/ ($4AOtR$reactdom).createPortal(contents, portalContainer);
+}
+
+exports.Overlay = $337b884510726a0d$export$c6fdb837b070b4ff;
+exports.OverlayContext = $337b884510726a0d$export$a2200b96afd16271;

package/dist/cjs/node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/PortalProvider.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var $670gB$react = require('react');
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+const $96b38030c423d352$export$60d741e20e0aa309 = /*#__PURE__*/ ($670gB$react.createContext)({});
+function $96b38030c423d352$export$9fc1347d4195ccb3() {
+    var _useContext;
+    return (_useContext = ($670gB$react.useContext)($96b38030c423d352$export$60d741e20e0aa309)) !== null && _useContext !== void 0 ? _useContext : {};
+}
+
+exports.PortalContext = $96b38030c423d352$export$60d741e20e0aa309;
+exports.useUNSAFE_PortalContext = $96b38030c423d352$export$9fc1347d4195ccb3;

package/dist/cjs/node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/usePreventScroll.cjs

@@ -0,0 +1,208 @@
+'use strict';
+
+var utils = require('@react-aria/utils');
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+const $49c51c25361d4cd2$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let $49c51c25361d4cd2$var$preventScrollCount = 0;
+let $49c51c25361d4cd2$var$restore;
+function $49c51c25361d4cd2$export$ee0f7cc6afcd1c18(options = {}) {
+    let { isDisabled: isDisabled } = options;
+    (utils.useLayoutEffect)(()=>{
+        if (isDisabled) return;
+        $49c51c25361d4cd2$var$preventScrollCount++;
+        if ($49c51c25361d4cd2$var$preventScrollCount === 1) {
+            if ((utils.isIOS)()) $49c51c25361d4cd2$var$restore = $49c51c25361d4cd2$var$preventScrollMobileSafari();
+            else $49c51c25361d4cd2$var$restore = $49c51c25361d4cd2$var$preventScrollStandard();
+        }
+        return ()=>{
+            $49c51c25361d4cd2$var$preventScrollCount--;
+            if ($49c51c25361d4cd2$var$preventScrollCount === 0) $49c51c25361d4cd2$var$restore();
+        };
+    }, [
+        isDisabled
+    ]);
+}
+// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
+function $49c51c25361d4cd2$var$preventScrollStandard() {
+    let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    return (utils.chain)(scrollbarWidth > 0 && // Use scrollbar-gutter when supported because it also works for fixed positioned elements.
+    ('scrollbarGutter' in document.documentElement.style ? $49c51c25361d4cd2$var$setStyle(document.documentElement, 'scrollbarGutter', 'stable') : $49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${scrollbarWidth}px`)), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'overflow', 'hidden'));
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
+//    zooming or when an element contains text selection, which may allow scrolling in some cases.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents 
+//    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
+//    ourselves, without scrolling the whole page.
+function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
+    let scrollable;
+    let allowTouchMove = false;
+    let onTouchStart = (e)=>{
+        // Store the nearest scrollable parent element from the element that the user touched.
+        let target = e.target;
+        scrollable = (utils.isScrollable)(target) ? target : (utils.getScrollParent)(target, true);
+        allowTouchMove = false;
+        // If the target is selected, don't preventDefault in touchmove to allow user to adjust selection.
+        let selection = target.ownerDocument.defaultView.getSelection();
+        if (selection && !selection.isCollapsed && selection.containsNode(target, true)) allowTouchMove = true;
+        // If this is a focused input element with a selected range, allow user to drag the selection handles.
+        if ('selectionStart' in target && 'selectionEnd' in target && target.selectionStart < target.selectionEnd && target.ownerDocument.activeElement === target) allowTouchMove = true;
+    };
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead.
+    // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
+    let style = document.createElement('style');
+    style.textContent = `
+@layer {
+  * {
+    overscroll-behavior: contain;
+  }
+}`.trim();
+    document.head.prepend(style);
+    let onTouchMove = (e)=>{
+        // Allow pinch-zooming.
+        if (e.touches.length === 2 || allowTouchMove) return;
+        // Prevent scrolling the window.
+        if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+            e.preventDefault();
+            return;
+        }
+        // overscroll-behavior should prevent scroll chaining, but currently does not
+        // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+        // This checks that both the width and height do not overflow, otherwise we might
+        // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
+        // the element will prevent vertical page scrolling. We can't add that automatically
+        // because it must be set before the touchstart event.
+        if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) e.preventDefault();
+    };
+    let onBlur = (e)=>{
+        let target = e.target;
+        let relatedTarget = e.relatedTarget;
+        if (relatedTarget && (utils.willOpenKeyboard)(relatedTarget)) {
+            // Focus without scrolling the whole page, and then scroll into view manually.
+            relatedTarget.focus({
+                preventScroll: true
+            });
+            $49c51c25361d4cd2$var$scrollIntoViewWhenReady(relatedTarget, (utils.willOpenKeyboard)(target));
+        } else if (!relatedTarget) {
+            var _target_parentElement;
+            // When tapping the Done button on the keyboard, focus moves to the body.
+            // FocusScope will then restore focus back to the input. Later when tapping
+            // the same input again, it is already focused, so no blur event will fire,
+            // resulting in the flow above never running and Safari's native scrolling occurring.
+            // Instead, move focus to the parent focusable element (e.g. the dialog).
+            let focusable = (_target_parentElement = target.parentElement) === null || _target_parentElement === void 0 ? void 0 : _target_parentElement.closest('[tabindex]');
+            focusable === null || focusable === void 0 ? void 0 : focusable.focus({
+                preventScroll: true
+            });
+        }
+    };
+    // Override programmatic focus to scroll into view without scrolling the whole page.
+    let focus = HTMLElement.prototype.focus;
+    HTMLElement.prototype.focus = function(opts) {
+        // Track whether the keyboard was already visible before.
+        let wasKeyboardVisible = document.activeElement != null && (utils.willOpenKeyboard)(document.activeElement);
+        // Focus the element without scrolling the page.
+        focus.call(this, {
+            ...opts,
+            preventScroll: true
+        });
+        if (!opts || !opts.preventScroll) $49c51c25361d4cd2$var$scrollIntoViewWhenReady(this, wasKeyboardVisible);
+    };
+    let removeEvents = (utils.chain)($49c51c25361d4cd2$var$addEvent(document, 'touchstart', onTouchStart, {
+        passive: false,
+        capture: true
+    }), $49c51c25361d4cd2$var$addEvent(document, 'touchmove', onTouchMove, {
+        passive: false,
+        capture: true
+    }), $49c51c25361d4cd2$var$addEvent(document, 'blur', onBlur, true));
+    return ()=>{
+        removeEvents();
+        style.remove();
+        HTMLElement.prototype.focus = focus;
+    };
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function $49c51c25361d4cd2$var$setStyle(element, style, value) {
+    let cur = element.style[style];
+    element.style[style] = value;
+    return ()=>{
+        element.style[style] = cur;
+    };
+}
+// Adds an event listener to an element, and returns a function to remove it.
+function $49c51c25361d4cd2$var$addEvent(target, event, handler, options) {
+    // internal function, so it's ok to ignore the difficult to fix type error
+    // @ts-ignore
+    target.addEventListener(event, handler, options);
+    return ()=>{
+        // @ts-ignore
+        target.removeEventListener(event, handler, options);
+    };
+}
+function $49c51c25361d4cd2$var$scrollIntoViewWhenReady(target, wasKeyboardVisible) {
+    if (wasKeyboardVisible || !$49c51c25361d4cd2$var$visualViewport) // If the keyboard was already visible, scroll the target into view immediately.
+    $49c51c25361d4cd2$var$scrollIntoView(target);
+    else // Otherwise, wait for the visual viewport to resize before scrolling so we can
+    // measure the correct position to scroll to.
+    $49c51c25361d4cd2$var$visualViewport.addEventListener('resize', ()=>$49c51c25361d4cd2$var$scrollIntoView(target), {
+        once: true
+    });
+}
+function $49c51c25361d4cd2$var$scrollIntoView(target) {
+    let root = document.scrollingElement || document.documentElement;
+    let nextTarget = target;
+    while(nextTarget && nextTarget !== root){
+        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+        let scrollable = (utils.getScrollParent)(nextTarget);
+        if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
+            let scrollableRect = scrollable.getBoundingClientRect();
+            let targetRect = nextTarget.getBoundingClientRect();
+            if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+                let bottom = scrollableRect.bottom;
+                if ($49c51c25361d4cd2$var$visualViewport) bottom = Math.min(bottom, $49c51c25361d4cd2$var$visualViewport.offsetTop + $49c51c25361d4cd2$var$visualViewport.height);
+                // Center within the viewport.
+                let adjustment = targetRect.top - scrollableRect.top - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+                scrollable.scrollTo({
+                    // Clamp to the valid range to prevent over-scrolling.
+                    top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
+                    behavior: 'smooth'
+                });
+            }
+        }
+        nextTarget = scrollable.parentElement;
+    }
+}
+
+exports.usePreventScroll = $49c51c25361d4cd2$export$ee0f7cc6afcd1c18;