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

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

@@ -0,0 +1,29 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 NavbarItem = utils.forwardRef((props, ref) => {
+  const { as, className, children, isActive, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = refs.useDomRef(ref);
+  const { slots, classNames } = navbarContext.useNavbarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.item({ className: ouiTheme.cn(classNames?.item, className) }),
+      "data-active": ouiTheme.dataAttr(isActive),
+      ...otherProps,
+      children
+    }
+  );
+});
+NavbarItem.displayName = "NavbarItem";
+
+exports.NavbarItem = NavbarItem;

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

@@ -0,0 +1,23 @@
+"use strict";
+'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"
+  }
+};
+
+exports.i18nStrings = i18nStrings;

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,
+      menuTopOffsetPx,
+      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
+              "--menu-offset": menuTopOffsetPx
+            },
+            onKeyDown: reactAria.chain(handleKeyDown, onKeyDown),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+NavbarMenu.displayName = "NavbarMenu";
+
+exports.NavbarMenu = NavbarMenu;

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

@@ -0,0 +1,95 @@
+"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,
+    menuTopOffset
+  } = navbarContext.useNavbarContext();
+  const shouldScrollToTop = (isMenuOpen2) => {
+    if (!isMenuOpen2 || position === "sticky" || typeof window === "undefined") {
+      return;
+    }
+    window.scrollTo({ top: menuTopOffset, 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,50 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+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 showOnScrollUpVariants = {
+  visible: {
+    y: 0,
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  },
+  hidden: {
+    y: "-100%",
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  }
+};
+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: context.shouldShowOnScrollUp ? /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.nav,
+    {
+      animate: context.isNavbarHidden ? "hidden" : "visible",
+      initial: "visible",
+      variants: showOnScrollUpVariants,
+      ...reactAria.mergeProps(context.getBaseProps(), context.motionProps),
+      children: content
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx(Component, { ...context.getBaseProps(), children: content }) }) });
+});
+Navbar.displayName = "Navbar";
+
+exports.Navbar = Navbar;

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

@@ -0,0 +1,126 @@
+"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 ouiTheme = require('@opengovsg/oui-theme');
+var useScrollPosition = require('../hooks/use-scroll-position.cjs');
+var utils = require('../system/utils.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+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
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.navbarStyles.variantKeys);
+  const Component = as || "nav";
+  const domRef = refs.useDomRef(ref);
+  const menuRef = $670gB$react.useRef(null);
+  const handleMenuOpenChange = $670gB$react.useCallback(
+    (isOpen) => {
+      onMenuOpenChange(isOpen || false);
+    },
+    [onMenuOpenChange]
+  );
+  const [menuTopOffset, setMenuOffset] = $670gB$react.useState(0);
+  const [isNavbarHidden, setIsNavbarHidden] = $670gB$react.useState(false);
+  const [isMenuOpen, setIsMenuOpen] = utils$1.useControlledState(
+    isMenuOpenProp,
+    isMenuDefaultOpen ?? false,
+    handleMenuOpenChange
+  );
+  usePreventScroll.usePreventScroll({
+    isDisabled: !(shouldBlockScroll && isMenuOpen)
+  });
+  utils$2.useResizeObserver({
+    ref: domRef,
+    onResize: () => {
+      setMenuOffset(domRef.current?.getBoundingClientRect().top || 0);
+    }
+  });
+  const truePosition = variantProps.position ?? "sticky";
+  const positionVariantProp = shouldShowOnScrollUp ? "sticky" : truePosition;
+  const slots = ouiTheme.navbarStyles({
+    ...variantProps,
+    position: positionVariantProp
+  });
+  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  const navHeight = $670gB$react.useRef(0);
+  $670gB$react.useEffect(() => {
+    navHeight.current = domRef.current?.offsetHeight || 0;
+  }, [domRef]);
+  useScrollPosition.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 = {}) => ({
+    ...utils$2.mergeProps(otherProps, props),
+    "data-hidden": ouiTheme.dataAttr(isNavbarHidden),
+    "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
+    ref: domRef,
+    className: slots.base({ class: ouiTheme.cn(baseStyles, props?.className) }),
+    style: {
+      "--navbar-height": heightPx,
+      ...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,
+    menuTopOffset,
+    menuTopOffsetPx,
+    isNavbarHidden,
+    shouldShowOnScrollUp: shouldShowOnScrollUp && truePosition === "static",
+    isMenuOpen,
+    classNames,
+    setIsMenuOpen,
+    menuRef,
+    getBaseProps,
+    getWrapperProps,
+    position: positionVariantProp,
+    motionProps
+  };
+}
+
+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;