@x-plat/design-system 0.5.38 → 0.5.40

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/components/Chart/index.cjs +14 -33
  2. package/dist/components/Chart/index.js +14 -33
  3. package/dist/components/index.cjs +14 -33
  4. package/dist/components/index.js +14 -33
  5. package/dist/index.cjs +14 -33
  6. package/dist/index.js +14 -33
  7. package/package.json +1 -1
package/dist/components/Chart/index.cjs CHANGED
@@ -80,47 +80,27 @@ var toSmoothPath = (points) => {
80
80
  }
81
81
  return d;
82
82
  };
83
- var RESIZE_SETTLE_MS = 150;
84
83
  var useChartSize = (ref) => {
85
84
  const [size, setSize] = import_react.default.useState({ width: 0, height: 0 });
86
- const settleTimer = import_react.default.useRef(0);
87
- const committedSize = import_react.default.useRef({ width: 0, height: 0 });
88
- const initialRef = import_react.default.useRef(true);
89
85
  import_react.default.useEffect(() => {
90
86
  const el = ref.current;
91
87
  if (!el) return;
88
+ let rafId = 0;
92
89
  const observer = new ResizeObserver((entries) => {
93
- const entry = entries[0];
94
- if (!entry) return;
95
- const { width, height } = entry.contentRect;
96
- const w = Math.floor(width);
97
- const h = Math.floor(height);
98
- if (w <= 0 || h <= 0) return;
99
- if (w === committedSize.current.width && h === committedSize.current.height) return;
100
- if (initialRef.current) {
101
- initialRef.current = false;
102
- committedSize.current = { width: w, height: h };
103
- setSize({ width: w, height: h });
104
- return;
105
- }
106
- const prev = committedSize.current;
107
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
108
- const svg = el.firstElementChild;
109
- svg.style.transformOrigin = "0 0";
110
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
111
- }
112
- window.clearTimeout(settleTimer.current);
113
- settleTimer.current = window.setTimeout(() => {
114
- if (el.firstElementChild) {
115
- el.firstElementChild.style.transform = "";
116
- }
117
- committedSize.current = { width: w, height: h };
118
- setSize({ width: w, height: h });
119
- }, RESIZE_SETTLE_MS);
90
+ cancelAnimationFrame(rafId);
91
+ rafId = requestAnimationFrame(() => {
92
+ const entry = entries[0];
93
+ if (!entry) return;
94
+ const { width, height } = entry.contentRect;
95
+ const w = Math.floor(width);
96
+ const h = Math.floor(height);
97
+ if (w <= 0 || h <= 0) return;
98
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
99
+ });
120
100
  });
121
101
  observer.observe(el);
122
102
  return () => {
123
- window.clearTimeout(settleTimer.current);
103
+ cancelAnimationFrame(rafId);
124
104
  observer.disconnect();
125
105
  };
126
106
  }, [ref]);
@@ -634,8 +614,9 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
634
614
  let left = x + TOOLTIP_OFFSET;
635
615
  let top = y - h - TOOLTIP_OFFSET;
636
616
  if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
637
- if (top < 0) top = y + TOOLTIP_OFFSET;
638
617
  if (left < 0) left = 0;
618
+ if (top < 0) top = y + TOOLTIP_OFFSET;
619
+ if (top + h > containerHeight) top = containerHeight - h;
639
620
  setPos({ left, top });
640
621
  }, [x, y, containerWidth, containerHeight]);
641
622
  const content = typeof children === "string" ? children : "";
package/dist/components/Chart/index.js CHANGED
@@ -44,47 +44,27 @@ var toSmoothPath = (points) => {
44
44
  }
45
45
  return d;
46
46
  };
47
- var RESIZE_SETTLE_MS = 150;
48
47
  var useChartSize = (ref) => {
49
48
  const [size, setSize] = React.useState({ width: 0, height: 0 });
50
- const settleTimer = React.useRef(0);
51
- const committedSize = React.useRef({ width: 0, height: 0 });
52
- const initialRef = React.useRef(true);
53
49
  React.useEffect(() => {
54
50
  const el = ref.current;
55
51
  if (!el) return;
52
+ let rafId = 0;
56
53
  const observer = new ResizeObserver((entries) => {
57
- const entry = entries[0];
58
- if (!entry) return;
59
- const { width, height } = entry.contentRect;
60
- const w = Math.floor(width);
61
- const h = Math.floor(height);
62
- if (w <= 0 || h <= 0) return;
63
- if (w === committedSize.current.width && h === committedSize.current.height) return;
64
- if (initialRef.current) {
65
- initialRef.current = false;
66
- committedSize.current = { width: w, height: h };
67
- setSize({ width: w, height: h });
68
- return;
69
- }
70
- const prev = committedSize.current;
71
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
72
- const svg = el.firstElementChild;
73
- svg.style.transformOrigin = "0 0";
74
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
75
- }
76
- window.clearTimeout(settleTimer.current);
77
- settleTimer.current = window.setTimeout(() => {
78
- if (el.firstElementChild) {
79
- el.firstElementChild.style.transform = "";
80
- }
81
- committedSize.current = { width: w, height: h };
82
- setSize({ width: w, height: h });
83
- }, RESIZE_SETTLE_MS);
54
+ cancelAnimationFrame(rafId);
55
+ rafId = requestAnimationFrame(() => {
56
+ const entry = entries[0];
57
+ if (!entry) return;
58
+ const { width, height } = entry.contentRect;
59
+ const w = Math.floor(width);
60
+ const h = Math.floor(height);
61
+ if (w <= 0 || h <= 0) return;
62
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
63
+ });
84
64
  });
85
65
  observer.observe(el);
86
66
  return () => {
87
- window.clearTimeout(settleTimer.current);
67
+ cancelAnimationFrame(rafId);
88
68
  observer.disconnect();
89
69
  };
90
70
  }, [ref]);
@@ -598,8 +578,9 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
598
578
  let left = x + TOOLTIP_OFFSET;
599
579
  let top = y - h - TOOLTIP_OFFSET;
600
580
  if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
601
- if (top < 0) top = y + TOOLTIP_OFFSET;
602
581
  if (left < 0) left = 0;
582
+ if (top < 0) top = y + TOOLTIP_OFFSET;
583
+ if (top + h > containerHeight) top = containerHeight - h;
603
584
  setPos({ left, top });
604
585
  }, [x, y, containerWidth, containerHeight]);
605
586
  const content = typeof children === "string" ? children : "";
package/dist/components/index.cjs CHANGED
@@ -2274,47 +2274,27 @@ var toSmoothPath = (points) => {
2274
2274
  }
2275
2275
  return d;
2276
2276
  };
2277
- var RESIZE_SETTLE_MS = 150;
2278
2277
  var useChartSize = (ref) => {
2279
2278
  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
2280
- const settleTimer = import_react6.default.useRef(0);
2281
- const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
2282
- const initialRef = import_react6.default.useRef(true);
2283
2279
  import_react6.default.useEffect(() => {
2284
2280
  const el = ref.current;
2285
2281
  if (!el) return;
2282
+ let rafId = 0;
2286
2283
  const observer = new ResizeObserver((entries) => {
2287
- const entry = entries[0];
2288
- if (!entry) return;
2289
- const { width, height } = entry.contentRect;
2290
- const w = Math.floor(width);
2291
- const h = Math.floor(height);
2292
- if (w <= 0 || h <= 0) return;
2293
- if (w === committedSize.current.width && h === committedSize.current.height) return;
2294
- if (initialRef.current) {
2295
- initialRef.current = false;
2296
- committedSize.current = { width: w, height: h };
2297
- setSize({ width: w, height: h });
2298
- return;
2299
- }
2300
- const prev = committedSize.current;
2301
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2302
- const svg = el.firstElementChild;
2303
- svg.style.transformOrigin = "0 0";
2304
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2305
- }
2306
- window.clearTimeout(settleTimer.current);
2307
- settleTimer.current = window.setTimeout(() => {
2308
- if (el.firstElementChild) {
2309
- el.firstElementChild.style.transform = "";
2310
- }
2311
- committedSize.current = { width: w, height: h };
2312
- setSize({ width: w, height: h });
2313
- }, RESIZE_SETTLE_MS);
2284
+ cancelAnimationFrame(rafId);
2285
+ rafId = requestAnimationFrame(() => {
2286
+ const entry = entries[0];
2287
+ if (!entry) return;
2288
+ const { width, height } = entry.contentRect;
2289
+ const w = Math.floor(width);
2290
+ const h = Math.floor(height);
2291
+ if (w <= 0 || h <= 0) return;
2292
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
2293
+ });
2314
2294
  });
2315
2295
  observer.observe(el);
2316
2296
  return () => {
2317
- window.clearTimeout(settleTimer.current);
2297
+ cancelAnimationFrame(rafId);
2318
2298
  observer.disconnect();
2319
2299
  };
2320
2300
  }, [ref]);
@@ -2828,8 +2808,9 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
2828
2808
  let left = x + TOOLTIP_OFFSET;
2829
2809
  let top = y - h - TOOLTIP_OFFSET;
2830
2810
  if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
2831
- if (top < 0) top = y + TOOLTIP_OFFSET;
2832
2811
  if (left < 0) left = 0;
2812
+ if (top < 0) top = y + TOOLTIP_OFFSET;
2813
+ if (top + h > containerHeight) top = containerHeight - h;
2833
2814
  setPos({ left, top });
2834
2815
  }, [x, y, containerWidth, containerHeight]);
2835
2816
  const content = typeof children === "string" ? children : "";
package/dist/components/index.js CHANGED
@@ -2184,47 +2184,27 @@ var toSmoothPath = (points) => {
2184
2184
  }
2185
2185
  return d;
2186
2186
  };
2187
- var RESIZE_SETTLE_MS = 150;
2188
2187
  var useChartSize = (ref) => {
2189
2188
  const [size, setSize] = React6.useState({ width: 0, height: 0 });
2190
- const settleTimer = React6.useRef(0);
2191
- const committedSize = React6.useRef({ width: 0, height: 0 });
2192
- const initialRef = React6.useRef(true);
2193
2189
  React6.useEffect(() => {
2194
2190
  const el = ref.current;
2195
2191
  if (!el) return;
2192
+ let rafId = 0;
2196
2193
  const observer = new ResizeObserver((entries) => {
2197
- const entry = entries[0];
2198
- if (!entry) return;
2199
- const { width, height } = entry.contentRect;
2200
- const w = Math.floor(width);
2201
- const h = Math.floor(height);
2202
- if (w <= 0 || h <= 0) return;
2203
- if (w === committedSize.current.width && h === committedSize.current.height) return;
2204
- if (initialRef.current) {
2205
- initialRef.current = false;
2206
- committedSize.current = { width: w, height: h };
2207
- setSize({ width: w, height: h });
2208
- return;
2209
- }
2210
- const prev = committedSize.current;
2211
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2212
- const svg = el.firstElementChild;
2213
- svg.style.transformOrigin = "0 0";
2214
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2215
- }
2216
- window.clearTimeout(settleTimer.current);
2217
- settleTimer.current = window.setTimeout(() => {
2218
- if (el.firstElementChild) {
2219
- el.firstElementChild.style.transform = "";
2220
- }
2221
- committedSize.current = { width: w, height: h };
2222
- setSize({ width: w, height: h });
2223
- }, RESIZE_SETTLE_MS);
2194
+ cancelAnimationFrame(rafId);
2195
+ rafId = requestAnimationFrame(() => {
2196
+ const entry = entries[0];
2197
+ if (!entry) return;
2198
+ const { width, height } = entry.contentRect;
2199
+ const w = Math.floor(width);
2200
+ const h = Math.floor(height);
2201
+ if (w <= 0 || h <= 0) return;
2202
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
2203
+ });
2224
2204
  });
2225
2205
  observer.observe(el);
2226
2206
  return () => {
2227
- window.clearTimeout(settleTimer.current);
2207
+ cancelAnimationFrame(rafId);
2228
2208
  observer.disconnect();
2229
2209
  };
2230
2210
  }, [ref]);
@@ -2738,8 +2718,9 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
2738
2718
  let left = x + TOOLTIP_OFFSET;
2739
2719
  let top = y - h - TOOLTIP_OFFSET;
2740
2720
  if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
2741
- if (top < 0) top = y + TOOLTIP_OFFSET;
2742
2721
  if (left < 0) left = 0;
2722
+ if (top < 0) top = y + TOOLTIP_OFFSET;
2723
+ if (top + h > containerHeight) top = containerHeight - h;
2743
2724
  setPos({ left, top });
2744
2725
  }, [x, y, containerWidth, containerHeight]);
2745
2726
  const content = typeof children === "string" ? children : "";
package/dist/index.cjs CHANGED
@@ -6673,47 +6673,27 @@ var toSmoothPath = (points) => {
6673
6673
  }
6674
6674
  return d;
6675
6675
  };
6676
- var RESIZE_SETTLE_MS = 150;
6677
6676
  var useChartSize = (ref) => {
6678
6677
  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
6679
- const settleTimer = import_react6.default.useRef(0);
6680
- const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
6681
- const initialRef = import_react6.default.useRef(true);
6682
6678
  import_react6.default.useEffect(() => {
6683
6679
  const el = ref.current;
6684
6680
  if (!el) return;
6681
+ let rafId = 0;
6685
6682
  const observer = new ResizeObserver((entries) => {
6686
- const entry = entries[0];
6687
- if (!entry) return;
6688
- const { width, height } = entry.contentRect;
6689
- const w = Math.floor(width);
6690
- const h = Math.floor(height);
6691
- if (w <= 0 || h <= 0) return;
6692
- if (w === committedSize.current.width && h === committedSize.current.height) return;
6693
- if (initialRef.current) {
6694
- initialRef.current = false;
6695
- committedSize.current = { width: w, height: h };
6696
- setSize({ width: w, height: h });
6697
- return;
6698
- }
6699
- const prev = committedSize.current;
6700
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6701
- const svg = el.firstElementChild;
6702
- svg.style.transformOrigin = "0 0";
6703
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6704
- }
6705
- window.clearTimeout(settleTimer.current);
6706
- settleTimer.current = window.setTimeout(() => {
6707
- if (el.firstElementChild) {
6708
- el.firstElementChild.style.transform = "";
6709
- }
6710
- committedSize.current = { width: w, height: h };
6711
- setSize({ width: w, height: h });
6712
- }, RESIZE_SETTLE_MS);
6683
+ cancelAnimationFrame(rafId);
6684
+ rafId = requestAnimationFrame(() => {
6685
+ const entry = entries[0];
6686
+ if (!entry) return;
6687
+ const { width, height } = entry.contentRect;
6688
+ const w = Math.floor(width);
6689
+ const h = Math.floor(height);
6690
+ if (w <= 0 || h <= 0) return;
6691
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
6692
+ });
6713
6693
  });
6714
6694
  observer.observe(el);
6715
6695
  return () => {
6716
- window.clearTimeout(settleTimer.current);
6696
+ cancelAnimationFrame(rafId);
6717
6697
  observer.disconnect();
6718
6698
  };
6719
6699
  }, [ref]);
@@ -7227,8 +7207,9 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
7227
7207
  let left = x + TOOLTIP_OFFSET;
7228
7208
  let top = y - h - TOOLTIP_OFFSET;
7229
7209
  if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
7230
- if (top < 0) top = y + TOOLTIP_OFFSET;
7231
7210
  if (left < 0) left = 0;
7211
+ if (top < 0) top = y + TOOLTIP_OFFSET;
7212
+ if (top + h > containerHeight) top = containerHeight - h;
7232
7213
  setPos({ left, top });
7233
7214
  }, [x, y, containerWidth, containerHeight]);
7234
7215
  const content = typeof children === "string" ? children : "";
package/dist/index.js CHANGED
@@ -6274,47 +6274,27 @@ var toSmoothPath = (points) => {
6274
6274
  }
6275
6275
  return d;
6276
6276
  };
6277
- var RESIZE_SETTLE_MS = 150;
6278
6277
  var useChartSize = (ref) => {
6279
6278
  const [size, setSize] = React6.useState({ width: 0, height: 0 });
6280
- const settleTimer = React6.useRef(0);
6281
- const committedSize = React6.useRef({ width: 0, height: 0 });
6282
- const initialRef = React6.useRef(true);
6283
6279
  React6.useEffect(() => {
6284
6280
  const el = ref.current;
6285
6281
  if (!el) return;
6282
+ let rafId = 0;
6286
6283
  const observer = new ResizeObserver((entries) => {
6287
- const entry = entries[0];
6288
- if (!entry) return;
6289
- const { width, height } = entry.contentRect;
6290
- const w = Math.floor(width);
6291
- const h = Math.floor(height);
6292
- if (w <= 0 || h <= 0) return;
6293
- if (w === committedSize.current.width && h === committedSize.current.height) return;
6294
- if (initialRef.current) {
6295
- initialRef.current = false;
6296
- committedSize.current = { width: w, height: h };
6297
- setSize({ width: w, height: h });
6298
- return;
6299
- }
6300
- const prev = committedSize.current;
6301
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6302
- const svg = el.firstElementChild;
6303
- svg.style.transformOrigin = "0 0";
6304
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6305
- }
6306
- window.clearTimeout(settleTimer.current);
6307
- settleTimer.current = window.setTimeout(() => {
6308
- if (el.firstElementChild) {
6309
- el.firstElementChild.style.transform = "";
6310
- }
6311
- committedSize.current = { width: w, height: h };
6312
- setSize({ width: w, height: h });
6313
- }, RESIZE_SETTLE_MS);
6284
+ cancelAnimationFrame(rafId);
6285
+ rafId = requestAnimationFrame(() => {
6286
+ const entry = entries[0];
6287
+ if (!entry) return;
6288
+ const { width, height } = entry.contentRect;
6289
+ const w = Math.floor(width);
6290
+ const h = Math.floor(height);
6291
+ if (w <= 0 || h <= 0) return;
6292
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
6293
+ });
6314
6294
  });
6315
6295
  observer.observe(el);
6316
6296
  return () => {
6317
- window.clearTimeout(settleTimer.current);
6297
+ cancelAnimationFrame(rafId);
6318
6298
  observer.disconnect();
6319
6299
  };
6320
6300
  }, [ref]);
@@ -6828,8 +6808,9 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, childr
6828
6808
  let left = x + TOOLTIP_OFFSET;
6829
6809
  let top = y - h - TOOLTIP_OFFSET;
6830
6810
  if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
6831
- if (top < 0) top = y + TOOLTIP_OFFSET;
6832
6811
  if (left < 0) left = 0;
6812
+ if (top < 0) top = y + TOOLTIP_OFFSET;
6813
+ if (top + h > containerHeight) top = containerHeight - h;
6833
6814
  setPos({ left, top });
6834
6815
  }, [x, y, containerWidth, containerHeight]);
6835
6816
  const content = typeof children === "string" ? children : "";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.38",
3
+ "version": "0.5.40",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",