@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/Dropdown/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;
@@ -181,7 +194,7 @@ var Dropdown = (props) => {
181
194
  const [visible, setVisible] = import_react4.default.useState(false);
182
195
  const triggerRef = import_react4.default.useRef(null);
183
196
  const menuRef = import_react4.default.useRef(null);
184
- const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
197
+ const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
185
198
  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
186
199
  useEscapeKey(isOpen, () => {
187
200
  setIsOpen(false);
@@ -216,7 +229,7 @@ var Dropdown = (props) => {
216
229
  "div",
217
230
  {
218
231
  ref: menuRef,
219
- className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
232
+ className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
220
233
  style: { top: position.top, left: position.left },
221
234
  role: "menu",
222
235
  children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/components/Dropdown/index.css CHANGED
@@ -57,3 +57,6 @@
57
57
  color: var(--semantic-text-disabled);
58
58
  cursor: not-allowed;
59
59
  }
60
+ .lib-xplat-dropdown-menu.repositioning {
61
+ transition: none;
62
+ }
package/dist/components/Dropdown/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;
@@ -145,7 +158,7 @@ var Dropdown = (props) => {
145
158
  const [visible, setVisible] = React4.useState(false);
146
159
  const triggerRef = React4.useRef(null);
147
160
  const menuRef = React4.useRef(null);
148
- const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
161
+ const { position, direction, repositioning } = useAutoPosition_default(triggerRef, menuRef, mounted);
149
162
  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
150
163
  useEscapeKey(isOpen, () => {
151
164
  setIsOpen(false);
@@ -180,7 +193,7 @@ var Dropdown = (props) => {
180
193
  "div",
181
194
  {
182
195
  ref: menuRef,
183
- className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
196
+ className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }, repositioning && "repositioning"),
184
197
  style: { top: position.top, left: position.left },
185
198
  role: "menu",
186
199
  children: items.map((item) => /* @__PURE__ */ jsx(