@opengovsg/oui 0.0.57 → 0.0.58

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 (4) hide show
  1. package/dist/cjs/popover/popover.cjs +45 -0
  2. package/dist/esm/popover/popover.js +45 -0
  3. package/dist/types/popover/popover.d.ts.map +1 -1
  4. package/package.json +6 -6
package/dist/cjs/popover/popover.cjs CHANGED
@@ -3,9 +3,52 @@
3
3
  'use strict';
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
+ var $670gB$react = require('react');
6
7
  var reactAriaComponents = require('react-aria-components');
7
8
  var ouiTheme = require('@opengovsg/oui-theme');
8
9
 
10
+ const REFLOW_INTERVAL_MS = 50;
11
+ const REFLOW_MAX_ATTEMPTS = 20;
12
+ const useReflowOnContentChange = () => {
13
+ const cleanupRef = $670gB$react.useRef(null);
14
+ return $670gB$react.useCallback((el) => {
15
+ cleanupRef.current?.();
16
+ cleanupRef.current = null;
17
+ if (!el) return;
18
+ let timer = 0;
19
+ let attempts = 0;
20
+ let observer = null;
21
+ const settle = () => {
22
+ observer?.disconnect();
23
+ observer = null;
24
+ };
25
+ const poll = () => {
26
+ if (el.offsetHeight > 0) return settle();
27
+ window.dispatchEvent(new Event("resize"));
28
+ attempts += 1;
29
+ if (el.offsetHeight > 0) return settle();
30
+ if (attempts >= REFLOW_MAX_ATTEMPTS) return;
31
+ timer = window.setTimeout(poll, REFLOW_INTERVAL_MS);
32
+ };
33
+ const start = () => {
34
+ clearTimeout(timer);
35
+ attempts = 0;
36
+ timer = window.setTimeout(poll, 0);
37
+ };
38
+ start();
39
+ observer = new MutationObserver(start);
40
+ observer.observe(el, {
41
+ childList: true,
42
+ subtree: true,
43
+ characterData: true
44
+ });
45
+ cleanupRef.current = () => {
46
+ clearTimeout(timer);
47
+ observer?.disconnect();
48
+ observer = null;
49
+ };
50
+ }, []);
51
+ };
9
52
  const Popover = ({
10
53
  children,
11
54
  showArrow,
@@ -17,9 +60,11 @@ const Popover = ({
17
60
  const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
18
61
  let offset = showArrow ? 12 : 8;
19
62
  offset = isSubmenu ? offset - 6 : offset;
63
+ const reflowRef = useReflowOnContentChange();
20
64
  return /* @__PURE__ */ jsxRuntime.jsxs(
21
65
  reactAriaComponents.Popover,
22
66
  {
67
+ ref: reflowRef,
23
68
  offset,
24
69
  ...props,
25
70
  className: reactAriaComponents.composeRenderProps(
package/dist/esm/popover/popover.js CHANGED
@@ -1,9 +1,52 @@
1
1
  "use strict";
2
2
  "use client";
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
+ import { useRef, useCallback } from 'react';
4
5
  import { useSlottedContext, PopoverContext, Popover as Popover$1, OverlayArrow, composeRenderProps } from 'react-aria-components';
5
6
  import { popoverArrowStyles, popoverStyles } from '@opengovsg/oui-theme';
6
7
 
8
+ const REFLOW_INTERVAL_MS = 50;
9
+ const REFLOW_MAX_ATTEMPTS = 20;
10
+ const useReflowOnContentChange = () => {
11
+ const cleanupRef = useRef(null);
12
+ return useCallback((el) => {
13
+ cleanupRef.current?.();
14
+ cleanupRef.current = null;
15
+ if (!el) return;
16
+ let timer = 0;
17
+ let attempts = 0;
18
+ let observer = null;
19
+ const settle = () => {
20
+ observer?.disconnect();
21
+ observer = null;
22
+ };
23
+ const poll = () => {
24
+ if (el.offsetHeight > 0) return settle();
25
+ window.dispatchEvent(new Event("resize"));
26
+ attempts += 1;
27
+ if (el.offsetHeight > 0) return settle();
28
+ if (attempts >= REFLOW_MAX_ATTEMPTS) return;
29
+ timer = window.setTimeout(poll, REFLOW_INTERVAL_MS);
30
+ };
31
+ const start = () => {
32
+ clearTimeout(timer);
33
+ attempts = 0;
34
+ timer = window.setTimeout(poll, 0);
35
+ };
36
+ start();
37
+ observer = new MutationObserver(start);
38
+ observer.observe(el, {
39
+ childList: true,
40
+ subtree: true,
41
+ characterData: true
42
+ });
43
+ cleanupRef.current = () => {
44
+ clearTimeout(timer);
45
+ observer?.disconnect();
46
+ observer = null;
47
+ };
48
+ }, []);
49
+ };
7
50
  const Popover = ({
8
51
  children,
9
52
  showArrow,
@@ -15,9 +58,11 @@ const Popover = ({
15
58
  const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
16
59
  let offset = showArrow ? 12 : 8;
17
60
  offset = isSubmenu ? offset - 6 : offset;
61
+ const reflowRef = useReflowOnContentChange();
18
62
  return /* @__PURE__ */ jsxs(
19
63
  Popover$1,
20
64
  {
65
+ ref: reflowRef,
21
66
  offset,
22
67
  ...props,
23
68
  className: composeRenderProps(
package/dist/types/popover/popover.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAS7E,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,EAAsB,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAExE,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,MAAM,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,OAAO,6DAMjB,YAAY,4CA8Bd,CAAA"}
1
+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAU7E,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,EAAsB,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAExE,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,MAAM,CAAC,CAAA;CAC9C;AA4FD,eAAO,MAAM,OAAO,6DAMjB,YAAY,4CAgCd,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.57",
3
+ "version": "0.0.58",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -51,11 +51,11 @@
51
51
  "storybook": "10.2.10",
52
52
  "tsx": "^4.21.0",
53
53
  "typescript": "5.7.3",
54
- "@opengovsg/oui-theme": "0.0.57",
55
- "@oui/eslint-config": "0.0.0",
56
54
  "@oui/chromatic": "0.0.0",
57
- "@oui/prettier-config": "0.0.0",
58
- "@oui/typescript-config": "0.0.0"
55
+ "@opengovsg/oui-theme": "0.0.58",
56
+ "@oui/eslint-config": "0.0.0",
57
+ "@oui/typescript-config": "0.0.0",
58
+ "@oui/prettier-config": "0.0.0"
59
59
  },
60
60
  "dependencies": {
61
61
  "@internationalized/date": "^3.10.1",
@@ -91,7 +91,7 @@
91
91
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
92
92
  "react": ">= 18",
93
93
  "react-aria-components": "^1.14.0",
94
- "@opengovsg/oui-theme": "0.0.57"
94
+ "@opengovsg/oui-theme": "0.0.58"
95
95
  },
96
96
  "scripts": {
97
97
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",