@opengovsg/oui 0.0.0-snapshot-20251203100754 → 0.0.0-snapshot-20260126025301

package/dist/esm/navbar/navbar-item.js

@@ -0,0 +1,27 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { dataAttr, cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { useNavbarContext } from './navbar-context.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const NavbarItem = forwardRef((props, ref) => {
+  const { as, className, children, isActive, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = useDomRef(ref);
+  const { slots, classNames } = useNavbarContext();
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.item({ className: cn(classNames?.item, className) }),
+      "data-active": dataAttr(isActive),
+      ...otherProps,
+      children
+    }
+  );
+});
+NavbarItem.displayName = "NavbarItem";
+
+export { NavbarItem };

package/dist/esm/navbar/navbar-menu/i18n.js

@@ -0,0 +1,21 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    openMenu: "Open navigation menu",
+    closeMenu: "Close navigation menu"
+  },
+  "zh-SG": {
+    openMenu: "\u6253\u5F00\u5BFC\u822A\u83DC\u5355",
+    closeMenu: "\u5173\u95ED\u5BFC\u822A\u83DC\u5355"
+  },
+  "ms-SG": {
+    openMenu: "Buka menu navigasi",
+    closeMenu: "Tutup menu navigasi"
+  },
+  "ta-SG": {
+    openMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8\u0BA4\u0BCD \u0BA4\u0BBF\u0BB1",
+    closeMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/navbar/navbar-menu/item.js

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

package/dist/esm/navbar/navbar-menu/menu.js

@@ -0,0 +1,60 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Overlay as $337b884510726a0d$export$c6fdb837b070b4ff } from '../../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.js';
+import { chain } from 'react-aria';
+import { dataAttr, cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../../system/utils.js';
+import { useNavbarContext } from '../navbar-context.js';
+import { useDomRef } from '../../system/react-utils/refs.js';
+
+const NavbarMenu = forwardRef(
+  ({ className, children, portalContainer, style, onKeyDown, ...props }, ref) => {
+    const domRef = useDomRef(ref);
+    const {
+      slots,
+      isMenuOpen,
+      menuTopOffsetPx,
+      classNames,
+      setIsMenuOpen,
+      domRef: parentRef,
+      menuRef
+    } = useNavbarContext();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setIsMenuOpen(false);
+        menuRef.current?.focus();
+      }
+    };
+    if (!isMenuOpen) return null;
+    return /* @__PURE__ */ jsx(
+      $337b884510726a0d$export$c6fdb837b070b4ff,
+      {
+        disableFocusManagement: true,
+        portalContainer: portalContainer ?? parentRef.current ?? void 0,
+        children: /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ref: domRef,
+            className: slots.menu?.({
+              className: cn(classNames?.menu, className)
+            }),
+            "data-open": dataAttr(isMenuOpen),
+            style: {
+              ...style,
+              // @ts-expect-error due to not having any type declaration for CSS variables in React style prop
+              "--menu-offset": menuTopOffsetPx
+            },
+            onKeyDown: chain(handleKeyDown, onKeyDown),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+NavbarMenu.displayName = "NavbarMenu";
+
+export { NavbarMenu };

package/dist/esm/navbar/navbar-menu/toggle.js

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

package/dist/esm/navbar/navbar.js

@@ -0,0 +1,48 @@
+"use strict";
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { FocusScope, mergeProps } from 'react-aria';
+import { pickChildren } from '../system/react-utils/children.js';
+import { forwardRef } from '../system/utils.js';
+import { NavbarProvider } from './navbar-context.js';
+import { NavbarMenu } from './navbar-menu/menu.js';
+import { useNavbar } from './use-navbar.js';
+
+const showOnScrollUpVariants = {
+  visible: {
+    y: 0,
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  },
+  hidden: {
+    y: "-100%",
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  }
+};
+const Navbar = forwardRef((props, ref) => {
+  const { children, ...otherProps } = props;
+  const context = useNavbar({ ...otherProps, ref });
+  const Component = context.Component;
+  const [childrenWithoutMenu, menu] = pickChildren(children, NavbarMenu);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
+    menu
+  ] });
+  return /* @__PURE__ */ jsx(NavbarProvider, { value: context, children: /* @__PURE__ */ jsx(FocusScope, { contain: context.isMenuOpen, children: context.shouldShowOnScrollUp ? /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
+    m.nav,
+    {
+      animate: context.isNavbarHidden ? "hidden" : "visible",
+      initial: "visible",
+      variants: showOnScrollUpVariants,
+      ...mergeProps(context.getBaseProps(), context.motionProps),
+      children: content
+    }
+  ) }) : /* @__PURE__ */ jsx(Component, { ...context.getBaseProps(), children: content }) }) });
+});
+Navbar.displayName = "Navbar";
+
+export { Navbar };

package/dist/esm/navbar/use-navbar.js

@@ -0,0 +1,124 @@
+"use strict";
+"use client";
+import { useRef, useCallback, useState, useEffect } from 'react';
+import { usePreventScroll as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from '../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.js';
+import { useResizeObserver, mergeProps } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { navbarStyles, cn, dataAttr } from '@opengovsg/oui-theme';
+import { useScrollPosition } from '../hooks/use-scroll-position.js';
+import { mapPropsVariants } from '../system/utils.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const NAVBAR_PRESENCE_BUFFER = 10;
+function useNavbar(originalProps) {
+  const [
+    {
+      ref,
+      as,
+      parentRef,
+      height = "4rem",
+      shouldBlockScroll = true,
+      shouldShowOnScrollUp = false,
+      disableScrollHandler = false,
+      onScrollPositionChange,
+      isMenuOpen: isMenuOpenProp,
+      isMenuDefaultOpen,
+      onMenuOpenChange = () => {
+      },
+      className,
+      classNames,
+      motionProps,
+      ...otherProps
+    },
+    variantProps
+  ] = mapPropsVariants(originalProps, navbarStyles.variantKeys);
+  const Component = as || "nav";
+  const domRef = useDomRef(ref);
+  const menuRef = useRef(null);
+  const handleMenuOpenChange = useCallback(
+    (isOpen) => {
+      onMenuOpenChange(isOpen || false);
+    },
+    [onMenuOpenChange]
+  );
+  const [menuTopOffset, setMenuOffset] = useState(0);
+  const [isNavbarHidden, setIsNavbarHidden] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useControlledState(
+    isMenuOpenProp,
+    isMenuDefaultOpen ?? false,
+    handleMenuOpenChange
+  );
+  $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
+    isDisabled: !(shouldBlockScroll && isMenuOpen)
+  });
+  useResizeObserver({
+    ref: domRef,
+    onResize: () => {
+      setMenuOffset(domRef.current?.getBoundingClientRect().top || 0);
+    }
+  });
+  const truePosition = variantProps.position ?? "sticky";
+  const positionVariantProp = shouldShowOnScrollUp ? "sticky" : truePosition;
+  const slots = navbarStyles({
+    ...variantProps,
+    position: positionVariantProp
+  });
+  const baseStyles = cn(classNames?.base, className);
+  const navHeight = useRef(0);
+  useEffect(() => {
+    navHeight.current = domRef.current?.offsetHeight || 0;
+  }, [domRef]);
+  useScrollPosition({
+    elementRef: parentRef,
+    isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
+    callback: ({ prevPos, currPos }) => {
+      onScrollPositionChange?.(currPos.y);
+      if (shouldShowOnScrollUp) {
+        setIsNavbarHidden((prev) => {
+          const next = currPos.y > prevPos.y + NAVBAR_PRESENCE_BUFFER && currPos.y > navHeight.current;
+          return next !== prev ? next : prev;
+        });
+      }
+    }
+  });
+  const heightPx = typeof height === "number" ? `${height}px` : height;
+  const menuTopOffsetPx = `calc(${heightPx} + ${menuTopOffset}px)`;
+  const getBaseProps = (props = {}) => ({
+    ...mergeProps(otherProps, props),
+    "data-hidden": dataAttr(isNavbarHidden),
+    "data-menu-open": dataAttr(isMenuOpen),
+    ref: domRef,
+    className: slots.base({ class: cn(baseStyles, props?.className) }),
+    style: {
+      "--navbar-height": heightPx,
+      ...otherProps?.style,
+      ...props?.style
+    }
+  });
+  const getWrapperProps = (props = {}) => ({
+    ...props,
+    "data-menu-open": dataAttr(isMenuOpen),
+    className: slots.wrapper({
+      class: cn(classNames?.wrapper, props?.className)
+    })
+  });
+  return {
+    Component,
+    slots,
+    domRef,
+    menuTopOffset,
+    menuTopOffsetPx,
+    isNavbarHidden,
+    shouldShowOnScrollUp: shouldShowOnScrollUp && truePosition === "static",
+    isMenuOpen,
+    classNames,
+    setIsMenuOpen,
+    menuRef,
+    getBaseProps,
+    getWrapperProps,
+    position: positionVariantProp,
+    motionProps
+  };
+}
+
+export { useNavbar };

package/dist/esm/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.js

@@ -0,0 +1,52 @@
+import { useUNSAFE_PortalContext as $96b38030c423d352$export$9fc1347d4195ccb3 } from './PortalProvider.js';
+import { ClearPressResponder } from '@react-aria/interactions';
+import { FocusScope } from '@react-aria/focus';
+import $670gB$react, { useState, useMemo } from 'react';
+import $4AOtR$reactdom from 'react-dom';
+import { useIsSSR as $b5e257d569688ac6$export$535bd6ca7f90a273 } from '../../../../../@react-aria_ssr@3.9.10_react@19.2.3/node_modules/@react-aria/ssr/dist/SSRProvider.js';
+import '@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 = ($b5e257d569688ac6$export$535bd6ca7f90a273)();
+    let { portalContainer: portalContainer = isSSR ? null : document.body, isExiting: isExiting } = props;
+    let [contain, setContain] = (useState)(false);
+    let contextValue = (useMemo)(()=>({
+            contain: contain,
+            setContain: setContain
+        }), [
+        contain,
+        setContain
+    ]);
+    let { getContainer: getContainer } = ($96b38030c423d352$export$9fc1347d4195ccb3)();
+    if (!props.portalContainer && getContainer) portalContainer = getContainer();
+    if (!portalContainer) return null;
+    let contents = props.children;
+    if (!props.disableFocusManagement) contents = /*#__PURE__*/ ($670gB$react).createElement((FocusScope), {
+        restoreFocus: true,
+        contain: (props.shouldContainFocus || contain) && !isExiting
+    }, contents);
+    contents = /*#__PURE__*/ ($670gB$react).createElement($337b884510726a0d$export$a2200b96afd16271.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ ($670gB$react).createElement((ClearPressResponder), null, contents));
+    return /*#__PURE__*/ ($4AOtR$reactdom).createPortal(contents, portalContainer);
+}
+
+export { $337b884510726a0d$export$c6fdb837b070b4ff as Overlay, $337b884510726a0d$export$a2200b96afd16271 as OverlayContext };

package/dist/esm/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.js

@@ -0,0 +1,20 @@
+import { useContext, createContext } from '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__*/ (createContext)({});
+function $96b38030c423d352$export$9fc1347d4195ccb3() {
+    var _useContext;
+    return (_useContext = (useContext)($96b38030c423d352$export$60d741e20e0aa309)) !== null && _useContext !== void 0 ? _useContext : {};
+}
+
+export { $96b38030c423d352$export$60d741e20e0aa309 as PortalContext, $96b38030c423d352$export$9fc1347d4195ccb3 as useUNSAFE_PortalContext };