@opengovsg/oui 0.0.28 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/dist/cjs/badge/badge.cjs +4 -4
  2. package/dist/cjs/badge/use-badge.cjs +6 -6
  3. package/dist/cjs/banner/banner.cjs +4 -4
  4. package/dist/cjs/button/button.cjs +4 -4
  5. package/dist/cjs/calendar/calendar-bottom-content.cjs +3 -3
  6. package/dist/cjs/calendar/calendar-header.cjs +2 -2
  7. package/dist/cjs/calendar/calendar-month-day-selector.cjs +4 -4
  8. package/dist/cjs/calendar/calendar.cjs +4 -4
  9. package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +4 -4
  10. package/dist/cjs/calendar/utils.cjs +3 -3
  11. package/dist/cjs/checkbox/checkbox.cjs +1 -1
  12. package/dist/cjs/combo-box/combo-box-fuzzy.cjs +6 -6
  13. package/dist/cjs/combo-box/combo-box-item.cjs +2 -2
  14. package/dist/cjs/combo-box/combo-box.cjs +5 -5
  15. package/dist/cjs/date-field/date-field.cjs +4 -4
  16. package/dist/cjs/date-picker/date-picker.cjs +7 -6
  17. package/dist/cjs/date-range-picker/date-range-picker.cjs +8 -8
  18. package/dist/cjs/field/field.cjs +2 -2
  19. package/dist/cjs/file-dropzone/file-dropzone.cjs +23 -19
  20. package/dist/cjs/file-dropzone/file-info.cjs +6 -5
  21. package/dist/cjs/file-dropzone/utils.cjs +4 -4
  22. package/dist/cjs/govt-banner/govt-banner.cjs +3 -3
  23. package/dist/cjs/hooks/use-callback-ref.cjs +4 -4
  24. package/dist/cjs/hooks/use-controllable-state.cjs +2 -2
  25. package/dist/cjs/hooks/use-draggable.cjs +8 -8
  26. package/dist/cjs/hooks/use-scroll-position.cjs +53 -0
  27. package/dist/cjs/index.cjs +38 -19
  28. package/dist/cjs/input/input.cjs +2 -2
  29. package/dist/cjs/menu/menu.cjs +8 -8
  30. package/dist/cjs/modal/modal-body.cjs +2 -2
  31. package/dist/cjs/modal/modal-content.cjs +4 -4
  32. package/dist/cjs/modal/modal-footer.cjs +2 -2
  33. package/dist/cjs/modal/modal-header.cjs +2 -2
  34. package/dist/cjs/modal/modal.cjs +3 -3
  35. package/dist/cjs/navbar/index.cjs +25 -0
  36. package/dist/cjs/navbar/navbar-brand.cjs +28 -0
  37. package/dist/cjs/navbar/navbar-content.cjs +33 -0
  38. package/dist/cjs/navbar/navbar-context.cjs +14 -0
  39. package/dist/cjs/navbar/navbar-item.cjs +29 -0
  40. package/dist/cjs/navbar/navbar-menu/i18n.cjs +23 -0
  41. package/dist/cjs/navbar/navbar-menu/item.cjs +44 -0
  42. package/dist/cjs/navbar/navbar-menu/menu.cjs +62 -0
  43. package/dist/cjs/navbar/navbar-menu/toggle.cjs +95 -0
  44. package/dist/cjs/navbar/navbar.cjs +50 -0
  45. package/dist/cjs/navbar/use-navbar.cjs +126 -0
  46. 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 +55 -0
  47. 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 +23 -0
  48. 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 +208 -0
  49. package/dist/cjs/node_modules/.pnpm/@react-aria_ssr@3.9.10_react@19.2.3/node_modules/@react-aria/ssr/dist/SSRProvider.cjs +104 -0
  50. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.cjs +4 -4
  51. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.cjs +3 -3
  52. package/dist/cjs/number-field/number-field.cjs +2 -2
  53. package/dist/cjs/pagination/hooks/use-pagination.cjs +7 -7
  54. package/dist/cjs/pagination/pagination.cjs +6 -6
  55. package/dist/cjs/pagination/use-pagination-item.cjs +3 -3
  56. package/dist/cjs/pagination/use-pagination.cjs +8 -8
  57. package/dist/cjs/range-calendar/range-calendar.cjs +7 -7
  58. package/dist/cjs/ripple/use-ripple.cjs +4 -4
  59. package/dist/cjs/select/select.cjs +5 -5
  60. package/dist/cjs/spinner/use-spinner.cjs +3 -3
  61. package/dist/cjs/system/react-utils/children.cjs +26 -0
  62. package/dist/cjs/system/react-utils/context.cjs +3 -3
  63. package/dist/cjs/system/react-utils/refs.cjs +3 -3
  64. package/dist/cjs/system/utils.cjs +2 -2
  65. package/dist/cjs/tabs/tabs.cjs +2 -2
  66. package/dist/cjs/tag-field/tag-field-item.cjs +2 -2
  67. package/dist/cjs/tag-field/tag-field-list.cjs +4 -4
  68. package/dist/cjs/tag-field/tag-field-root.cjs +14 -14
  69. package/dist/cjs/tag-field/tag-field-state-context.cjs +2 -2
  70. package/dist/cjs/tag-field/tag-field-tag-list.cjs +3 -3
  71. package/dist/cjs/tag-field/tag-field-trigger.cjs +2 -2
  72. package/dist/cjs/tag-field/tag-field.cjs +4 -4
  73. package/dist/cjs/tag-field/use-tag-field-state.cjs +6 -6
  74. package/dist/cjs/tag-field/use-tag-field.cjs +4 -4
  75. package/dist/cjs/text-area/text-area.cjs +2 -2
  76. package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
  77. package/dist/cjs/text-field/text-field.cjs +1 -1
  78. package/dist/cjs/toast/toast.cjs +1 -1
  79. package/dist/cjs/toggle/toggle.cjs +3 -3
  80. package/dist/esm/banner/banner.js +1 -1
  81. package/dist/esm/button/button.js +1 -1
  82. package/dist/esm/calendar/calendar-month-day-selector.js +2 -2
  83. package/dist/esm/checkbox/checkbox.js +1 -1
  84. package/dist/esm/combo-box/combo-box.js +2 -2
  85. package/dist/esm/date-field/date-field.js +1 -1
  86. package/dist/esm/date-picker/date-picker.js +5 -4
  87. package/dist/esm/date-range-picker/date-range-picker.js +5 -5
  88. package/dist/esm/file-dropzone/file-dropzone.js +13 -9
  89. package/dist/esm/file-dropzone/file-info.js +3 -2
  90. package/dist/esm/file-dropzone/utils.js +4 -4
  91. package/dist/esm/hooks/use-scroll-position.js +51 -0
  92. package/dist/esm/index.js +17 -8
  93. package/dist/esm/menu/menu.js +2 -2
  94. package/dist/esm/modal/modal-content.js +1 -1
  95. package/dist/esm/navbar/index.js +10 -0
  96. package/dist/esm/navbar/navbar-brand.js +26 -0
  97. package/dist/esm/navbar/navbar-content.js +31 -0
  98. package/dist/esm/navbar/navbar-context.js +11 -0
  99. package/dist/esm/navbar/navbar-item.js +27 -0
  100. package/dist/esm/navbar/navbar-menu/i18n.js +21 -0
  101. package/dist/esm/navbar/navbar-menu/item.js +42 -0
  102. package/dist/esm/navbar/navbar-menu/menu.js +60 -0
  103. package/dist/esm/navbar/navbar-menu/toggle.js +93 -0
  104. package/dist/esm/navbar/navbar.js +48 -0
  105. package/dist/esm/navbar/use-navbar.js +124 -0
  106. 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 +52 -0
  107. 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 +20 -0
  108. 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/usePreventScroll.js +206 -0
  109. package/dist/esm/node_modules/.pnpm/@react-aria_ssr@3.9.10_react@19.2.3/node_modules/@react-aria/ssr/dist/SSRProvider.js +102 -0
  110. package/dist/esm/number-field/number-field.js +2 -2
  111. package/dist/esm/pagination/use-pagination-item.js +1 -1
  112. package/dist/esm/range-calendar/range-calendar.js +1 -1
  113. package/dist/esm/select/select.js +3 -3
  114. package/dist/esm/system/react-utils/children.js +23 -0
  115. package/dist/esm/tag-field/tag-field.js +2 -2
  116. package/dist/esm/text-area-field/text-area-field.js +1 -1
  117. package/dist/esm/text-field/text-field.js +1 -1
  118. package/dist/esm/toast/toast.js +1 -1
  119. package/dist/types/calendar/calendar.d.ts.map +1 -1
  120. package/dist/types/date-field/date-field.d.ts.map +1 -1
  121. package/dist/types/file-dropzone/file-dropzone.d.ts +8 -2
  122. package/dist/types/file-dropzone/file-dropzone.d.ts.map +1 -1
  123. package/dist/types/file-dropzone/file-info.d.ts.map +1 -1
  124. package/dist/types/file-dropzone/types.d.ts +1 -0
  125. package/dist/types/file-dropzone/types.d.ts.map +1 -1
  126. package/dist/types/file-dropzone/utils.d.ts +2 -1
  127. package/dist/types/file-dropzone/utils.d.ts.map +1 -1
  128. package/dist/types/hooks/use-scroll-position.d.ts +29 -0
  129. package/dist/types/hooks/use-scroll-position.d.ts.map +1 -0
  130. package/dist/types/index.d.mts +1 -0
  131. package/dist/types/index.d.ts +1 -0
  132. package/dist/types/index.d.ts.map +1 -1
  133. package/dist/types/menu/menu.d.ts.map +1 -1
  134. package/dist/types/navbar/index.d.ts +17 -0
  135. package/dist/types/navbar/index.d.ts.map +1 -0
  136. package/dist/types/navbar/navbar-brand.d.ts +6 -0
  137. package/dist/types/navbar/navbar-brand.d.ts.map +1 -0
  138. package/dist/types/navbar/navbar-content.d.ts +14 -0
  139. package/dist/types/navbar/navbar-content.d.ts.map +1 -0
  140. package/dist/types/navbar/navbar-context.d.ts +182 -0
  141. package/dist/types/navbar/navbar-context.d.ts.map +1 -0
  142. package/dist/types/navbar/navbar-item.d.ts +11 -0
  143. package/dist/types/navbar/navbar-item.d.ts.map +1 -0
  144. package/dist/types/navbar/navbar-menu/i18n.d.ts +3 -0
  145. package/dist/types/navbar/navbar-menu/i18n.d.ts.map +1 -0
  146. package/dist/types/navbar/navbar-menu/item.d.ts +16 -0
  147. package/dist/types/navbar/navbar-menu/item.d.ts.map +1 -0
  148. package/dist/types/navbar/navbar-menu/menu.d.ts +11 -0
  149. package/dist/types/navbar/navbar-menu/menu.d.ts.map +1 -0
  150. package/dist/types/navbar/navbar-menu/toggle.d.ts +12 -0
  151. package/dist/types/navbar/navbar-menu/toggle.d.ts.map +1 -0
  152. package/dist/types/navbar/navbar.d.ts +6 -0
  153. package/dist/types/navbar/navbar.d.ts.map +1 -0
  154. package/dist/types/navbar/use-navbar.d.ts +163 -0
  155. package/dist/types/navbar/use-navbar.d.ts.map +1 -0
  156. package/dist/types/range-calendar/range-calendar.d.ts.map +1 -1
  157. package/dist/types/system/react-utils/children.d.ts +10 -0
  158. package/dist/types/system/react-utils/children.d.ts.map +1 -0
  159. package/dist/types/system/react-utils/index.d.ts +5 -3
  160. package/dist/types/system/react-utils/index.d.ts.map +1 -1
  161. package/dist/types/system/utils.d.ts.map +1 -1
  162. package/dist/types/tabs/tabs.d.ts.map +1 -1
  163. package/dist/types/tag-field/tag-field-item.d.ts.map +1 -1
  164. package/dist/types/tag-field/tag-field-list.d.ts.map +1 -1
  165. package/package.json +4 -4
@@ -3,20 +3,20 @@
3
3
  'use strict';
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var react = require('react');
6
+ var $670gB$react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
9
  var utils = require('../system/utils.cjs');
10
10
  var modalVariantContext = require('./modal-variant-context.cjs');
11
11
 
12
- const Modal = react.forwardRef(function Modal2(originalProps, ref) {
12
+ const Modal = $670gB$react.forwardRef(function Modal2(originalProps, ref) {
13
13
  const [{ classNames, ...props }, variantProps] = utils.mapPropsVariants(
14
14
  originalProps,
15
15
  ouiTheme.modalStyles.variantKeys
16
16
  );
17
17
  const { isDismissable = true } = props;
18
18
  const slots = ouiTheme.modalStyles(variantProps);
19
- const buttonSize = react.useMemo(() => {
19
+ const buttonSize = $670gB$react.useMemo(() => {
20
20
  switch (variantProps.size) {
21
21
  case "mobile":
22
22
  return "md";
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var navbar = require('./navbar.cjs');
5
+ var navbarBrand = require('./navbar-brand.cjs');
6
+ var navbarContent = require('./navbar-content.cjs');
7
+ var menu = require('./navbar-menu/menu.cjs');
8
+ var item = require('./navbar-menu/item.cjs');
9
+ var toggle = require('./navbar-menu/toggle.cjs');
10
+ var navbarItem = require('./navbar-item.cjs');
11
+ var useNavbar = require('./use-navbar.cjs');
12
+ var navbarContext = require('./navbar-context.cjs');
13
+
14
+
15
+
16
+ exports.Navbar = navbar.Navbar;
17
+ exports.NavbarBrand = navbarBrand.NavbarBrand;
18
+ exports.NavbarContent = navbarContent.NavbarContent;
19
+ exports.NavbarMenu = menu.NavbarMenu;
20
+ exports.NavbarMenuItem = item.NavbarMenuItem;
21
+ exports.NavbarMenuToggle = toggle.NavbarMenuToggle;
22
+ exports.NavbarItem = navbarItem.NavbarItem;
23
+ exports.useNavbar = useNavbar.useNavbar;
24
+ exports.NavbarProvider = navbarContext.NavbarProvider;
25
+ exports.useNavbarContext = navbarContext.useNavbarContext;
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var ouiTheme = require('@opengovsg/oui-theme');
7
+ var utils = require('../system/utils.cjs');
8
+ var navbarContext = require('./navbar-context.cjs');
9
+ var refs = require('../system/react-utils/refs.cjs');
10
+
11
+ const NavbarBrand = utils.forwardRef((props, ref) => {
12
+ const { as, className, children, ...otherProps } = props;
13
+ const Component = as || "div";
14
+ const domRef = refs.useDomRef(ref);
15
+ const { slots, classNames } = navbarContext.useNavbarContext();
16
+ return /* @__PURE__ */ jsxRuntime.jsx(
17
+ Component,
18
+ {
19
+ ref: domRef,
20
+ className: slots.brand?.({ className: ouiTheme.cn(classNames?.brand, className) }),
21
+ ...otherProps,
22
+ children
23
+ }
24
+ );
25
+ });
26
+ NavbarBrand.displayName = "NavbarBrand";
27
+
28
+ exports.NavbarBrand = NavbarBrand;
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var ouiTheme = require('@opengovsg/oui-theme');
7
+ var utils = require('../system/utils.cjs');
8
+ var navbarContext = require('./navbar-context.cjs');
9
+ var refs = require('../system/react-utils/refs.cjs');
10
+
11
+ const NavbarContent = utils.forwardRef(
12
+ (props, ref) => {
13
+ const { as, className, children, justify = "start", ...otherProps } = props;
14
+ const Component = as || "div";
15
+ const domRef = refs.useDomRef(ref);
16
+ const { slots, classNames } = navbarContext.useNavbarContext();
17
+ return /* @__PURE__ */ jsxRuntime.jsx(
18
+ Component,
19
+ {
20
+ ref: domRef,
21
+ className: slots.content?.({
22
+ className: ouiTheme.cn(classNames?.content, className)
23
+ }),
24
+ "data-justify": justify,
25
+ ...otherProps,
26
+ children
27
+ }
28
+ );
29
+ }
30
+ );
31
+ NavbarContent.displayName = "NavbarContent";
32
+
33
+ exports.NavbarContent = NavbarContent;
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var context = require('../system/react-utils/context.cjs');
6
+
7
+ const [NavbarProvider, useNavbarContext] = context.createContext({
8
+ name: "NavbarContext",
9
+ strict: true,
10
+ errorMessage: "useNavbarContext: `context` is undefined. Seems you forgot to wrap component within <Navbar />"
11
+ });
12
+
13
+ exports.NavbarProvider = NavbarProvider;
14
+ exports.useNavbarContext = useNavbarContext;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var ouiTheme = require('@opengovsg/oui-theme');
7
+ var utils = require('../system/utils.cjs');
8
+ var navbarContext = require('./navbar-context.cjs');
9
+ var refs = require('../system/react-utils/refs.cjs');
10
+
11
+ const NavbarItem = utils.forwardRef((props, ref) => {
12
+ const { as, className, children, isActive, ...otherProps } = props;
13
+ const Component = as || "div";
14
+ const domRef = refs.useDomRef(ref);
15
+ const { slots, classNames } = navbarContext.useNavbarContext();
16
+ return /* @__PURE__ */ jsxRuntime.jsx(
17
+ Component,
18
+ {
19
+ ref: domRef,
20
+ className: slots.item({ className: ouiTheme.cn(classNames?.item, className) }),
21
+ "data-active": ouiTheme.dataAttr(isActive),
22
+ ...otherProps,
23
+ children
24
+ }
25
+ );
26
+ });
27
+ NavbarItem.displayName = "NavbarItem";
28
+
29
+ exports.NavbarItem = NavbarItem;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ const i18nStrings = {
5
+ "en-SG": {
6
+ openMenu: "Open navigation menu",
7
+ closeMenu: "Close navigation menu"
8
+ },
9
+ "zh-SG": {
10
+ openMenu: "\u6253\u5F00\u5BFC\u822A\u83DC\u5355",
11
+ closeMenu: "\u5173\u95ED\u5BFC\u822A\u83DC\u5355"
12
+ },
13
+ "ms-SG": {
14
+ openMenu: "Buka menu navigasi",
15
+ closeMenu: "Tutup menu navigasi"
16
+ },
17
+ "ta-SG": {
18
+ openMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8\u0BA4\u0BCD \u0BA4\u0BBF\u0BB1",
19
+ closeMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
20
+ }
21
+ };
22
+
23
+ exports.i18nStrings = i18nStrings;
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
+ var utils = require('../../system/utils.cjs');
9
+ var navbarContext = require('../navbar-context.cjs');
10
+ var refs = require('../../system/react-utils/refs.cjs');
11
+
12
+ const NavbarMenuItem = utils.forwardRef(
13
+ (props, ref) => {
14
+ const { className, children, isActive, ...otherProps } = props;
15
+ const domRef = refs.useDomRef(ref);
16
+ const { isMenuOpen, classNames } = navbarContext.useNavbarContext();
17
+ const renderProps = reactAriaComponents.useRenderProps({
18
+ className: reactAriaComponents.composeRenderProps(
19
+ className,
20
+ (className2, renderProps2) => ouiTheme.navbarMenuItemStyles({
21
+ className: ouiTheme.cn(classNames?.menuItem, className2),
22
+ ...renderProps2
23
+ })
24
+ ),
25
+ values: {
26
+ isActive: !!isActive
27
+ }
28
+ });
29
+ return /* @__PURE__ */ jsxRuntime.jsx(
30
+ "li",
31
+ {
32
+ ref: domRef,
33
+ className: renderProps.className,
34
+ "data-active": ouiTheme.dataAttr(isActive),
35
+ "data-open": ouiTheme.dataAttr(isMenuOpen),
36
+ ...otherProps,
37
+ children
38
+ }
39
+ );
40
+ }
41
+ );
42
+ NavbarMenuItem.displayName = "NavbarMenuItem";
43
+
44
+ exports.NavbarMenuItem = NavbarMenuItem;
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ 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');
7
+ var reactAria = require('react-aria');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
+ var utils = require('../../system/utils.cjs');
10
+ var navbarContext = require('../navbar-context.cjs');
11
+ var refs = require('../../system/react-utils/refs.cjs');
12
+
13
+ const NavbarMenu = utils.forwardRef(
14
+ ({ className, children, portalContainer, style, onKeyDown, ...props }, ref) => {
15
+ const domRef = refs.useDomRef(ref);
16
+ const {
17
+ slots,
18
+ isMenuOpen,
19
+ menuTopOffsetPx,
20
+ classNames,
21
+ setIsMenuOpen,
22
+ domRef: parentRef,
23
+ menuRef
24
+ } = navbarContext.useNavbarContext();
25
+ const handleKeyDown = (e) => {
26
+ if (e.key === "Escape") {
27
+ e.stopPropagation();
28
+ setIsMenuOpen(false);
29
+ menuRef.current?.focus();
30
+ }
31
+ };
32
+ if (!isMenuOpen) return null;
33
+ return /* @__PURE__ */ jsxRuntime.jsx(
34
+ Overlay.Overlay,
35
+ {
36
+ disableFocusManagement: true,
37
+ portalContainer: portalContainer ?? parentRef.current ?? void 0,
38
+ children: /* @__PURE__ */ jsxRuntime.jsx(
39
+ "ul",
40
+ {
41
+ ref: domRef,
42
+ className: slots.menu?.({
43
+ className: ouiTheme.cn(classNames?.menu, className)
44
+ }),
45
+ "data-open": ouiTheme.dataAttr(isMenuOpen),
46
+ style: {
47
+ ...style,
48
+ // @ts-expect-error due to not having any type declaration for CSS variables in React style prop
49
+ "--menu-offset": menuTopOffsetPx
50
+ },
51
+ onKeyDown: reactAria.chain(handleKeyDown, onKeyDown),
52
+ ...props,
53
+ children
54
+ }
55
+ )
56
+ }
57
+ );
58
+ }
59
+ );
60
+ NavbarMenu.displayName = "NavbarMenu";
61
+
62
+ exports.NavbarMenu = NavbarMenu;
@@ -0,0 +1,95 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var $670gB$react = require('react');
7
+ var reactAria = require('react-aria');
8
+ var reactAriaComponents = require('react-aria-components');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
+ var navbarContext = require('../navbar-context.cjs');
11
+ var i18n = require('./i18n.cjs');
12
+
13
+ const NavbarMenuToggle = ({
14
+ icon,
15
+ className,
16
+ onChange,
17
+ classNames,
18
+ size = "sm",
19
+ radius,
20
+ isIconOnly = true,
21
+ ...props
22
+ }) => {
23
+ const {
24
+ slots,
25
+ classNames: contextClassNames,
26
+ isMenuOpen,
27
+ setIsMenuOpen,
28
+ menuRef,
29
+ position,
30
+ menuTopOffset
31
+ } = navbarContext.useNavbarContext();
32
+ const shouldScrollToTop = (isMenuOpen2) => {
33
+ if (!isMenuOpen2 || position === "sticky" || typeof window === "undefined") {
34
+ return;
35
+ }
36
+ window.scrollTo({ top: menuTopOffset, behavior: "instant" });
37
+ };
38
+ const formatMessage = reactAria.useMessageFormatter(i18n.i18nStrings);
39
+ const toggleStyles = $670gB$react.useMemo(() => {
40
+ return ouiTheme.buttonStyles({
41
+ variant: "unstyled",
42
+ size,
43
+ radius,
44
+ isIconOnly,
45
+ className: slots.toggle({
46
+ className: ouiTheme.cn(
47
+ contextClassNames?.toggle,
48
+ className ?? classNames?.toggle
49
+ )
50
+ })
51
+ });
52
+ }, [
53
+ className,
54
+ classNames?.toggle,
55
+ contextClassNames?.toggle,
56
+ isIconOnly,
57
+ radius,
58
+ size,
59
+ slots
60
+ ]);
61
+ const child = $670gB$react.useMemo(() => {
62
+ if (typeof icon === "function") {
63
+ return icon(isMenuOpen ?? false);
64
+ }
65
+ return icon || /* @__PURE__ */ jsxRuntime.jsx(
66
+ "span",
67
+ {
68
+ className: slots.toggleIcon({
69
+ class: ouiTheme.cn(contextClassNames?.toggleIcon, classNames?.toggleIcon)
70
+ })
71
+ }
72
+ );
73
+ }, [
74
+ icon,
75
+ slots,
76
+ classNames?.toggleIcon,
77
+ contextClassNames?.toggleIcon,
78
+ isMenuOpen
79
+ ]);
80
+ return /* @__PURE__ */ jsxRuntime.jsx(
81
+ reactAriaComponents.ToggleButton,
82
+ {
83
+ "aria-label": isMenuOpen ? formatMessage("closeMenu") : formatMessage("openMenu"),
84
+ ref: menuRef,
85
+ "data-open": ouiTheme.dataAttr(isMenuOpen),
86
+ className: toggleStyles,
87
+ isSelected: isMenuOpen,
88
+ onChange: reactAria.chain(onChange, shouldScrollToTop, setIsMenuOpen),
89
+ ...props,
90
+ children: child
91
+ }
92
+ );
93
+ };
94
+
95
+ exports.NavbarMenuToggle = NavbarMenuToggle;
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('motion/react');
7
+ var reactAria = require('react-aria');
8
+ var children = require('../system/react-utils/children.cjs');
9
+ var utils = require('../system/utils.cjs');
10
+ var navbarContext = require('./navbar-context.cjs');
11
+ var menu = require('./navbar-menu/menu.cjs');
12
+ var useNavbar = require('./use-navbar.cjs');
13
+
14
+ const showOnScrollUpVariants = {
15
+ visible: {
16
+ y: 0,
17
+ transition: {
18
+ ease: [0, 0, 0.2, 1]
19
+ }
20
+ },
21
+ hidden: {
22
+ y: "-100%",
23
+ transition: {
24
+ ease: [0, 0, 0.2, 1]
25
+ }
26
+ }
27
+ };
28
+ const Navbar = utils.forwardRef((props, ref) => {
29
+ const { children: children$1, ...otherProps } = props;
30
+ const context = useNavbar.useNavbar({ ...otherProps, ref });
31
+ const Component = context.Component;
32
+ const [childrenWithoutMenu, menu$1] = children.pickChildren(children$1, menu.NavbarMenu);
33
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
34
+ /* @__PURE__ */ jsxRuntime.jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
35
+ menu$1
36
+ ] });
37
+ 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(
38
+ react.m.nav,
39
+ {
40
+ animate: context.isNavbarHidden ? "hidden" : "visible",
41
+ initial: "visible",
42
+ variants: showOnScrollUpVariants,
43
+ ...reactAria.mergeProps(context.getBaseProps(), context.motionProps),
44
+ children: content
45
+ }
46
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx(Component, { ...context.getBaseProps(), children: content }) }) });
47
+ });
48
+ Navbar.displayName = "Navbar";
49
+
50
+ exports.Navbar = Navbar;
@@ -0,0 +1,126 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var $670gB$react = require('react');
6
+ 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');
7
+ var utils$2 = require('@react-aria/utils');
8
+ var utils$1 = require('@react-stately/utils');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
+ var useScrollPosition = require('../hooks/use-scroll-position.cjs');
11
+ var utils = require('../system/utils.cjs');
12
+ var refs = require('../system/react-utils/refs.cjs');
13
+
14
+ const NAVBAR_PRESENCE_BUFFER = 10;
15
+ function useNavbar(originalProps) {
16
+ const [
17
+ {
18
+ ref,
19
+ as,
20
+ parentRef,
21
+ height = "4rem",
22
+ shouldBlockScroll = true,
23
+ shouldShowOnScrollUp = false,
24
+ disableScrollHandler = false,
25
+ onScrollPositionChange,
26
+ isMenuOpen: isMenuOpenProp,
27
+ isMenuDefaultOpen,
28
+ onMenuOpenChange = () => {
29
+ },
30
+ className,
31
+ classNames,
32
+ motionProps,
33
+ ...otherProps
34
+ },
35
+ variantProps
36
+ ] = utils.mapPropsVariants(originalProps, ouiTheme.navbarStyles.variantKeys);
37
+ const Component = as || "nav";
38
+ const domRef = refs.useDomRef(ref);
39
+ const menuRef = $670gB$react.useRef(null);
40
+ const handleMenuOpenChange = $670gB$react.useCallback(
41
+ (isOpen) => {
42
+ onMenuOpenChange(isOpen || false);
43
+ },
44
+ [onMenuOpenChange]
45
+ );
46
+ const [menuTopOffset, setMenuOffset] = $670gB$react.useState(0);
47
+ const [isNavbarHidden, setIsNavbarHidden] = $670gB$react.useState(false);
48
+ const [isMenuOpen, setIsMenuOpen] = utils$1.useControlledState(
49
+ isMenuOpenProp,
50
+ isMenuDefaultOpen ?? false,
51
+ handleMenuOpenChange
52
+ );
53
+ usePreventScroll.usePreventScroll({
54
+ isDisabled: !(shouldBlockScroll && isMenuOpen)
55
+ });
56
+ utils$2.useResizeObserver({
57
+ ref: domRef,
58
+ onResize: () => {
59
+ setMenuOffset(domRef.current?.getBoundingClientRect().top || 0);
60
+ }
61
+ });
62
+ const truePosition = variantProps.position ?? "sticky";
63
+ const positionVariantProp = shouldShowOnScrollUp ? "sticky" : truePosition;
64
+ const slots = ouiTheme.navbarStyles({
65
+ ...variantProps,
66
+ position: positionVariantProp
67
+ });
68
+ const baseStyles = ouiTheme.cn(classNames?.base, className);
69
+ const navHeight = $670gB$react.useRef(0);
70
+ $670gB$react.useEffect(() => {
71
+ navHeight.current = domRef.current?.offsetHeight || 0;
72
+ }, [domRef]);
73
+ useScrollPosition.useScrollPosition({
74
+ elementRef: parentRef,
75
+ isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
76
+ callback: ({ prevPos, currPos }) => {
77
+ onScrollPositionChange?.(currPos.y);
78
+ if (shouldShowOnScrollUp) {
79
+ setIsNavbarHidden((prev) => {
80
+ const next = currPos.y > prevPos.y + NAVBAR_PRESENCE_BUFFER && currPos.y > navHeight.current;
81
+ return next !== prev ? next : prev;
82
+ });
83
+ }
84
+ }
85
+ });
86
+ const heightPx = typeof height === "number" ? `${height}px` : height;
87
+ const menuTopOffsetPx = `calc(${heightPx} + ${menuTopOffset}px)`;
88
+ const getBaseProps = (props = {}) => ({
89
+ ...utils$2.mergeProps(otherProps, props),
90
+ "data-hidden": ouiTheme.dataAttr(isNavbarHidden),
91
+ "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
92
+ ref: domRef,
93
+ className: slots.base({ class: ouiTheme.cn(baseStyles, props?.className) }),
94
+ style: {
95
+ "--navbar-height": heightPx,
96
+ ...otherProps?.style,
97
+ ...props?.style
98
+ }
99
+ });
100
+ const getWrapperProps = (props = {}) => ({
101
+ ...props,
102
+ "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
103
+ className: slots.wrapper({
104
+ class: ouiTheme.cn(classNames?.wrapper, props?.className)
105
+ })
106
+ });
107
+ return {
108
+ Component,
109
+ slots,
110
+ domRef,
111
+ menuTopOffset,
112
+ menuTopOffsetPx,
113
+ isNavbarHidden,
114
+ shouldShowOnScrollUp: shouldShowOnScrollUp && truePosition === "static",
115
+ isMenuOpen,
116
+ classNames,
117
+ setIsMenuOpen,
118
+ menuRef,
119
+ getBaseProps,
120
+ getWrapperProps,
121
+ position: positionVariantProp,
122
+ motionProps
123
+ };
124
+ }
125
+
126
+ exports.useNavbar = useNavbar;
@@ -0,0 +1,55 @@
1
+ 'use strict';
2
+
3
+ var PortalProvider = require('./PortalProvider.cjs');
4
+ var interactions = require('@react-aria/interactions');
5
+ var focus = require('@react-aria/focus');
6
+ var $670gB$react = require('react');
7
+ var $4AOtR$reactdom = require('react-dom');
8
+ var SSRProvider = require('../../../../../@react-aria_ssr@3.9.10_react@19.2.3/node_modules/@react-aria/ssr/dist/SSRProvider.cjs');
9
+ require('@react-aria/utils');
10
+
11
+ /*
12
+ * Copyright 2022 Adobe. All rights reserved.
13
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
14
+ * you may not use this file except in compliance with the License. You may obtain a copy
15
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
16
+ *
17
+ * Unless required by applicable law or agreed to in writing, software distributed under
18
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
19
+ * OF ANY KIND, either express or implied. See the License for the specific language
20
+ * governing permissions and limitations under the License.
21
+ */
22
+
23
+
24
+
25
+
26
+
27
+
28
+ const $337b884510726a0d$export$a2200b96afd16271 = /*#__PURE__*/ ($670gB$react).createContext(null);
29
+ function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
30
+ let isSSR = (SSRProvider.useIsSSR)();
31
+ let { portalContainer: portalContainer = isSSR ? null : document.body, isExiting: isExiting } = props;
32
+ let [contain, setContain] = ($670gB$react.useState)(false);
33
+ let contextValue = ($670gB$react.useMemo)(()=>({
34
+ contain: contain,
35
+ setContain: setContain
36
+ }), [
37
+ contain,
38
+ setContain
39
+ ]);
40
+ let { getContainer: getContainer } = (PortalProvider.useUNSAFE_PortalContext)();
41
+ if (!props.portalContainer && getContainer) portalContainer = getContainer();
42
+ if (!portalContainer) return null;
43
+ let contents = props.children;
44
+ if (!props.disableFocusManagement) contents = /*#__PURE__*/ ($670gB$react).createElement((focus.FocusScope), {
45
+ restoreFocus: true,
46
+ contain: (props.shouldContainFocus || contain) && !isExiting
47
+ }, contents);
48
+ contents = /*#__PURE__*/ ($670gB$react).createElement($337b884510726a0d$export$a2200b96afd16271.Provider, {
49
+ value: contextValue
50
+ }, /*#__PURE__*/ ($670gB$react).createElement((interactions.ClearPressResponder), null, contents));
51
+ return /*#__PURE__*/ ($4AOtR$reactdom).createPortal(contents, portalContainer);
52
+ }
53
+
54
+ exports.Overlay = $337b884510726a0d$export$c6fdb837b070b4ff;
55
+ exports.OverlayContext = $337b884510726a0d$export$a2200b96afd16271;
@@ -0,0 +1,23 @@
1
+ 'use strict';
2
+
3
+ var $670gB$react = require('react');
4
+
5
+ /*
6
+ * Copyright 2024 Adobe. All rights reserved.
7
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
8
+ * you may not use this file except in compliance with the License. You may obtain a copy
9
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing, software distributed under
12
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
13
+ * OF ANY KIND, either express or implied. See the License for the specific language
14
+ * governing permissions and limitations under the License.
15
+ */
16
+ const $96b38030c423d352$export$60d741e20e0aa309 = /*#__PURE__*/ ($670gB$react.createContext)({});
17
+ function $96b38030c423d352$export$9fc1347d4195ccb3() {
18
+ var _useContext;
19
+ return (_useContext = ($670gB$react.useContext)($96b38030c423d352$export$60d741e20e0aa309)) !== null && _useContext !== void 0 ? _useContext : {};
20
+ }
21
+
22
+ exports.PortalContext = $96b38030c423d352$export$60d741e20e0aa309;
23
+ exports.useUNSAFE_PortalContext = $96b38030c423d352$export$9fc1347d4195ccb3;