@opengovsg/oui 0.0.56 → 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 (7) hide show
  1. package/dist/cjs/button/button.cjs +1 -1
  2. package/dist/cjs/popover/popover.cjs +45 -0
  3. package/dist/esm/button/button.js +1 -1
  4. package/dist/esm/popover/popover.js +45 -0
  5. package/dist/types/button/button.d.ts +1 -1
  6. package/dist/types/popover/popover.d.ts.map +1 -1
  7. package/package.json +5 -5
package/dist/cjs/button/button.cjs CHANGED
@@ -32,7 +32,7 @@ const Button = $670gB$react.forwardRef(
32
32
  spinner: spinnerProp,
33
33
  isIconOnly,
34
34
  isAttached,
35
- preserveWidth,
35
+ preserveWidth = true,
36
36
  ...props
37
37
  }, ref) => {
38
38
  const {
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/button/button.js CHANGED
@@ -30,7 +30,7 @@ const Button = forwardRef(
30
30
  spinner: spinnerProp,
31
31
  isIconOnly,
32
32
  isAttached,
33
- preserveWidth,
33
+ preserveWidth = true,
34
34
  ...props
35
35
  }, ref) => {
36
36
  const {
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/button/button.d.ts CHANGED
@@ -48,7 +48,7 @@ export interface ButtonProps extends AriaButtonProps, ButtonVariantProps {
48
48
  *
49
49
  * Only applies when no `loadingText` or `pendingElement` is provided, since
50
50
  * those replace the children with content of a different width.
51
- * @defaultValue false
51
+ * @defaultValue true
52
52
  */
53
53
  preserveWidth?: boolean;
54
54
  }
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.56",
3
+ "version": "0.0.58",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -52,10 +52,10 @@
52
52
  "tsx": "^4.21.0",
53
53
  "typescript": "5.7.3",
54
54
  "@oui/chromatic": "0.0.0",
55
- "@opengovsg/oui-theme": "0.0.56",
55
+ "@opengovsg/oui-theme": "0.0.58",
56
56
  "@oui/eslint-config": "0.0.0",
57
- "@oui/prettier-config": "0.0.0",
58
- "@oui/typescript-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.56"
94
+ "@opengovsg/oui-theme": "0.0.58"
95
95
  },
96
96
  "scripts": {
97
97
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",