@x-plat/design-system 0.11.0 → 0.12.0

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 (25) hide show
  1. package/dist/components/Dropdown/index.cjs +22 -9
  2. package/dist/components/Dropdown/index.css +3 -0
  3. package/dist/components/Dropdown/index.js +22 -9
  4. package/dist/components/Editor/index.cjs +602 -30
  5. package/dist/components/Editor/index.css +100 -0
  6. package/dist/components/Editor/index.d.cts +1 -1
  7. package/dist/components/Editor/index.d.ts +1 -1
  8. package/dist/components/Editor/index.js +602 -30
  9. package/dist/components/PopOver/index.cjs +21 -7
  10. package/dist/components/PopOver/index.css +3 -0
  11. package/dist/components/PopOver/index.js +21 -7
  12. package/dist/components/Select/index.cjs +21 -8
  13. package/dist/components/Select/index.css +3 -0
  14. package/dist/components/Select/index.js +21 -8
  15. package/dist/components/TimePicker/index.cjs +21 -8
  16. package/dist/components/TimePicker/index.css +3 -0
  17. package/dist/components/TimePicker/index.js +21 -8
  18. package/dist/components/index.cjs +629 -41
  19. package/dist/components/index.css +110 -0
  20. package/dist/components/index.js +629 -41
  21. package/dist/index.cjs +629 -41
  22. package/dist/index.css +110 -0
  23. package/dist/index.js +629 -41
  24. package/guidelines/components/editor.md +58 -3
  25. package/package.json +1 -1
package/dist/components/PopOver/index.cjs CHANGED
@@ -51,8 +51,10 @@ var import_react = __toESM(require("react"), 1);
51
51
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
52
52
  const [position, setPosition] = import_react.default.useState({
53
53
  position: {},
54
- direction: "bottom"
54
+ direction: "bottom",
55
+ repositioning: false
55
56
  });
57
+ const placedRef = import_react.default.useRef(false);
56
58
  const calculatePosition = import_react.default.useCallback(() => {
57
59
  if (!triggerRef.current || !popRef.current) return;
58
60
  const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,11 +79,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
77
79
  if (left < 8) left = 8;
78
80
  setPosition({
79
81
  position: { top, left },
80
- direction
82
+ direction,
83
+ repositioning: placedRef.current
81
84
  });
85
+ placedRef.current = true;
82
86
  }, [triggerRef, popRef]);
83
87
  import_react.default.useLayoutEffect(() => {
84
- if (!enabled) return;
88
+ if (!enabled) {
89
+ placedRef.current = false;
90
+ return;
91
+ }
85
92
  calculatePosition();
86
93
  const raf = requestAnimationFrame(calculatePosition);
87
94
  return () => cancelAnimationFrame(raf);
@@ -96,11 +103,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
96
103
  }, [calculatePosition, enabled, popRef]);
97
104
  import_react.default.useEffect(() => {
98
105
  if (!enabled) return;
99
- window.addEventListener("resize", calculatePosition);
100
- window.addEventListener("scroll", calculatePosition, true);
106
+ let raf = 0;
107
+ const onScrollOrResize = () => {
108
+ cancelAnimationFrame(raf);
109
+ raf = requestAnimationFrame(calculatePosition);
110
+ };
111
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
112
+ window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
101
113
  return () => {
102
- window.removeEventListener("resize", calculatePosition);
103
- window.removeEventListener("scroll", calculatePosition, true);
114
+ cancelAnimationFrame(raf);
115
+ window.removeEventListener("resize", onScrollOrResize);
116
+ window.removeEventListener("scroll", onScrollOrResize, true);
104
117
  };
105
118
  }, [calculatePosition, enabled]);
106
119
  return position;
@@ -215,6 +228,7 @@ var PopOver = (props) => {
215
228
  className: clsx_default(
216
229
  "lib-xplat-pop-over-content",
217
230
  position.direction,
231
+ position.repositioning && "repositioning",
218
232
  eventTrigger && "visible"
219
233
  ),
220
234
  ref: popRef,
package/dist/components/PopOver/index.css CHANGED
@@ -27,3 +27,6 @@
27
27
  opacity: 1;
28
28
  transform: scale(1);
29
29
  }
30
+ .lib-xplat-pop-over-content.repositioning {
31
+ transition: none;
32
+ }
package/dist/components/PopOver/index.js CHANGED
@@ -15,8 +15,10 @@ import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
16
  const [position, setPosition] = React.useState({
17
17
  position: {},
18
- direction: "bottom"
18
+ direction: "bottom",
19
+ repositioning: false
19
20
  });
21
+ const placedRef = React.useRef(false);
20
22
  const calculatePosition = React.useCallback(() => {
21
23
  if (!triggerRef.current || !popRef.current) return;
22
24
  const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
41
43
  if (left < 8) left = 8;
42
44
  setPosition({
43
45
  position: { top, left },
44
- direction
46
+ direction,
47
+ repositioning: placedRef.current
45
48
  });
49
+ placedRef.current = true;
46
50
  }, [triggerRef, popRef]);
47
51
  React.useLayoutEffect(() => {
48
- if (!enabled) return;
52
+ if (!enabled) {
53
+ placedRef.current = false;
54
+ return;
55
+ }
49
56
  calculatePosition();
50
57
  const raf = requestAnimationFrame(calculatePosition);
51
58
  return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
60
67
  }, [calculatePosition, enabled, popRef]);
61
68
  React.useEffect(() => {
62
69
  if (!enabled) return;
63
- window.addEventListener("resize", calculatePosition);
64
- window.addEventListener("scroll", calculatePosition, true);
70
+ let raf = 0;
71
+ const onScrollOrResize = () => {
72
+ cancelAnimationFrame(raf);
73
+ raf = requestAnimationFrame(calculatePosition);
74
+ };
75
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
76
+ window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
65
77
  return () => {
66
- window.removeEventListener("resize", calculatePosition);
67
- window.removeEventListener("scroll", calculatePosition, true);
78
+ cancelAnimationFrame(raf);
79
+ window.removeEventListener("resize", onScrollOrResize);
80
+ window.removeEventListener("scroll", onScrollOrResize, true);
68
81
  };
69
82
  }, [calculatePosition, enabled]);
70
83
  return position;
@@ -179,6 +192,7 @@ var PopOver = (props) => {
179
192
  className: clsx_default(
180
193
  "lib-xplat-pop-over-content",
181
194
  position.direction,
195
+ position.repositioning && "repositioning",
182
196
  eventTrigger && "visible"
183
197
  ),
184
198
  ref: popRef,
package/dist/components/Select/index.cjs CHANGED
@@ -52,8 +52,10 @@ var import_react = __toESM(require("react"), 1);
52
52
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
53
53
  const [position, setPosition] = import_react.default.useState({
54
54
  position: {},
55
- direction: "bottom"
55
+ direction: "bottom",
56
+ repositioning: false
56
57
  });
58
+ const placedRef = import_react.default.useRef(false);
57
59
  const calculatePosition = import_react.default.useCallback(() => {
58
60
  if (!triggerRef.current || !popRef.current) return;
59
61
  const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -78,11 +80,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
78
80
  if (left < 8) left = 8;
79
81
  setPosition({
80
82
  position: { top, left },
81
- direction
83
+ direction,
84
+ repositioning: placedRef.current
82
85
  });
86
+ placedRef.current = true;
83
87
  }, [triggerRef, popRef]);
84
88
  import_react.default.useLayoutEffect(() => {
85
- if (!enabled) return;
89
+ if (!enabled) {
90
+ placedRef.current = false;
91
+ return;
92
+ }
86
93
  calculatePosition();
87
94
  const raf = requestAnimationFrame(calculatePosition);
88
95
  return () => cancelAnimationFrame(raf);
@@ -97,11 +104,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
97
104
  }, [calculatePosition, enabled, popRef]);
98
105
  import_react.default.useEffect(() => {
99
106
  if (!enabled) return;
100
- window.addEventListener("resize", calculatePosition);
101
- window.addEventListener("scroll", calculatePosition, true);
107
+ let raf = 0;
108
+ const onScrollOrResize = () => {
109
+ cancelAnimationFrame(raf);
110
+ raf = requestAnimationFrame(calculatePosition);
111
+ };
112
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
113
+ window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
102
114
  return () => {
103
- window.removeEventListener("resize", calculatePosition);
104
- window.removeEventListener("scroll", calculatePosition, true);
115
+ cancelAnimationFrame(raf);
116
+ window.removeEventListener("resize", onScrollOrResize);
117
+ window.removeEventListener("scroll", onScrollOrResize, true);
105
118
  };
106
119
  }, [calculatePosition, enabled]);
107
120
  return position;
@@ -1409,7 +1422,7 @@ var SelectRoot = (props) => {
1409
1422
  mounted && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
1410
1423
  "div",
1411
1424
  {
1412
- className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
1425
+ className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
1413
1426
  ref: contentRef,
1414
1427
  style: { ...position.position, width: triggerRef.current?.offsetWidth },
1415
1428
  role: "listbox",
package/dist/components/Select/index.css CHANGED
@@ -273,3 +273,6 @@
273
273
  cursor: not-allowed;
274
274
  color: var(--semantic-text-disabled);
275
275
  }
276
+ .lib-xplat-select-content.repositioning {
277
+ transition: none;
278
+ }
package/dist/components/Select/index.js CHANGED
@@ -15,8 +15,10 @@ import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
16
  const [position, setPosition] = React.useState({
17
17
  position: {},
18
- direction: "bottom"
18
+ direction: "bottom",
19
+ repositioning: false
19
20
  });
21
+ const placedRef = React.useRef(false);
20
22
  const calculatePosition = React.useCallback(() => {
21
23
  if (!triggerRef.current || !popRef.current) return;
22
24
  const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
41
43
  if (left < 8) left = 8;
42
44
  setPosition({
43
45
  position: { top, left },
44
- direction
46
+ direction,
47
+ repositioning: placedRef.current
45
48
  });
49
+ placedRef.current = true;
46
50
  }, [triggerRef, popRef]);
47
51
  React.useLayoutEffect(() => {
48
- if (!enabled) return;
52
+ if (!enabled) {
53
+ placedRef.current = false;
54
+ return;
55
+ }
49
56
  calculatePosition();
50
57
  const raf = requestAnimationFrame(calculatePosition);
51
58
  return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
60
67
  }, [calculatePosition, enabled, popRef]);
61
68
  React.useEffect(() => {
62
69
  if (!enabled) return;
63
- window.addEventListener("resize", calculatePosition);
64
- window.addEventListener("scroll", calculatePosition, true);
70
+ let raf = 0;
71
+ const onScrollOrResize = () => {
72
+ cancelAnimationFrame(raf);
73
+ raf = requestAnimationFrame(calculatePosition);
74
+ };
75
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
76
+ window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
65
77
  return () => {
66
- window.removeEventListener("resize", calculatePosition);
67
- window.removeEventListener("scroll", calculatePosition, true);
78
+ cancelAnimationFrame(raf);
79
+ window.removeEventListener("resize", onScrollOrResize);
80
+ window.removeEventListener("scroll", onScrollOrResize, true);
68
81
  };
69
82
  }, [calculatePosition, enabled]);
70
83
  return position;
@@ -1372,7 +1385,7 @@ var SelectRoot = (props) => {
1372
1385
  mounted && /* @__PURE__ */ jsx297(Portal_default, { children: /* @__PURE__ */ jsxs190(
1373
1386
  "div",
1374
1387
  {
1375
- className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
1388
+ className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass, position.repositioning && "repositioning"),
1376
1389
  ref: contentRef,
1377
1390
  style: { ...position.position, width: triggerRef.current?.offsetWidth },
1378
1391
  role: "listbox",
package/dist/components/TimePicker/index.cjs CHANGED
@@ -51,8 +51,10 @@ var import_react = __toESM(require("react"), 1);
51
51
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
52
52
  const [position, setPosition] = import_react.default.useState({
53
53
  position: {},
54
- direction: "bottom"
54
+ direction: "bottom",
55
+ repositioning: false
55
56
  });
57
+ const placedRef = import_react.default.useRef(false);
56
58
  const calculatePosition = import_react.default.useCallback(() => {
57
59
  if (!triggerRef.current || !popRef.current) return;
58
60
  const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -77,11 +79,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
77
79
  if (left < 8) left = 8;
78
80
  setPosition({
79
81
  position: { top, left },
80
- direction
82
+ direction,
83
+ repositioning: placedRef.current
81
84
  });
85
+ placedRef.current = true;
82
86
  }, [triggerRef, popRef]);
83
87
  import_react.default.useLayoutEffect(() => {
84
- if (!enabled) return;
88
+ if (!enabled) {
89
+ placedRef.current = false;
90
+ return;
91
+ }
85
92
  calculatePosition();
86
93
  const raf = requestAnimationFrame(calculatePosition);
87
94
  return () => cancelAnimationFrame(raf);
@@ -96,11 +103,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
96
103
  }, [calculatePosition, enabled, popRef]);
97
104
  import_react.default.useEffect(() => {
98
105
  if (!enabled) return;
99
- window.addEventListener("resize", calculatePosition);
100
- window.addEventListener("scroll", calculatePosition, true);
106
+ let raf = 0;
107
+ const onScrollOrResize = () => {
108
+ cancelAnimationFrame(raf);
109
+ raf = requestAnimationFrame(calculatePosition);
110
+ };
111
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
112
+ window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
101
113
  return () => {
102
- window.removeEventListener("resize", calculatePosition);
103
- window.removeEventListener("scroll", calculatePosition, true);
114
+ cancelAnimationFrame(raf);
115
+ window.removeEventListener("resize", onScrollOrResize);
116
+ window.removeEventListener("scroll", onScrollOrResize, true);
104
117
  };
105
118
  }, [calculatePosition, enabled]);
106
119
  return position;
@@ -414,7 +427,7 @@ var TimePicker = (props) => {
414
427
  "div",
415
428
  {
416
429
  ref: contentRef,
417
- className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
430
+ className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
418
431
  style: { ...position.position, width: triggerRef.current?.offsetWidth },
419
432
  role: "listbox",
420
433
  children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
package/dist/components/TimePicker/index.css CHANGED
@@ -170,3 +170,6 @@
170
170
  font-weight: var(--semantic-typo-label-1-m-weight);
171
171
  letter-spacing: var(--semantic-typo-label-1-m-ls);
172
172
  }
173
+ .lib-xplat-time-picker-content.repositioning {
174
+ transition: none;
175
+ }
package/dist/components/TimePicker/index.js CHANGED
@@ -15,8 +15,10 @@ import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
16
  const [position, setPosition] = React.useState({
17
17
  position: {},
18
- direction: "bottom"
18
+ direction: "bottom",
19
+ repositioning: false
19
20
  });
21
+ const placedRef = React.useRef(false);
20
22
  const calculatePosition = React.useCallback(() => {
21
23
  if (!triggerRef.current || !popRef.current) return;
22
24
  const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -41,11 +43,16 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
41
43
  if (left < 8) left = 8;
42
44
  setPosition({
43
45
  position: { top, left },
44
- direction
46
+ direction,
47
+ repositioning: placedRef.current
45
48
  });
49
+ placedRef.current = true;
46
50
  }, [triggerRef, popRef]);
47
51
  React.useLayoutEffect(() => {
48
- if (!enabled) return;
52
+ if (!enabled) {
53
+ placedRef.current = false;
54
+ return;
55
+ }
49
56
  calculatePosition();
50
57
  const raf = requestAnimationFrame(calculatePosition);
51
58
  return () => cancelAnimationFrame(raf);
@@ -60,11 +67,17 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
60
67
  }, [calculatePosition, enabled, popRef]);
61
68
  React.useEffect(() => {
62
69
  if (!enabled) return;
63
- window.addEventListener("resize", calculatePosition);
64
- window.addEventListener("scroll", calculatePosition, true);
70
+ let raf = 0;
71
+ const onScrollOrResize = () => {
72
+ cancelAnimationFrame(raf);
73
+ raf = requestAnimationFrame(calculatePosition);
74
+ };
75
+ window.addEventListener("resize", onScrollOrResize, { passive: true });
76
+ window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
65
77
  return () => {
66
- window.removeEventListener("resize", calculatePosition);
67
- window.removeEventListener("scroll", calculatePosition, true);
78
+ cancelAnimationFrame(raf);
79
+ window.removeEventListener("resize", onScrollOrResize);
80
+ window.removeEventListener("scroll", onScrollOrResize, true);
68
81
  };
69
82
  }, [calculatePosition, enabled]);
70
83
  return position;
@@ -378,7 +391,7 @@ var TimePicker = (props) => {
378
391
  "div",
379
392
  {
380
393
  ref: contentRef,
381
- className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit"),
394
+ className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
382
395
  style: { ...position.position, width: triggerRef.current?.offsetWidth },
383
396
  role: "listbox",
384
397
  children: options.map((t) => /* @__PURE__ */ jsx5(