@x-plat/design-system 0.5.14 → 0.5.15

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 +9 -9
  2. package/dist/components/Chart/index.js +9 -9
  3. package/dist/components/index.cjs +9 -9
  4. package/dist/components/index.js +9 -9
  5. package/dist/index.cjs +9 -9
  6. package/dist/index.js +9 -9
  7. package/package.json +1 -1
package/dist/components/Chart/index.cjs CHANGED
@@ -83,9 +83,8 @@ var toSmoothPath = (points) => {
83
83
  var RESIZE_SETTLE_MS = 150;
84
84
  var useChartSize = (ref) => {
85
85
  const [size, setSize] = import_react.default.useState({ width: 0, height: 0 });
86
- const isResizing = import_react.default.useRef(false);
87
86
  const settleTimer = import_react.default.useRef(0);
88
- const lastSize = import_react.default.useRef({ width: 0, height: 0 });
87
+ const committedSize = import_react.default.useRef({ width: 0, height: 0 });
89
88
  const initialRef = import_react.default.useRef(true);
90
89
  import_react.default.useEffect(() => {
91
90
  const el = ref.current;
@@ -96,25 +95,26 @@ var useChartSize = (ref) => {
96
95
  const { width, height } = entry.contentRect;
97
96
  const w = Math.floor(width);
98
97
  const h = Math.floor(height);
99
- if (w === lastSize.current.width && h === lastSize.current.height) return;
100
- lastSize.current = { width: w, height: h };
98
+ if (w <= 0 || h <= 0) return;
99
+ if (w === committedSize.current.width && h === committedSize.current.height) return;
101
100
  if (initialRef.current) {
102
101
  initialRef.current = false;
102
+ committedSize.current = { width: w, height: h };
103
103
  setSize({ width: w, height: h });
104
104
  return;
105
105
  }
106
- isResizing.current = true;
107
- if (el.firstElementChild) {
106
+ const prev = committedSize.current;
107
+ if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
108
108
  const svg = el.firstElementChild;
109
109
  svg.style.transformOrigin = "0 0";
110
- svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
110
+ svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
111
111
  }
112
112
  window.clearTimeout(settleTimer.current);
113
113
  settleTimer.current = window.setTimeout(() => {
114
- isResizing.current = false;
115
114
  if (el.firstElementChild) {
116
115
  el.firstElementChild.style.transform = "";
117
116
  }
117
+ committedSize.current = { width: w, height: h };
118
118
  setSize({ width: w, height: h });
119
119
  }, RESIZE_SETTLE_MS);
120
120
  });
@@ -123,7 +123,7 @@ var useChartSize = (ref) => {
123
123
  window.clearTimeout(settleTimer.current);
124
124
  observer.disconnect();
125
125
  };
126
- }, [ref, size.width, size.height]);
126
+ }, [ref]);
127
127
  return size;
128
128
  };
129
129
  var useChartTooltip = (enabled) => {
package/dist/components/Chart/index.js CHANGED
@@ -47,9 +47,8 @@ var toSmoothPath = (points) => {
47
47
  var RESIZE_SETTLE_MS = 150;
48
48
  var useChartSize = (ref) => {
49
49
  const [size, setSize] = React.useState({ width: 0, height: 0 });
50
- const isResizing = React.useRef(false);
51
50
  const settleTimer = React.useRef(0);
52
- const lastSize = React.useRef({ width: 0, height: 0 });
51
+ const committedSize = React.useRef({ width: 0, height: 0 });
53
52
  const initialRef = React.useRef(true);
54
53
  React.useEffect(() => {
55
54
  const el = ref.current;
@@ -60,25 +59,26 @@ var useChartSize = (ref) => {
60
59
  const { width, height } = entry.contentRect;
61
60
  const w = Math.floor(width);
62
61
  const h = Math.floor(height);
63
- if (w === lastSize.current.width && h === lastSize.current.height) return;
64
- lastSize.current = { width: w, height: h };
62
+ if (w <= 0 || h <= 0) return;
63
+ if (w === committedSize.current.width && h === committedSize.current.height) return;
65
64
  if (initialRef.current) {
66
65
  initialRef.current = false;
66
+ committedSize.current = { width: w, height: h };
67
67
  setSize({ width: w, height: h });
68
68
  return;
69
69
  }
70
- isResizing.current = true;
71
- if (el.firstElementChild) {
70
+ const prev = committedSize.current;
71
+ if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
72
72
  const svg = el.firstElementChild;
73
73
  svg.style.transformOrigin = "0 0";
74
- svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
74
+ svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
75
75
  }
76
76
  window.clearTimeout(settleTimer.current);
77
77
  settleTimer.current = window.setTimeout(() => {
78
- isResizing.current = false;
79
78
  if (el.firstElementChild) {
80
79
  el.firstElementChild.style.transform = "";
81
80
  }
81
+ committedSize.current = { width: w, height: h };
82
82
  setSize({ width: w, height: h });
83
83
  }, RESIZE_SETTLE_MS);
84
84
  });
@@ -87,7 +87,7 @@ var useChartSize = (ref) => {
87
87
  window.clearTimeout(settleTimer.current);
88
88
  observer.disconnect();
89
89
  };
90
- }, [ref, size.width, size.height]);
90
+ }, [ref]);
91
91
  return size;
92
92
  };
93
93
  var useChartTooltip = (enabled) => {
package/dist/components/index.cjs CHANGED
@@ -2154,9 +2154,8 @@ var toSmoothPath = (points) => {
2154
2154
  var RESIZE_SETTLE_MS = 150;
2155
2155
  var useChartSize = (ref) => {
2156
2156
  const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
2157
- const isResizing = import_react5.default.useRef(false);
2158
2157
  const settleTimer = import_react5.default.useRef(0);
2159
- const lastSize = import_react5.default.useRef({ width: 0, height: 0 });
2158
+ const committedSize = import_react5.default.useRef({ width: 0, height: 0 });
2160
2159
  const initialRef = import_react5.default.useRef(true);
2161
2160
  import_react5.default.useEffect(() => {
2162
2161
  const el = ref.current;
@@ -2167,25 +2166,26 @@ var useChartSize = (ref) => {
2167
2166
  const { width, height } = entry.contentRect;
2168
2167
  const w = Math.floor(width);
2169
2168
  const h = Math.floor(height);
2170
- if (w === lastSize.current.width && h === lastSize.current.height) return;
2171
- lastSize.current = { width: w, height: h };
2169
+ if (w <= 0 || h <= 0) return;
2170
+ if (w === committedSize.current.width && h === committedSize.current.height) return;
2172
2171
  if (initialRef.current) {
2173
2172
  initialRef.current = false;
2173
+ committedSize.current = { width: w, height: h };
2174
2174
  setSize({ width: w, height: h });
2175
2175
  return;
2176
2176
  }
2177
- isResizing.current = true;
2178
- if (el.firstElementChild) {
2177
+ const prev = committedSize.current;
2178
+ if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2179
2179
  const svg = el.firstElementChild;
2180
2180
  svg.style.transformOrigin = "0 0";
2181
- svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
2181
+ svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2182
2182
  }
2183
2183
  window.clearTimeout(settleTimer.current);
2184
2184
  settleTimer.current = window.setTimeout(() => {
2185
- isResizing.current = false;
2186
2185
  if (el.firstElementChild) {
2187
2186
  el.firstElementChild.style.transform = "";
2188
2187
  }
2188
+ committedSize.current = { width: w, height: h };
2189
2189
  setSize({ width: w, height: h });
2190
2190
  }, RESIZE_SETTLE_MS);
2191
2191
  });
@@ -2194,7 +2194,7 @@ var useChartSize = (ref) => {
2194
2194
  window.clearTimeout(settleTimer.current);
2195
2195
  observer.disconnect();
2196
2196
  };
2197
- }, [ref, size.width, size.height]);
2197
+ }, [ref]);
2198
2198
  return size;
2199
2199
  };
2200
2200
  var useChartTooltip = (enabled) => {
package/dist/components/index.js CHANGED
@@ -2066,9 +2066,8 @@ var toSmoothPath = (points) => {
2066
2066
  var RESIZE_SETTLE_MS = 150;
2067
2067
  var useChartSize = (ref) => {
2068
2068
  const [size, setSize] = React5.useState({ width: 0, height: 0 });
2069
- const isResizing = React5.useRef(false);
2070
2069
  const settleTimer = React5.useRef(0);
2071
- const lastSize = React5.useRef({ width: 0, height: 0 });
2070
+ const committedSize = React5.useRef({ width: 0, height: 0 });
2072
2071
  const initialRef = React5.useRef(true);
2073
2072
  React5.useEffect(() => {
2074
2073
  const el = ref.current;
@@ -2079,25 +2078,26 @@ var useChartSize = (ref) => {
2079
2078
  const { width, height } = entry.contentRect;
2080
2079
  const w = Math.floor(width);
2081
2080
  const h = Math.floor(height);
2082
- if (w === lastSize.current.width && h === lastSize.current.height) return;
2083
- lastSize.current = { width: w, height: h };
2081
+ if (w <= 0 || h <= 0) return;
2082
+ if (w === committedSize.current.width && h === committedSize.current.height) return;
2084
2083
  if (initialRef.current) {
2085
2084
  initialRef.current = false;
2085
+ committedSize.current = { width: w, height: h };
2086
2086
  setSize({ width: w, height: h });
2087
2087
  return;
2088
2088
  }
2089
- isResizing.current = true;
2090
- if (el.firstElementChild) {
2089
+ const prev = committedSize.current;
2090
+ if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2091
2091
  const svg = el.firstElementChild;
2092
2092
  svg.style.transformOrigin = "0 0";
2093
- svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
2093
+ svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2094
2094
  }
2095
2095
  window.clearTimeout(settleTimer.current);
2096
2096
  settleTimer.current = window.setTimeout(() => {
2097
- isResizing.current = false;
2098
2097
  if (el.firstElementChild) {
2099
2098
  el.firstElementChild.style.transform = "";
2100
2099
  }
2100
+ committedSize.current = { width: w, height: h };
2101
2101
  setSize({ width: w, height: h });
2102
2102
  }, RESIZE_SETTLE_MS);
2103
2103
  });
@@ -2106,7 +2106,7 @@ var useChartSize = (ref) => {
2106
2106
  window.clearTimeout(settleTimer.current);
2107
2107
  observer.disconnect();
2108
2108
  };
2109
- }, [ref, size.width, size.height]);
2109
+ }, [ref]);
2110
2110
  return size;
2111
2111
  };
2112
2112
  var useChartTooltip = (enabled) => {
package/dist/index.cjs CHANGED
@@ -6565,9 +6565,8 @@ var toSmoothPath = (points) => {
6565
6565
  var RESIZE_SETTLE_MS = 150;
6566
6566
  var useChartSize = (ref) => {
6567
6567
  const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
6568
- const isResizing = import_react5.default.useRef(false);
6569
6568
  const settleTimer = import_react5.default.useRef(0);
6570
- const lastSize = import_react5.default.useRef({ width: 0, height: 0 });
6569
+ const committedSize = import_react5.default.useRef({ width: 0, height: 0 });
6571
6570
  const initialRef = import_react5.default.useRef(true);
6572
6571
  import_react5.default.useEffect(() => {
6573
6572
  const el = ref.current;
@@ -6578,25 +6577,26 @@ var useChartSize = (ref) => {
6578
6577
  const { width, height } = entry.contentRect;
6579
6578
  const w = Math.floor(width);
6580
6579
  const h = Math.floor(height);
6581
- if (w === lastSize.current.width && h === lastSize.current.height) return;
6582
- lastSize.current = { width: w, height: h };
6580
+ if (w <= 0 || h <= 0) return;
6581
+ if (w === committedSize.current.width && h === committedSize.current.height) return;
6583
6582
  if (initialRef.current) {
6584
6583
  initialRef.current = false;
6584
+ committedSize.current = { width: w, height: h };
6585
6585
  setSize({ width: w, height: h });
6586
6586
  return;
6587
6587
  }
6588
- isResizing.current = true;
6589
- if (el.firstElementChild) {
6588
+ const prev = committedSize.current;
6589
+ if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6590
6590
  const svg = el.firstElementChild;
6591
6591
  svg.style.transformOrigin = "0 0";
6592
- svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
6592
+ svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6593
6593
  }
6594
6594
  window.clearTimeout(settleTimer.current);
6595
6595
  settleTimer.current = window.setTimeout(() => {
6596
- isResizing.current = false;
6597
6596
  if (el.firstElementChild) {
6598
6597
  el.firstElementChild.style.transform = "";
6599
6598
  }
6599
+ committedSize.current = { width: w, height: h };
6600
6600
  setSize({ width: w, height: h });
6601
6601
  }, RESIZE_SETTLE_MS);
6602
6602
  });
@@ -6605,7 +6605,7 @@ var useChartSize = (ref) => {
6605
6605
  window.clearTimeout(settleTimer.current);
6606
6606
  observer.disconnect();
6607
6607
  };
6608
- }, [ref, size.width, size.height]);
6608
+ }, [ref]);
6609
6609
  return size;
6610
6610
  };
6611
6611
  var useChartTooltip = (enabled) => {
package/dist/index.js CHANGED
@@ -6168,9 +6168,8 @@ var toSmoothPath = (points) => {
6168
6168
  var RESIZE_SETTLE_MS = 150;
6169
6169
  var useChartSize = (ref) => {
6170
6170
  const [size, setSize] = React5.useState({ width: 0, height: 0 });
6171
- const isResizing = React5.useRef(false);
6172
6171
  const settleTimer = React5.useRef(0);
6173
- const lastSize = React5.useRef({ width: 0, height: 0 });
6172
+ const committedSize = React5.useRef({ width: 0, height: 0 });
6174
6173
  const initialRef = React5.useRef(true);
6175
6174
  React5.useEffect(() => {
6176
6175
  const el = ref.current;
@@ -6181,25 +6180,26 @@ var useChartSize = (ref) => {
6181
6180
  const { width, height } = entry.contentRect;
6182
6181
  const w = Math.floor(width);
6183
6182
  const h = Math.floor(height);
6184
- if (w === lastSize.current.width && h === lastSize.current.height) return;
6185
- lastSize.current = { width: w, height: h };
6183
+ if (w <= 0 || h <= 0) return;
6184
+ if (w === committedSize.current.width && h === committedSize.current.height) return;
6186
6185
  if (initialRef.current) {
6187
6186
  initialRef.current = false;
6187
+ committedSize.current = { width: w, height: h };
6188
6188
  setSize({ width: w, height: h });
6189
6189
  return;
6190
6190
  }
6191
- isResizing.current = true;
6192
- if (el.firstElementChild) {
6191
+ const prev = committedSize.current;
6192
+ if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6193
6193
  const svg = el.firstElementChild;
6194
6194
  svg.style.transformOrigin = "0 0";
6195
- svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
6195
+ svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6196
6196
  }
6197
6197
  window.clearTimeout(settleTimer.current);
6198
6198
  settleTimer.current = window.setTimeout(() => {
6199
- isResizing.current = false;
6200
6199
  if (el.firstElementChild) {
6201
6200
  el.firstElementChild.style.transform = "";
6202
6201
  }
6202
+ committedSize.current = { width: w, height: h };
6203
6203
  setSize({ width: w, height: h });
6204
6204
  }, RESIZE_SETTLE_MS);
6205
6205
  });
@@ -6208,7 +6208,7 @@ var useChartSize = (ref) => {
6208
6208
  window.clearTimeout(settleTimer.current);
6209
6209
  observer.disconnect();
6210
6210
  };
6211
- }, [ref, size.width, size.height]);
6211
+ }, [ref]);
6212
6212
  return size;
6213
6213
  };
6214
6214
  var useChartTooltip = (enabled) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.14",
3
+ "version": "0.5.15",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",