@pdg/react-table 1.1.10 → 1.1.11

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 (3) hide show
  1. package/dist/index.esm.js +689 -695
  2. package/dist/index.js +689 -695
  3. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -6,54 +6,7 @@
6
6
  style.innerHTML = css;
7
7
  document.head.appendChild(style);
8
8
  return css;
9
- }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}");/******************************************************************************
10
- Copyright (c) Microsoft Corporation.
11
-
12
- Permission to use, copy, modify, and/or distribute this software for any
13
- purpose with or without fee is hereby granted.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
16
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
17
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
18
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
- PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
24
-
25
-
26
- var __assign$2 = function() {
27
- __assign$2 = Object.assign || function __assign(t) {
28
- for (var s, i = 1, n = arguments.length; i < n; i++) {
29
- s = arguments[i];
30
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
31
- }
32
- return t;
33
- };
34
- return __assign$2.apply(this, arguments);
35
- };
36
-
37
- function __rest$1(s, e) {
38
- var t = {};
39
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
40
- t[p] = s[p];
41
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
42
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
43
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
44
- t[p[i]] = s[p[i]];
45
- }
46
- return t;
47
- }
48
-
49
- function __makeTemplateObject(cooked, raw) {
50
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
51
- return cooked;
52
- }
53
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
54
- var e = new Error(message);
55
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
56
- };var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
9
+ }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}");var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
57
10
 
58
11
  function getDefaultExportFromCjs (x) {
59
12
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -138,14 +91,36 @@ function requireClassnames () {
138
91
  } (classnames));
139
92
  return classnames.exports;
140
93
  }var classnamesExports = requireClassnames();
141
- var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);var Label = material.styled(material.Box)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n font-size: 12px;\n font-weight: bold;\n"], ["\n font-size: 12px;\n font-weight: bold;\n"])));
142
- var ValueWrap = material.styled(material.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 3px;\n position: relative;\n display: flex;\n flex-direction: row;\n"], ["\n margin-top: 3px;\n position: relative;\n display: flex;\n flex-direction: row;\n"])));
143
- var Value = material.styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
144
- var ValueEllipsis = material.styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n position: relative;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n flex: 1;\n position: relative;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
145
- var ValueClipboard = material.styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
146
- var ClipboardIconButton = material.styled(material.IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-top: -10px;\n margin-bottom: -10px;\n"], ["\n margin-top: -10px;\n margin-bottom: -10px;\n"])));
147
- var Line = material.styled('div')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-top: 1px solid #efefef;\n height: 1px;\n flex: 1;\n"], ["\n border-top: 1px solid #efefef;\n height: 1px;\n flex: 1;\n"])));
148
- var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;function getTableColumnAlign(column, defaultAlign) {
94
+ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);const Label = material.styled(material.Box) `
95
+ font-size: 12px;
96
+ font-weight: bold;
97
+ `;
98
+ const ValueWrap = material.styled(material.Box) `
99
+ margin-top: 3px;
100
+ position: relative;
101
+ display: flex;
102
+ flex-direction: row;
103
+ `;
104
+ const Value = material.styled('div') `
105
+ flex: 1;
106
+ `;
107
+ const ValueEllipsis = material.styled('div') `
108
+ flex: 1;
109
+ position: relative;
110
+ overflow: hidden;
111
+ text-overflow: ellipsis;
112
+ white-space: nowrap;
113
+ `;
114
+ const ValueClipboard = material.styled('div') ``;
115
+ const ClipboardIconButton = material.styled(material.IconButton) `
116
+ margin-top: -10px;
117
+ margin-bottom: -10px;
118
+ `;
119
+ const Line = material.styled('div') `
120
+ border-top: 1px solid #efefef;
121
+ height: 1px;
122
+ flex: 1;
123
+ `;function getTableColumnAlign(column, defaultAlign) {
149
124
  switch (column.type) {
150
125
  case 'number':
151
126
  return column.align ? column.align : 'right';
@@ -153,21 +128,17 @@ var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4, te
153
128
  return column.align || defaultAlign;
154
129
  }
155
130
  }
156
- function combineSx() {
157
- var sx = [];
158
- for (var _i = 0; _i < arguments.length; _i++) {
159
- sx[_i] = arguments[_i];
160
- }
161
- var finalSx = [];
131
+ function combineSx(...sx) {
132
+ const finalSx = [];
162
133
  if (Array.isArray(finalSx)) {
163
- sx.forEach(function (v) { return v && finalSx.push.apply(finalSx, (Array.isArray(v) ? v : [v])); });
134
+ sx.forEach((v) => v && finalSx.push(...(Array.isArray(v) ? v : [v])));
164
135
  }
165
136
  return finalSx;
166
137
  }
167
138
  function typographyColorToSxColor(color) {
168
139
  if (typeof color === 'string') {
169
140
  if (['primary', 'secondary', 'info', 'warning', 'error'].includes(color)) {
170
- return "".concat(color, ".main");
141
+ return `${color}.main`;
171
142
  }
172
143
  else if (color === 'text') {
173
144
  return 'text.primary';
@@ -191,179 +162,173 @@ function requireDayjs_min () {
191
162
  } (dayjs_min$1));
192
163
  return dayjs_min$1.exports;
193
164
  }var dayjs_minExports = requireDayjs_min();
194
- var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);var PInfoTable = function (_a) {
165
+ var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);const PInfoTable = ({ cols, spacing = 2, columnSpacing, rowSpacing = 3, className, style, sx, labelClassName, labelColor = 'primary', labelStyle, labelSx, dividerColor = 'gray', valueClassName, valueStyle, valueSx, ellipsis, valueUnderline, info, items, onCopyToClipboard, }) => {
195
166
  /********************************************************************************************************************
196
167
  * Memo
197
168
  * ******************************************************************************************************************/
198
- var cols = _a.cols, _b = _a.spacing, spacing = _b === void 0 ? 2 : _b, columnSpacing = _a.columnSpacing, _c = _a.rowSpacing, rowSpacing = _c === void 0 ? 3 : _c, className = _a.className, style = _a.style, sx = _a.sx, labelClassName = _a.labelClassName, _d = _a.labelColor, labelColor = _d === void 0 ? 'primary' : _d, labelStyle = _a.labelStyle, labelSx = _a.labelSx, _e = _a.dividerColor, dividerColor = _e === void 0 ? 'gray' : _e, valueClassName = _a.valueClassName, valueStyle = _a.valueStyle, valueSx = _a.valueSx, ellipsis = _a.ellipsis, valueUnderline = _a.valueUnderline, info = _a.info, items = _a.items, onCopyToClipboard = _a.onCopyToClipboard;
199
- var renderItems = React.useMemo(function () {
200
- return items.filter(function (item) { return !!item && (!item.onHide || !item.onHide(info)); }).map(function (item) {
201
- /** data */
202
- var data = undefined;
203
- if (item.name !== undefined) {
204
- if (info[item.name] !== undefined) {
205
- if (info[item.name] instanceof Date) {
206
- data = dayjs(info[item.name]).format('YYYY-MM-DD HH:mm:ss');
207
- }
208
- else if (info[item.name] instanceof dayjs) {
209
- data = info[item.name].format('YYYY-MM-DD HH:mm:ss');
210
- }
211
- else {
212
- data = info[item.name];
213
- }
169
+ const renderItems = React.useMemo(() => items.filter((item) => !!item && (!item.onHide || !item.onHide(info))).map((item) => {
170
+ /** data */
171
+ let data = undefined;
172
+ if (item.name !== undefined) {
173
+ if (info[item.name] !== undefined) {
174
+ if (info[item.name] instanceof Date) {
175
+ data = dayjs(info[item.name]).format('YYYY-MM-DD HH:mm:ss');
176
+ }
177
+ else if (info[item.name] instanceof dayjs) {
178
+ data = info[item.name].format('YYYY-MM-DD HH:mm:ss');
179
+ }
180
+ else {
181
+ data = info[item.name];
214
182
  }
215
183
  }
216
- if (item.onRender) {
217
- data = item.onRender(info);
218
- }
219
- else if (compare.notEmpty(data)) {
220
- switch (item.type) {
221
- case 'number':
222
- if (typeof data === 'string' || typeof data === 'number') {
223
- data = formatting.formatNumber(data);
224
- if (item.numberPrefix) {
225
- data = (React.createElement(React.Fragment, null,
226
- React.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
227
- data));
228
- }
229
- if (item.numberSuffix) {
230
- data = (React.createElement(React.Fragment, null,
231
- data,
232
- React.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
233
- }
234
- }
235
- break;
236
- case 'tel':
237
- if (typeof data === 'string') {
238
- data = formatting.formatTelNo(data);
239
- }
240
- break;
241
- case 'email':
242
- if (typeof data === 'string') {
243
- data = (React.createElement(React.Fragment, null,
244
- React.createElement("a", { href: "mailto:".concat(data) }, data)));
245
- }
246
- break;
247
- case 'url':
248
- if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
249
- data = (React.createElement(React.Fragment, null,
250
- React.createElement("a", { href: data, target: '_blank' }, data)));
251
- }
252
- break;
253
- case 'business_no':
254
- if (typeof data === 'string') {
255
- data = formatting.formatBusinessNo(data);
256
- }
257
- break;
258
- case 'personal_no':
259
- if (typeof data === 'string') {
260
- data = formatting.formatPersonalNo(data);
261
- }
262
- break;
263
- case 'date':
264
- if (typeof data === 'string' || typeof data === 'number') {
265
- data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
266
- }
267
- break;
268
- case 'datetime':
269
- if (typeof data === 'string' || typeof data === 'number') {
270
- var dt = dayjs(data, item.dateFormat);
271
- data = (React.createElement(React.Fragment, null,
272
- React.createElement("span", null, dt.format('YYYY-MM-DD')),
273
- item.dateTwoLine ? React.createElement("br", null) : ' ',
274
- React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
275
- }
276
- break;
277
- case 'date-hour':
278
- if (typeof data === 'string' || typeof data === 'number') {
279
- var dt = dayjs(data, item.dateFormat);
184
+ }
185
+ if (item.onRender) {
186
+ data = item.onRender(info);
187
+ }
188
+ else if (compare.notEmpty(data)) {
189
+ switch (item.type) {
190
+ case 'number':
191
+ if (typeof data === 'string' || typeof data === 'number') {
192
+ data = formatting.formatNumber(data);
193
+ if (item.numberPrefix) {
280
194
  data = (React.createElement(React.Fragment, null,
281
- React.createElement("span", null, dt.format('YYYY-MM-DD')),
282
- item.dateTwoLine ? React.createElement("br", null) : ' ',
283
- React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
195
+ React.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
196
+ data));
284
197
  }
285
- break;
286
- case 'date-minute':
287
- if (typeof data === 'string' || typeof data === 'number') {
288
- var dt = dayjs(data, item.dateFormat);
198
+ if (item.numberSuffix) {
289
199
  data = (React.createElement(React.Fragment, null,
290
- React.createElement("span", null, dt.format('YYYY-MM-DD')),
291
- item.dateTwoLine ? React.createElement("br", null) : ' ',
292
- React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
200
+ data,
201
+ React.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
293
202
  }
294
- break;
295
- }
296
- }
297
- if (compare.empty(data))
298
- data = item.onRenderEmpty ? item.onRenderEmpty(info) : React.createElement(React.Fragment, null, "\u00A0");
299
- /** copyToClipboardText */
300
- var copyToClipboardText = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
301
- /** sizeProps */
302
- var sizeProps = {};
303
- if (typeof cols === 'number') {
304
- sizeProps.xs = 12 / cols;
305
- }
306
- else {
307
- if (cols.xs)
308
- sizeProps.xs = 12 / cols.xs;
309
- if (cols.sm)
310
- sizeProps.sm = 12 / cols.sm;
311
- if (cols.md)
312
- sizeProps.md = 12 / cols.md;
313
- if (cols.lg)
314
- sizeProps.lg = 12 / cols.lg;
315
- if (cols.xl)
316
- sizeProps.xl = 12 / cols.xl;
203
+ }
204
+ break;
205
+ case 'tel':
206
+ if (typeof data === 'string') {
207
+ data = formatting.formatTelNo(data);
208
+ }
209
+ break;
210
+ case 'email':
211
+ if (typeof data === 'string') {
212
+ data = (React.createElement(React.Fragment, null,
213
+ React.createElement("a", { href: `mailto:${data}` }, data)));
214
+ }
215
+ break;
216
+ case 'url':
217
+ if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
218
+ data = (React.createElement(React.Fragment, null,
219
+ React.createElement("a", { href: data, target: '_blank' }, data)));
220
+ }
221
+ break;
222
+ case 'business_no':
223
+ if (typeof data === 'string') {
224
+ data = formatting.formatBusinessNo(data);
225
+ }
226
+ break;
227
+ case 'personal_no':
228
+ if (typeof data === 'string') {
229
+ data = formatting.formatPersonalNo(data);
230
+ }
231
+ break;
232
+ case 'date':
233
+ if (typeof data === 'string' || typeof data === 'number') {
234
+ data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
235
+ }
236
+ break;
237
+ case 'datetime':
238
+ if (typeof data === 'string' || typeof data === 'number') {
239
+ const dt = dayjs(data, item.dateFormat);
240
+ data = (React.createElement(React.Fragment, null,
241
+ React.createElement("span", null, dt.format('YYYY-MM-DD')),
242
+ item.dateTwoLine ? React.createElement("br", null) : ' ',
243
+ React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
244
+ }
245
+ break;
246
+ case 'date-hour':
247
+ if (typeof data === 'string' || typeof data === 'number') {
248
+ const dt = dayjs(data, item.dateFormat);
249
+ data = (React.createElement(React.Fragment, null,
250
+ React.createElement("span", null, dt.format('YYYY-MM-DD')),
251
+ item.dateTwoLine ? React.createElement("br", null) : ' ',
252
+ React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
253
+ }
254
+ break;
255
+ case 'date-minute':
256
+ if (typeof data === 'string' || typeof data === 'number') {
257
+ const dt = dayjs(data, item.dateFormat);
258
+ data = (React.createElement(React.Fragment, null,
259
+ React.createElement("span", null, dt.format('YYYY-MM-DD')),
260
+ item.dateTwoLine ? React.createElement("br", null) : ' ',
261
+ React.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
262
+ }
263
+ break;
317
264
  }
318
- if (item.xs)
319
- sizeProps.xs = item.xs;
320
- if (item.sm)
321
- sizeProps.sm = item.sm;
322
- if (item.md)
323
- sizeProps.md = item.md;
324
- if (item.lg)
325
- sizeProps.lg = item.lg;
326
- if (item.xl)
327
- sizeProps.xl = item.xl;
328
- if (item.onXs)
329
- sizeProps.xs = item.onXs(info);
330
- if (item.onSm)
331
- sizeProps.sm = item.onSm(info);
332
- if (item.onMd)
333
- sizeProps.md = item.onMd(info);
334
- if (item.onLg)
335
- sizeProps.lg = item.onLg(info);
336
- if (item.onXl)
337
- sizeProps.xl = item.onXl(info);
338
- return { item: item, data: data, copyToClipboardText: copyToClipboardText, sizeProps: sizeProps };
339
- });
340
- }, [info, items, cols]);
341
- var content = React.useMemo(function () {
342
- return renderItems.map(function (_a, idx) {
343
- var item = _a.item, data = _a.data, copyToClipboardText = _a.copyToClipboardText, sizeProps = _a.sizeProps;
344
- var finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
345
- var finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
346
- var finalValueSx = combineSx(valueSx, item.valueSx);
347
- var valueUnderlineStyle = valueUnderline
348
- ? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
349
- : undefined;
350
- return item.type === 'divider' ? (React.createElement(material.Grid, { key: idx, size: { xs: 12 } },
351
- React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
352
- item.icon && (React.createElement(reactComponent.PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
353
- item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
354
- item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
355
- React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(material.Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
356
- React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
357
- item.icon && (React.createElement(reactComponent.PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
358
- React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
359
- React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign$2(__assign$2(__assign$2({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
360
- item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
361
- item.clipboard && compare.notEmpty(copyToClipboardText) && (React.createElement(ValueClipboard, null,
362
- React.createElement(reactComponent.PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
363
- React.createElement(ClipboardIconButton, __assign$2({ size: 'small', color: 'primary' }, item.clipboardProps),
364
- React.createElement(reactComponent.PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
365
- });
366
- }, [
265
+ }
266
+ if (compare.empty(data))
267
+ data = item.onRenderEmpty ? item.onRenderEmpty(info) : React.createElement(React.Fragment, null, "\u00A0");
268
+ /** copyToClipboardText */
269
+ const copyToClipboardText = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
270
+ /** sizeProps */
271
+ const sizeProps = {};
272
+ if (typeof cols === 'number') {
273
+ sizeProps.xs = 12 / cols;
274
+ }
275
+ else {
276
+ if (cols.xs)
277
+ sizeProps.xs = 12 / cols.xs;
278
+ if (cols.sm)
279
+ sizeProps.sm = 12 / cols.sm;
280
+ if (cols.md)
281
+ sizeProps.md = 12 / cols.md;
282
+ if (cols.lg)
283
+ sizeProps.lg = 12 / cols.lg;
284
+ if (cols.xl)
285
+ sizeProps.xl = 12 / cols.xl;
286
+ }
287
+ if (item.xs)
288
+ sizeProps.xs = item.xs;
289
+ if (item.sm)
290
+ sizeProps.sm = item.sm;
291
+ if (item.md)
292
+ sizeProps.md = item.md;
293
+ if (item.lg)
294
+ sizeProps.lg = item.lg;
295
+ if (item.xl)
296
+ sizeProps.xl = item.xl;
297
+ if (item.onXs)
298
+ sizeProps.xs = item.onXs(info);
299
+ if (item.onSm)
300
+ sizeProps.sm = item.onSm(info);
301
+ if (item.onMd)
302
+ sizeProps.md = item.onMd(info);
303
+ if (item.onLg)
304
+ sizeProps.lg = item.onLg(info);
305
+ if (item.onXl)
306
+ sizeProps.xl = item.onXl(info);
307
+ return { item, data, copyToClipboardText, sizeProps };
308
+ }), [info, items, cols]);
309
+ const content = React.useMemo(() => renderItems.map(({ item, data, copyToClipboardText, sizeProps }, idx) => {
310
+ const finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
311
+ const finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
312
+ const finalValueSx = combineSx(valueSx, item.valueSx);
313
+ const valueUnderlineStyle = valueUnderline
314
+ ? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
315
+ : undefined;
316
+ return item.type === 'divider' ? (React.createElement(material.Grid, { key: idx, size: { xs: 12 } },
317
+ React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
318
+ item.icon && (React.createElement(reactComponent.PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
319
+ item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: Object.assign(Object.assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
320
+ item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
321
+ React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(material.Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
322
+ React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
323
+ item.icon && (React.createElement(reactComponent.PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
324
+ React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: Object.assign(Object.assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
325
+ React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: Object.assign(Object.assign(Object.assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
326
+ item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
327
+ item.clipboard && compare.notEmpty(copyToClipboardText) && (React.createElement(ValueClipboard, null,
328
+ React.createElement(reactComponent.PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? () => onCopyToClipboard(item, copyToClipboardText) : undefined },
329
+ React.createElement(ClipboardIconButton, Object.assign({ size: 'small', color: 'primary' }, item.clipboardProps),
330
+ React.createElement(reactComponent.PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
331
+ }), [
367
332
  dividerColor,
368
333
  ellipsis,
369
334
  labelClassName,
@@ -1251,48 +1216,63 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
1251
1216
  };
1252
1217
  }, [resizeHandler, refElement]);
1253
1218
  return Object.assign({ ref: refProxy }, size);
1254
- }var StyledBodyRow = material.styled(material.TableRow)(function (_a) {
1255
- var theme = _a.theme;
1256
- return ({
1257
- '&.odd-color:nth-of-type(odd):not(:hover)': {
1258
- backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
1259
- },
1260
- '&.even-color:nth-of-type(even):not(:hover)': {
1261
- backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
1262
- },
1263
- });
1264
- });
1265
- var StyledNoDataDiv = material.styled('div')(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n text-align: center;\n padding: 30px 0;\n font-weight: 500;\n font-size: 13px;\n color: #94a0b2;\n opacity: 0.8;\n\n .material-icons {\n font-size: 40px;\n margin-bottom: 5px;\n }\n"], ["\n text-align: center;\n padding: 30px 0;\n font-weight: 500;\n font-size: 13px;\n color: #94a0b2;\n opacity: 0.8;\n\n .material-icons {\n font-size: 40px;\n margin-bottom: 5px;\n }\n"])));
1266
- var templateObject_1$3;var PTableContext = React.createContext({});function useTableState() {
1267
- var value = React.useContext(PTableContext);
1219
+ }const StyledBodyRow = material.styled(material.TableRow)(({ theme }) => ({
1220
+ '&.odd-color:nth-of-type(odd):not(:hover)': {
1221
+ backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
1222
+ },
1223
+ '&.even-color:nth-of-type(even):not(:hover)': {
1224
+ backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
1225
+ },
1226
+ }));
1227
+ const StyledNoDataDiv = material.styled('div') `
1228
+ text-align: center;
1229
+ padding: 30px 0;
1230
+ font-weight: 500;
1231
+ font-size: 13px;
1232
+ color: #94a0b2;
1233
+ opacity: 0.8;
1234
+
1235
+ .material-icons {
1236
+ font-size: 40px;
1237
+ margin-bottom: 5px;
1238
+ }
1239
+ `;const PTableContext = React.createContext({});function useTableState() {
1240
+ const value = React.useContext(PTableContext);
1268
1241
  if (compare.empty(value)) {
1269
1242
  throw new Error('useTableState should be used within TableContext.Provider');
1270
1243
  }
1271
1244
  return value;
1272
- }var StyledTableCell = material.styled(material.TableCell)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n &.ellipsis {\n position: relative;\n max-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"], ["\n &.ellipsis {\n position: relative;\n max-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])));
1273
- var PTableCommonCell = React.forwardRef(function (_a, ref) {
1245
+ }const StyledTableCell = material.styled(material.TableCell) `
1246
+ &.ellipsis {
1247
+ position: relative;
1248
+ max-width: 0;
1249
+ overflow: hidden;
1250
+ text-overflow: ellipsis;
1251
+ white-space: nowrap;
1252
+ }
1253
+ `;
1254
+ const PTableCommonCell = React.forwardRef(({ children, className: initClassName, style: initStyle, sx: initSx, type, column, defaultAlign, defaultEllipsis: initDefaultEllipsis, index, item, onClick, }, ref) => {
1274
1255
  /********************************************************************************************************************
1275
1256
  * Use
1276
1257
  * ******************************************************************************************************************/
1277
- var children = _a.children, initClassName = _a.className, initStyle = _a.style, initSx = _a.sx, type = _a.type, column = _a.column, defaultAlign = _a.defaultAlign, initDefaultEllipsis = _a.defaultEllipsis, index = _a.index, item = _a.item, onClick = _a.onClick;
1278
- var menuOpen = useTableState().menuOpen;
1258
+ const { menuOpen } = useTableState();
1279
1259
  /********************************************************************************************************************
1280
1260
  * Memo
1281
1261
  * ******************************************************************************************************************/
1282
- var _b = React.useMemo(function () {
1283
- var align = getTableColumnAlign(column, defaultAlign);
1284
- var ellipsis = type !== 'head' &&
1262
+ const { align, ellipsis } = React.useMemo(() => {
1263
+ const align = getTableColumnAlign(column, defaultAlign);
1264
+ const ellipsis = type !== 'head' &&
1285
1265
  (column.ellipsis ||
1286
1266
  (column.type !== 'img' &&
1287
1267
  column.type !== 'button' &&
1288
1268
  column.type !== 'buttons' &&
1289
1269
  (column.ellipsis == null ? !!initDefaultEllipsis : false)));
1290
- return { align: align, ellipsis: ellipsis };
1291
- }, [column, defaultAlign, initDefaultEllipsis, type]), align = _b.align, ellipsis = _b.ellipsis;
1292
- var className = React.useMemo(function () {
1270
+ return { align, ellipsis };
1271
+ }, [column, defaultAlign, initDefaultEllipsis, type]);
1272
+ const className = React.useMemo(() => {
1293
1273
  var _a, _b, _c, _d, _e, _f;
1294
- var className;
1295
- var getClassName;
1274
+ let className;
1275
+ let getClassName;
1296
1276
  switch (type) {
1297
1277
  case 'head':
1298
1278
  className = (_a = column.head) === null || _a === void 0 ? void 0 : _a.className;
@@ -1316,35 +1296,35 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
1316
1296
  return initClassName;
1317
1297
  }
1318
1298
  }, [column, index, initClassName, item, type]);
1319
- var style = React.useMemo(function () {
1299
+ const style = React.useMemo(() => {
1320
1300
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1321
- var style;
1322
- var getStyle;
1301
+ let style;
1302
+ let getStyle;
1323
1303
  switch (type) {
1324
1304
  case 'head':
1325
1305
  style = ((_a = column.head) === null || _a === void 0 ? void 0 : _a.backgroundColor)
1326
- ? __assign$2(__assign$2({}, (_b = column.head) === null || _b === void 0 ? void 0 : _b.style), { backgroundColor: column.head.backgroundColor }) : (_c = column.head) === null || _c === void 0 ? void 0 : _c.style;
1306
+ ? Object.assign(Object.assign({}, (_b = column.head) === null || _b === void 0 ? void 0 : _b.style), { backgroundColor: column.head.backgroundColor }) : (_c = column.head) === null || _c === void 0 ? void 0 : _c.style;
1327
1307
  getStyle = ((_d = column.head) === null || _d === void 0 ? void 0 : _d.onGetStyle) ? (_e = column.head) === null || _e === void 0 ? void 0 : _e.onGetStyle() : undefined;
1328
1308
  break;
1329
1309
  case 'body':
1330
- style = column.backgroundColor ? __assign$2(__assign$2({}, column.style), { backgroundColor: column.backgroundColor }) : column.style;
1310
+ style = column.backgroundColor ? Object.assign(Object.assign({}, column.style), { backgroundColor: column.backgroundColor }) : column.style;
1331
1311
  if (item != null && index != null) {
1332
1312
  getStyle = column.onGetStyle ? column.onGetStyle(item, index) : undefined;
1333
1313
  }
1334
1314
  break;
1335
1315
  case 'footer':
1336
1316
  style = ((_f = column.footer) === null || _f === void 0 ? void 0 : _f.backgroundColor)
1337
- ? __assign$2(__assign$2({}, (_g = column.footer) === null || _g === void 0 ? void 0 : _g.style), { backgroundColor: column.footer.backgroundColor }) : (_h = column.footer) === null || _h === void 0 ? void 0 : _h.style;
1317
+ ? Object.assign(Object.assign({}, (_g = column.footer) === null || _g === void 0 ? void 0 : _g.style), { backgroundColor: column.footer.backgroundColor }) : (_h = column.footer) === null || _h === void 0 ? void 0 : _h.style;
1338
1318
  getStyle = ((_j = column.footer) === null || _j === void 0 ? void 0 : _j.onGetStyle) ? (_k = column.footer) === null || _k === void 0 ? void 0 : _k.onGetStyle() : undefined;
1339
1319
  break;
1340
1320
  }
1341
- return __assign$2(__assign$2(__assign$2(__assign$2({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined, paddingLeft: column.paddingLeft, paddingRight: column.paddingRight }), style), getStyle);
1321
+ return Object.assign(Object.assign(Object.assign(Object.assign({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined, paddingLeft: column.paddingLeft, paddingRight: column.paddingRight }), style), getStyle);
1342
1322
  }, [column, index, initStyle, item, onClick, type]);
1343
- var sx = React.useMemo(function () {
1323
+ const sx = React.useMemo(() => {
1344
1324
  var _a, _b, _c, _d, _e, _f;
1345
- var sx;
1346
- var getSx;
1347
- var displaySx;
1325
+ let sx;
1326
+ let getSx;
1327
+ let displaySx;
1348
1328
  switch (type) {
1349
1329
  case 'head':
1350
1330
  sx = (_a = column.head) === null || _a === void 0 ? void 0 : _a.sx;
@@ -1362,7 +1342,7 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
1362
1342
  break;
1363
1343
  }
1364
1344
  if (column.display) {
1365
- var display = {};
1345
+ const display = {};
1366
1346
  if (column.display.xs !== undefined)
1367
1347
  display.xs = column.display.xs ? 'table-cell' : 'none';
1368
1348
  if (column.display.sm !== undefined)
@@ -1373,9 +1353,9 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
1373
1353
  display.lg = column.display.lg ? 'table-cell' : 'none';
1374
1354
  if (column.display.xl !== undefined)
1375
1355
  display.xl = column.display.xl ? 'table-cell' : 'none';
1376
- displaySx = { display: display };
1356
+ displaySx = { display };
1377
1357
  }
1378
- var sxList = [];
1358
+ const sxList = [];
1379
1359
  if (getSx)
1380
1360
  sxList.push(getSx);
1381
1361
  if (sx)
@@ -1389,9 +1369,9 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
1389
1369
  return sxList[0];
1390
1370
  }
1391
1371
  else {
1392
- if (!sxList.find(function (sx) { return typeof sx !== 'object'; })) {
1393
- return sxList.reduce(function (res, sx) {
1394
- res = __assign$2(__assign$2({}, res), sx);
1372
+ if (!sxList.find((sx) => typeof sx !== 'object')) {
1373
+ return sxList.reduce((res, sx) => {
1374
+ res = Object.assign(Object.assign({}, res), sx);
1395
1375
  return res;
1396
1376
  }, {});
1397
1377
  }
@@ -1401,7 +1381,7 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
1401
1381
  /********************************************************************************************************************
1402
1382
  * Event Handler
1403
1383
  * ******************************************************************************************************************/
1404
- var handleClick = React.useCallback(function (e) {
1384
+ const handleClick = React.useCallback((e) => {
1405
1385
  if (!menuOpen &&
1406
1386
  column.type !== 'check' &&
1407
1387
  column.type !== 'button' &&
@@ -1424,14 +1404,12 @@ var PTableCommonCell = React.forwardRef(function (_a, ref) {
1424
1404
  /********************************************************************************************************************
1425
1405
  * Render
1426
1406
  * ******************************************************************************************************************/
1427
- return (React.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
1428
- });
1429
- var templateObject_1$2;var PTableFooterCell = function (_a) {
1407
+ return (React.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ? `column-type-${column.type}` : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
1408
+ });const PTableFooterCell = ({ column, items, defaultAlign }) => {
1430
1409
  /********************************************************************************************************************
1431
1410
  * Memo
1432
1411
  * ******************************************************************************************************************/
1433
- var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign;
1434
- var data = React.useMemo(function () {
1412
+ const data = React.useMemo(() => {
1435
1413
  var _a, _b, _c;
1436
1414
  if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
1437
1415
  return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
@@ -1444,52 +1422,46 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
1444
1422
  * Render
1445
1423
  * ******************************************************************************************************************/
1446
1424
  return (React.createElement(PTableCommonCell, { type: 'head', className: 'PTableFooterCell', column: column, defaultAlign: defaultAlign }, data));
1447
- };var PTablePagination = function (_a) {
1448
- var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
1425
+ };const PTablePagination = ({ className, style, sx, paging, align, onChange }) => {
1449
1426
  return (React.createElement(material.Stack, { alignItems: align },
1450
- React.createElement(material.Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange: function (e, page) {
1427
+ React.createElement(material.Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange: (e, page) => {
1451
1428
  if (onChange)
1452
1429
  onChange(page);
1453
1430
  } })));
1454
- };var PTableContextProvider = function (_a) {
1455
- var children = _a.children, value = _a.value;
1431
+ };const PTableContextProvider = ({ children, value }) => {
1456
1432
  return React.createElement(PTableContext.Provider, { value: value }, children);
1457
- };var PTableTopHeadCaptionRow = material.styled(material.TableRow)(function (_a) {
1458
- var theme = _a.theme;
1459
- return ({
1460
- '> th': {
1461
- backgroundColor: theme.palette.grey.A100,
1462
- textAlign: 'center',
1463
- fontWeight: 700,
1464
- },
1465
- });
1466
- });var PTableHeadCell = function (_a) {
1433
+ };const PTableTopHeadCaptionRow = material.styled(material.TableRow)(({ theme }) => ({
1434
+ '> th': {
1435
+ backgroundColor: theme.palette.grey.A100,
1436
+ textAlign: 'center',
1437
+ fontWeight: 700,
1438
+ },
1439
+ }));const PTableHeadCell = ({ column, items, defaultAlign, top, onCheckChange }) => {
1467
1440
  /********************************************************************************************************************
1468
1441
  * Use
1469
1442
  * ******************************************************************************************************************/
1470
- var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
1471
- var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
1443
+ const { setHeadColumnChecked, setHeadColumnCommands } = useTableState();
1472
1444
  /********************************************************************************************************************
1473
1445
  * State
1474
1446
  * ******************************************************************************************************************/
1475
- var _c = React.useState(false), checked = _c[0], setChecked = _c[1];
1476
- var _d = React.useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
1447
+ const [checked, setChecked] = React.useState(false);
1448
+ const [checkDisabled, setCheckDisabled] = React.useState(false);
1477
1449
  /********************************************************************************************************************
1478
1450
  * Effect
1479
1451
  * ******************************************************************************************************************/
1480
- React.useEffect(function () {
1452
+ React.useEffect(() => {
1481
1453
  if (column.type === 'check') {
1482
1454
  setHeadColumnChecked(column, checked);
1483
1455
  }
1484
1456
  }, [column, checked, setHeadColumnChecked]);
1485
- React.useEffect(function () {
1457
+ React.useEffect(() => {
1486
1458
  setHeadColumnCommands(column, {
1487
- setChecked: function (checked) {
1459
+ setChecked(checked) {
1488
1460
  if (column.type === 'check') {
1489
1461
  setChecked(checked);
1490
1462
  }
1491
1463
  },
1492
- setCheckDisabled: function (checkDisabled) {
1464
+ setCheckDisabled(checkDisabled) {
1493
1465
  if (column.type === 'check') {
1494
1466
  setCheckDisabled(checkDisabled);
1495
1467
  }
@@ -1499,7 +1471,7 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
1499
1471
  /********************************************************************************************************************
1500
1472
  * Memo
1501
1473
  * ******************************************************************************************************************/
1502
- var data = React.useMemo(function () {
1474
+ const data = React.useMemo(() => {
1503
1475
  var _a, _b, _c, _d;
1504
1476
  if (column.type === 'check') {
1505
1477
  if (column.hideAllCheck) {
@@ -1516,7 +1488,7 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
1516
1488
  }
1517
1489
  }
1518
1490
  else {
1519
- return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
1491
+ return (React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: (e, newChecked) => {
1520
1492
  setChecked(newChecked);
1521
1493
  onCheckChange && onCheckChange(column, newChecked);
1522
1494
  } }));
@@ -1539,63 +1511,68 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
1539
1511
  /********************************************************************************************************************
1540
1512
  * Render
1541
1513
  * ******************************************************************************************************************/
1542
- return (React.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
1543
- };var BottomLine = material.styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"], ["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"])));
1544
- var PTableTopHead = function (_a) {
1514
+ return (React.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top } : undefined, column: column, defaultAlign: defaultAlign }, data));
1515
+ };const BottomLine = material.styled('div') `
1516
+ height: 1px;
1517
+ position: absolute;
1518
+ left: 3px;
1519
+ right: 3px;
1520
+ bottom: 0;
1521
+ `;
1522
+ const PTableTopHead = ({ columns, items, rows, caption, defaultAlign, onCheckChange }) => {
1545
1523
  /********************************************************************************************************************
1546
1524
  * Use
1547
1525
  * ******************************************************************************************************************/
1548
- var columns = _a.columns, items = _a.items, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
1549
- var theme = material.useTheme();
1526
+ const theme = material.useTheme();
1550
1527
  /********************************************************************************************************************
1551
1528
  * Ref
1552
1529
  * ******************************************************************************************************************/
1553
- var captionRef = React.useRef(null);
1554
- var row1Ref = React.useRef(null);
1555
- var row2Ref = React.useRef(null);
1556
- var row3Ref = React.useRef(null);
1530
+ const captionRef = React.useRef(null);
1531
+ const row1Ref = React.useRef(null);
1532
+ const row2Ref = React.useRef(null);
1533
+ const row3Ref = React.useRef(null);
1557
1534
  /********************************************************************************************************************
1558
1535
  * ResizeDetector
1559
1536
  * ******************************************************************************************************************/
1560
- var captionHeight = useResizeDetector({
1537
+ const { height: captionHeight } = useResizeDetector({
1561
1538
  targetRef: captionRef,
1562
1539
  handleWidth: false,
1563
1540
  handleHeight: true,
1564
- }).height;
1565
- var row1Height = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true }).height;
1566
- var row2Height = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true }).height;
1567
- var row3Height = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true }).height;
1541
+ });
1542
+ const { height: row1Height } = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true });
1543
+ const { height: row2Height } = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true });
1544
+ const { height: row3Height } = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true });
1568
1545
  /********************************************************************************************************************
1569
1546
  * Function
1570
1547
  * ******************************************************************************************************************/
1571
- var makeRowCells = React.useCallback(function (row, top) {
1572
- var totalColumns = 0;
1573
- var cells = row
1574
- .map(function (info, idx) {
1548
+ const makeRowCells = React.useCallback((row, top) => {
1549
+ let totalColumns = 0;
1550
+ const cells = row
1551
+ .map((info, idx) => {
1575
1552
  if (info) {
1576
1553
  totalColumns += info.colSpan || 1;
1577
1554
  return (React.createElement(material.TableCell, { key: idx, colSpan: info.colSpan, align: info.align, style: {
1578
- top: top,
1555
+ top,
1579
1556
  borderBottom: 0,
1580
1557
  } },
1581
1558
  info.label,
1582
1559
  info.label != null && React.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
1583
1560
  }
1584
1561
  })
1585
- .filter(function (cell) { return !!cell; });
1562
+ .filter((cell) => !!cell);
1586
1563
  if (totalColumns < columns.length) {
1587
- cells.push(React.createElement(material.TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top: top, borderBottom: 0 } }));
1564
+ cells.push(React.createElement(material.TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top, borderBottom: 0 } }));
1588
1565
  }
1589
1566
  return cells;
1590
1567
  }, [columns, theme.palette.divider]);
1591
- var columnRow = React.useMemo(function () {
1592
- var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
1593
- return (React.createElement(material.TableRow, null, columns.map(function (column, idx) { return (React.createElement(PTableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
1568
+ const columnRow = React.useMemo(() => {
1569
+ const top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
1570
+ return (React.createElement(material.TableRow, null, columns.map((column, idx) => (React.createElement(PTableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })))));
1594
1571
  }, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
1595
1572
  /********************************************************************************************************************
1596
1573
  * Variable
1597
1574
  * ******************************************************************************************************************/
1598
- var captionRow = !!caption && (React.createElement(PTableTopHeadCaptionRow, { ref: captionRef, className: 'PTableTopHeadCaptionRow' },
1575
+ const captionRow = !!caption && (React.createElement(PTableTopHeadCaptionRow, { ref: captionRef, className: 'PTableTopHeadCaptionRow' },
1599
1576
  React.createElement(material.TableCell, { colSpan: columns.length }, caption)));
1600
1577
  /********************************************************************************************************************
1601
1578
  * Render
@@ -1604,9 +1581,9 @@ var PTableTopHead = function (_a) {
1604
1581
  if (Array.isArray(rows[0])) {
1605
1582
  return (React.createElement(material.TableHead, { className: 'PTableHead' },
1606
1583
  captionRow,
1607
- rows.map(function (row, idx) {
1608
- var ref = undefined;
1609
- var top = undefined;
1584
+ rows.map((row, idx) => {
1585
+ let ref = undefined;
1586
+ let top = undefined;
1610
1587
  switch (idx) {
1611
1588
  case 0:
1612
1589
  ref = row1Ref;
@@ -1638,8 +1615,7 @@ var PTableTopHead = function (_a) {
1638
1615
  captionRow,
1639
1616
  columnRow));
1640
1617
  }
1641
- };
1642
- var templateObject_1$1;/**
1618
+ };/**
1643
1619
  * Checks if `value` is the
1644
1620
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
1645
1621
  * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
@@ -3115,7 +3091,7 @@ var __assign = function() {
3115
3091
  return __assign.apply(this, arguments);
3116
3092
  };
3117
3093
 
3118
- function __rest(s, e) {
3094
+ function __rest$1(s, e) {
3119
3095
  var t = {};
3120
3096
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
3121
3097
  t[p] = s[p];
@@ -3128,7 +3104,7 @@ function __rest(s, e) {
3128
3104
  }
3129
3105
 
3130
3106
  var SimpleBar = React__namespace.forwardRef(function (_a, ref) {
3131
- var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["children", "scrollableNodeProps"]);
3107
+ var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest$1(_a, ["children", "scrollableNodeProps"]);
3132
3108
  var elRef = React__namespace.useRef();
3133
3109
  var scrollableNodeRef = React__namespace.useRef();
3134
3110
  var contentNodeRef = React__namespace.useRef();
@@ -3191,10 +3167,42 @@ var SimpleBar = React__namespace.forwardRef(function (_a, ref) {
3191
3167
  React__namespace.createElement("div", { className: "".concat(classNames.track, " ").concat(classNames.vertical) },
3192
3168
  React__namespace.createElement("div", { className: classNames.scrollbar }))));
3193
3169
  });
3194
- SimpleBar.displayName = 'SimpleBar';var makeSortableItems = function (items) {
3195
- return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
3196
- var id = _a.id, item = __rest$1(_a, ["id"]);
3197
- return __assign$2({ id: id == null ? "".concat(uuid.v4(), "_").concat(index) : id }, item);
3170
+ SimpleBar.displayName = 'SimpleBar';/******************************************************************************
3171
+ Copyright (c) Microsoft Corporation.
3172
+
3173
+ Permission to use, copy, modify, and/or distribute this software for any
3174
+ purpose with or without fee is hereby granted.
3175
+
3176
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
3177
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
3178
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
3179
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
3180
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3181
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3182
+ PERFORMANCE OF THIS SOFTWARE.
3183
+ ***************************************************************************** */
3184
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
3185
+
3186
+
3187
+ function __rest(s, e) {
3188
+ var t = {};
3189
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
3190
+ t[p] = s[p];
3191
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
3192
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
3193
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
3194
+ t[p[i]] = s[p[i]];
3195
+ }
3196
+ return t;
3197
+ }
3198
+
3199
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3200
+ var e = new Error(message);
3201
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3202
+ };const makeSortableItems = (items) => {
3203
+ return items === null || items === void 0 ? void 0 : items.map((_a, index) => {
3204
+ var { id } = _a, item = __rest(_a, ["id"]);
3205
+ return Object.assign({ id: id == null ? `${uuid.v4()}_${index}` : id }, item);
3198
3206
  });
3199
3207
  };const CSS = /*#__PURE__*/Object.freeze({
3200
3208
  Translate: {
@@ -3246,46 +3254,49 @@ SimpleBar.displayName = 'SimpleBar';var makeSortableItems = function (items) {
3246
3254
  }
3247
3255
 
3248
3256
  }
3249
- });var StyledButtonsBox = material.styled(material.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n"])));
3250
- var PTableBodyCell = React.forwardRef(function (_a, ref) {
3257
+ });const StyledButtonsBox = material.styled(material.Box) `
3258
+ display: flex;
3259
+ flex-wrap: wrap;
3260
+ gap: 5px;
3261
+ `;
3262
+ const PTableBodyCell = React.forwardRef(({ className, style, sx, item, index, column, defaultAlign, defaultEllipsis, onClick, onCheckChange }, ref) => {
3251
3263
  /********************************************************************************************************************
3252
3264
  * Use
3253
3265
  * ******************************************************************************************************************/
3254
- var className = _a.className, style = _a.style, sx = _a.sx, item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
3255
- var _b = useTableState(), menuOpen = _b.menuOpen, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
3266
+ const { menuOpen, setItemColumnChecked, setItemColumnCheckDisabled, setItemColumnCommands } = useTableState();
3256
3267
  /********************************************************************************************************************
3257
3268
  * State
3258
3269
  * ******************************************************************************************************************/
3259
- var _c = React.useState(false), checked = _c[0], setChecked = _c[1];
3260
- var _d = React.useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
3270
+ const [checked, setChecked] = React.useState(false);
3271
+ const [checkDisabled, setCheckDisabled] = React.useState(false);
3261
3272
  /********************************************************************************************************************
3262
3273
  * Effect
3263
3274
  * ******************************************************************************************************************/
3264
- React.useEffect(function () {
3275
+ React.useEffect(() => {
3265
3276
  if (column.type === 'check') {
3266
3277
  setChecked(column.onInitChecked ? column.onInitChecked(item) : false);
3267
3278
  setCheckDisabled(column.onCheckDisabled ? column.onCheckDisabled(item) : false);
3268
3279
  }
3269
3280
  setItemColumnCommands(item, column, {
3270
- setChecked: function (checked) {
3281
+ setChecked(checked) {
3271
3282
  if (column.type === 'check') {
3272
3283
  setChecked(checked);
3273
3284
  }
3274
3285
  },
3275
- setCheckDisabled: function (disabled) {
3286
+ setCheckDisabled(disabled) {
3276
3287
  if (column.type === 'check') {
3277
3288
  setCheckDisabled(disabled);
3278
3289
  }
3279
3290
  },
3280
3291
  });
3281
3292
  }, [column, item, setItemColumnCommands]);
3282
- React.useEffect(function () {
3293
+ React.useEffect(() => {
3283
3294
  if (column.type === 'check') {
3284
3295
  setItemColumnChecked(item, column, checked);
3285
3296
  }
3286
3297
  // eslint-disable-next-line react-hooks/exhaustive-deps
3287
3298
  }, [checked]);
3288
- React.useEffect(function () {
3299
+ React.useEffect(() => {
3289
3300
  if (column.type === 'check') {
3290
3301
  setItemColumnCheckDisabled(item, column, checkDisabled);
3291
3302
  column.onCheckDisabledChange && column.onCheckDisabledChange(item, checkDisabled);
@@ -3295,8 +3306,8 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3295
3306
  /********************************************************************************************************************
3296
3307
  * Memo
3297
3308
  * ******************************************************************************************************************/
3298
- var isHidden = React.useMemo(function () { return (column.onHide ? column.onHide(item, index) : false); }, [column, index, item]);
3299
- var buttonsBoxJustifyContent = React.useMemo(function () {
3309
+ const isHidden = React.useMemo(() => (column.onHide ? column.onHide(item, index) : false), [column, index, item]);
3310
+ const buttonsBoxJustifyContent = React.useMemo(() => {
3300
3311
  switch (getTableColumnAlign(column, defaultAlign)) {
3301
3312
  case 'center':
3302
3313
  return 'center';
@@ -3306,9 +3317,9 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3306
3317
  return 'start';
3307
3318
  }
3308
3319
  }, [column, defaultAlign]);
3309
- var data = React.useMemo(function () {
3320
+ const data = React.useMemo(() => {
3310
3321
  var _a, _b;
3311
- var data;
3322
+ let data;
3312
3323
  if (column.type !== 'check') {
3313
3324
  if (column.onRender) {
3314
3325
  data = column.onRender(item, index);
@@ -3352,29 +3363,29 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3352
3363
  }
3353
3364
  break;
3354
3365
  case 'check':
3355
- data = (React.createElement(material.Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } },
3356
- React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
3366
+ data = (React.createElement(material.Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined : (e) => e.stopPropagation() },
3367
+ React.createElement(material.Checkbox, { checked: checked, disabled: checkDisabled, onChange: (e, newChecked) => {
3357
3368
  setChecked(newChecked);
3358
3369
  column.onCheckChange && column.onCheckChange(item, newChecked);
3359
3370
  onCheckChange && onCheckChange(item, column, newChecked);
3360
3371
  } })));
3361
3372
  break;
3362
3373
  case 'button':
3363
- data = (React.createElement(material.Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
3374
+ data = (React.createElement(material.Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined : (e) => e.stopPropagation() }, data));
3364
3375
  break;
3365
3376
  case 'buttons':
3366
- data = (React.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
3377
+ data = (React.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : (e) => e.stopPropagation() }, data));
3367
3378
  break;
3368
3379
  case 'img':
3369
3380
  {
3370
- var img = React.createElement("img", { src: data, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' });
3371
- var placement = ((_a = column.tooltipProps) === null || _a === void 0 ? void 0 : _a.placement) ? (_b = column.tooltipProps) === null || _b === void 0 ? void 0 : _b.placement : 'left';
3381
+ const img = React.createElement("img", { src: data, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' });
3382
+ const placement = ((_a = column.tooltipProps) === null || _a === void 0 ? void 0 : _a.placement) ? (_b = column.tooltipProps) === null || _b === void 0 ? void 0 : _b.placement : 'left';
3372
3383
  data = (React.createElement("a", { href: data, target: '_blank', onClick: menuOpen
3373
3384
  ? undefined
3374
- : function (e) {
3385
+ : (e) => {
3375
3386
  e.stopPropagation();
3376
3387
  } },
3377
- React.createElement(material.Tooltip, __assign$2({ className: 'PTableBodyCell-tooltip', title: React.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
3388
+ React.createElement(material.Tooltip, Object.assign({ className: 'PTableBodyCell-tooltip', title: React.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
3378
3389
  }
3379
3390
  break;
3380
3391
  case 'date':
@@ -3384,7 +3395,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3384
3395
  break;
3385
3396
  case 'datetime':
3386
3397
  if (data) {
3387
- var dt = dayjs(data, column.dateFormat);
3398
+ const dt = dayjs(data, column.dateFormat);
3388
3399
  data = (React.createElement(React.Fragment, null,
3389
3400
  React.createElement("span", null, dt.format('YYYY-MM-DD')),
3390
3401
  column.dateTwoLine ? React.createElement("br", null) : ' ',
@@ -3393,7 +3404,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3393
3404
  break;
3394
3405
  case 'date-hour':
3395
3406
  if (data) {
3396
- var dt = dayjs(data, column.dateFormat);
3407
+ const dt = dayjs(data, column.dateFormat);
3397
3408
  data = (React.createElement(React.Fragment, null,
3398
3409
  React.createElement("span", null, dt.format('YYYY-MM-DD')),
3399
3410
  column.dateTwoLine ? React.createElement("br", null) : ' ',
@@ -3402,7 +3413,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3402
3413
  break;
3403
3414
  case 'date-minute':
3404
3415
  if (data) {
3405
- var dt = dayjs(data, column.dateFormat);
3416
+ const dt = dayjs(data, column.dateFormat);
3406
3417
  data = (React.createElement(React.Fragment, null,
3407
3418
  React.createElement("span", null, dt.format('YYYY-MM-DD')),
3408
3419
  column.dateTwoLine ? React.createElement("br", null) : ' ',
@@ -3411,12 +3422,12 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3411
3422
  break;
3412
3423
  }
3413
3424
  if (column.type !== 'img') {
3414
- var tooltip = void 0;
3425
+ let tooltip;
3415
3426
  if (column.onGetTooltip) {
3416
3427
  tooltip = column.onGetTooltip(item, index);
3417
3428
  }
3418
3429
  if (tooltip) {
3419
- data = (React.createElement(material.Tooltip, __assign$2({ className: 'PTableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React.isValidElement(data) ? (data.type === React.Fragment ? (React.createElement("span", null, data)) : (data)) : (React.createElement("span", null, data))));
3430
+ data = (React.createElement(material.Tooltip, Object.assign({ className: 'PTableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React.isValidElement(data) ? (data.type === React.Fragment ? (React.createElement("span", null, data)) : (data)) : (React.createElement("span", null, data))));
3420
3431
  }
3421
3432
  }
3422
3433
  return data;
@@ -3424,7 +3435,7 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3424
3435
  /********************************************************************************************************************
3425
3436
  * Event Handler
3426
3437
  * ******************************************************************************************************************/
3427
- var handleClick = React.useCallback(function (item, index) {
3438
+ const handleClick = React.useCallback((item, index) => {
3428
3439
  if (column.onClick) {
3429
3440
  column.onClick(item, index);
3430
3441
  }
@@ -3437,52 +3448,47 @@ var PTableBodyCell = React.forwardRef(function (_a, ref) {
3437
3448
  * Render
3438
3449
  * ******************************************************************************************************************/
3439
3450
  return (React.createElement(PTableCommonCell, { ref: ref, type: 'body', className: classNames('PTableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
3440
- });
3441
- var templateObject_1;var PStyledBodyRow = material.styled(material.TableRow)(function (_a) {
3442
- var theme = _a.theme;
3443
- return ({
3444
- '&.odd-color:nth-of-type(odd):not(:hover)': {
3445
- backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
3446
- },
3447
- '&.even-color:nth-of-type(even):not(:hover)': {
3448
- backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
3449
- },
3450
- });
3451
- });
3452
- var PTableBodyRow = function (_a) {
3451
+ });const PStyledBodyRow = material.styled(material.TableRow)(({ theme }) => ({
3452
+ '&.odd-color:nth-of-type(odd):not(:hover)': {
3453
+ backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
3454
+ },
3455
+ '&.even-color:nth-of-type(even):not(:hover)': {
3456
+ backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
3457
+ },
3458
+ }));
3459
+ const PTableBodyRow = (_a) => {
3453
3460
  /********************************************************************************************************************
3454
3461
  * Use
3455
3462
  * ******************************************************************************************************************/
3456
- var className = _a.className, style = _a.style, id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable$1 = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, onCheckChange = _a.onCheckChange, onGetColumnClassName = _a.onGetColumnClassName, onGetColumnStyle = _a.onGetColumnStyle, onGetColumnSx = _a.onGetColumnSx, props = __rest$1(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
3457
- var _b = sortable.useSortable({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition;
3463
+ var { className, style, id, index, defaultAlign, defaultEllipsis, sortable: sortable$1, columns, item, onClick, onCheckChange, onGetColumnClassName, onGetColumnStyle, onGetColumnSx } = _a, props = __rest(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
3464
+ const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id });
3458
3465
  /********************************************************************************************************************
3459
3466
  * Variable
3460
3467
  * ******************************************************************************************************************/
3461
- var sortableProps = sortable$1
3462
- ? __assign$2(__assign$2({ ref: setNodeRef }, attributes), listeners) : {};
3468
+ const sortableProps = sortable$1
3469
+ ? Object.assign(Object.assign({ ref: setNodeRef }, attributes), listeners) : {};
3463
3470
  /********************************************************************************************************************
3464
3471
  * Render
3465
3472
  * ******************************************************************************************************************/
3466
3473
  return (React.createElement(React.Fragment, null,
3467
- React.createElement(PStyledBodyRow, __assign$2({ className: classNames('PTableBodyRow', className), style: sortable$1
3468
- ? __assign$2(__assign$2({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(PTableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); }))));
3469
- };var PTableSortableBodyBlock = function (_a) {
3470
- var items = _a.items, baseIndex = _a.baseIndex, columns = _a.columns, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
3471
- var progressiveVisible = useTableState().progressiveVisible;
3474
+ React.createElement(PStyledBodyRow, Object.assign({ className: classNames('PTableBodyRow', className), style: sortable$1
3475
+ ? Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition }) : style }, props, sortableProps), columns.map((column, columnIdx) => (React.createElement(PTableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange }))))));
3476
+ };const PTableSortableBodyBlock = ({ items, baseIndex, columns, showOddColor, showEvenColor, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyRowClassName, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, defaultAlign, defaultEllipsis, sortable, onClick, onCheckChange, }) => {
3477
+ const { progressiveVisible } = useTableState();
3472
3478
  /********************************************************************************************************************
3473
3479
  * Use
3474
3480
  * ******************************************************************************************************************/
3475
- var _b = reactIntersectionObserver.useInView({ threshold: 0, triggerOnce: true }), ref = _b.ref, inView = _b.inView;
3481
+ const { ref, inView } = reactIntersectionObserver.useInView({ threshold: 0, triggerOnce: true });
3476
3482
  /********************************************************************************************************************
3477
3483
  * State
3478
3484
  * ******************************************************************************************************************/
3479
- var _c = React.useState(baseIndex === 0), canInView = _c[0], setCanInView = _c[1];
3485
+ const [canInView, setCanInView] = React.useState(baseIndex === 0);
3480
3486
  /********************************************************************************************************************
3481
3487
  * Effect
3482
3488
  * ******************************************************************************************************************/
3483
- React.useEffect(function () {
3489
+ React.useEffect(() => {
3484
3490
  if (progressiveVisible && baseIndex > 0) {
3485
- setTimeout(function () {
3491
+ setTimeout(() => {
3486
3492
  setCanInView(true);
3487
3493
  }, baseIndex * compare.ifUndefined(progressiveVisible.delay, 300));
3488
3494
  }
@@ -3491,10 +3497,8 @@ var PTableBodyRow = function (_a) {
3491
3497
  /********************************************************************************************************************
3492
3498
  * Memo
3493
3499
  * ******************************************************************************************************************/
3494
- var renderItems = React.useMemo(function () {
3495
- return !progressiveVisible || inView ? (items.map(function (item, idx) { return (React.createElement(PTableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })); })) : (React.createElement(material.TableRow, { ref: canInView ? ref : undefined },
3496
- React.createElement(material.TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } })));
3497
- }, [
3500
+ const renderItems = React.useMemo(() => !progressiveVisible || inView ? (items.map((item, idx) => (React.createElement(PTableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })))) : (React.createElement(material.TableRow, { ref: canInView ? ref : undefined },
3501
+ React.createElement(material.TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } }))), [
3498
3502
  baseIndex,
3499
3503
  canInView,
3500
3504
  columns,
@@ -3520,24 +3524,23 @@ var PTableBodyRow = function (_a) {
3520
3524
  * Render
3521
3525
  * ******************************************************************************************************************/
3522
3526
  return React.createElement(React.Fragment, null, renderItems);
3523
- };var chunkArray = function (array, size) {
3524
- var result = [];
3525
- for (var i = 0; i < array.length; i += size) {
3527
+ };const chunkArray = (array, size) => {
3528
+ const result = [];
3529
+ for (let i = 0; i < array.length; i += size) {
3526
3530
  result.push(array.slice(i, i + size));
3527
3531
  }
3528
3532
  return result;
3529
- };var PTableSortableBody = function (_a) {
3533
+ };const PTableSortableBody = ({ items, columns, showOddColor, showEvenColor, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyRowClassName, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, defaultAlign, defaultEllipsis, sortable: sortable$1, onClick, onCheckChange, }) => {
3530
3534
  /********************************************************************************************************************
3531
3535
  * Use
3532
3536
  * ******************************************************************************************************************/
3533
- var items = _a.items, columns = _a.columns, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable$1 = _a.sortable, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
3534
- var progressiveVisible = useTableState().progressiveVisible;
3537
+ const { progressiveVisible } = useTableState();
3535
3538
  /********************************************************************************************************************
3536
3539
  * Memo
3537
3540
  * ******************************************************************************************************************/
3538
- var renderBlock = React.useMemo(function () {
3541
+ const renderBlock = React.useMemo(() => {
3539
3542
  if (progressiveVisible) {
3540
- return (React.createElement(React.Fragment, null, chunkArray(items, compare.ifUndefined(progressiveVisible.blockSize, 20)).map(function (bItems, index) { return (React.createElement(PTableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: onCheckChange })); })));
3543
+ return (React.createElement(React.Fragment, null, chunkArray(items, compare.ifUndefined(progressiveVisible.blockSize, 20)).map((bItems, index) => (React.createElement(PTableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: onCheckChange })))));
3541
3544
  }
3542
3545
  else {
3543
3546
  return (React.createElement(PTableSortableBodyBlock, { items: items, baseIndex: 0, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: onCheckChange }));
@@ -3567,22 +3570,21 @@ var PTableBodyRow = function (_a) {
3567
3570
  };function columnFilter(v) {
3568
3571
  return v !== undefined && v !== null && v !== false;
3569
3572
  }
3570
- var _columnId = 0;
3571
- var PTable = React.forwardRef(function (_a, ref) {
3573
+ let _columnId = 0;
3574
+ const PTable = React.forwardRef(({ className, style: initStyle, sx, caption, topHeadRows, columns: initColumns, items: initItems, paging: initPaging, pagingAlign = 'center', defaultAlign = 'left', defaultEllipsis, stickyHeader: initStickyHeader, height, minHeight, maxHeight, fullHeight, showOddColor, showEvenColor, cellPadding = 13, footer, noData, pagination, sortable: sortable$1, progressiveVisible, onClick, onGetBodyRowClassName, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, onPageChange, onSortChange, onCheckChange, }, ref) => {
3572
3575
  /********************************************************************************************************************
3573
3576
  * Ref
3574
3577
  * ******************************************************************************************************************/
3575
- var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable$1 = _a.sortable, progressiveVisible = _a.progressiveVisible, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
3576
- var localHeaderDataRef = React.useRef({});
3577
- var localBodyDataRef = React.useRef({});
3578
- var updateHeadCheckTimer = React.useRef(undefined);
3579
- var fireOnCheckChangeTimer = React.useRef({});
3580
- var simpleBarRef = React.useRef(null);
3581
- var finalColumnsIdRef = React.useRef([]);
3578
+ const localHeaderDataRef = React.useRef({});
3579
+ const localBodyDataRef = React.useRef({});
3580
+ const updateHeadCheckTimer = React.useRef(undefined);
3581
+ const fireOnCheckChangeTimer = React.useRef({});
3582
+ const simpleBarRef = React.useRef(null);
3583
+ const finalColumnsIdRef = React.useRef([]);
3582
3584
  /********************************************************************************************************************
3583
3585
  * sortable
3584
3586
  * ******************************************************************************************************************/
3585
- var sensors = core.useSensors(core.useSensor(core.MouseSensor, {
3587
+ const sensors = core.useSensors(core.useSensor(core.MouseSensor, {
3586
3588
  // Require the mouse to move by 10 pixels before activating
3587
3589
  activationConstraint: {
3588
3590
  distance: 10,
@@ -3599,21 +3601,21 @@ var PTable = React.forwardRef(function (_a, ref) {
3599
3601
  /********************************************************************************************************************
3600
3602
  * State
3601
3603
  * ******************************************************************************************************************/
3602
- var _e = React.useState(false), menuOpen = _e[0], setMenuOpen = _e[1];
3603
- var _f = React.useState(undefined), openMenuId = _f[0], setOpenMenuId = _f[1];
3604
- var _g = reactHook.useAutoUpdateState(initColumns), columns = _g[0], setColumns = _g[1];
3605
- var _h = React.useState(), finalColumns = _h[0], setFinalColumns = _h[1];
3606
- var _j = reactHook.useAutoUpdateState(initItems), items = _j[0], setItems = _j[1];
3607
- var _k = React.useState(), sortableItems = _k[0], setSortableItems = _k[1];
3608
- var _l = reactHook.useAutoUpdateState(initPaging), paging = _l[0], setPaging = _l[1];
3604
+ const [menuOpen, setMenuOpen] = React.useState(false);
3605
+ const [openMenuId, setOpenMenuId] = React.useState(undefined);
3606
+ const [columns, setColumns] = reactHook.useAutoUpdateState(initColumns);
3607
+ const [finalColumns, setFinalColumns] = React.useState();
3608
+ const [items, setItems] = reactHook.useAutoUpdateState(initItems);
3609
+ const [sortableItems, setSortableItems] = React.useState();
3610
+ const [paging, setPaging] = reactHook.useAutoUpdateState(initPaging);
3609
3611
  /********************************************************************************************************************
3610
3612
  * containerHeight
3611
3613
  * ******************************************************************************************************************/
3612
- var _m = React.useState(), containerHeight = _m[0], setContainerHeight = _m[1];
3613
- var containerHeightDetector = useResizeDetector({
3614
+ const [containerHeight, setContainerHeight] = React.useState();
3615
+ const { ref: containerHeightDetector } = useResizeDetector({
3614
3616
  handleHeight: true,
3615
3617
  handleWidth: false,
3616
- onResize: function () {
3618
+ onResize() {
3617
3619
  if (containerHeightDetector.current) {
3618
3620
  setContainerHeight(containerHeightDetector.current.getBoundingClientRect().height);
3619
3621
  }
@@ -3621,15 +3623,15 @@ var PTable = React.forwardRef(function (_a, ref) {
3621
3623
  setContainerHeight(undefined);
3622
3624
  }
3623
3625
  },
3624
- }).ref;
3626
+ });
3625
3627
  /********************************************************************************************************************
3626
3628
  * footerHeight
3627
3629
  * ******************************************************************************************************************/
3628
- var _o = React.useState(), pagingHeight = _o[0], setPagingHeight = _o[1];
3629
- var pagingHeightResizeDetector = useResizeDetector({
3630
+ const [pagingHeight, setPagingHeight] = React.useState();
3631
+ const { ref: pagingHeightResizeDetector } = useResizeDetector({
3630
3632
  handleHeight: true,
3631
3633
  handleWidth: false,
3632
- onResize: function () {
3634
+ onResize() {
3633
3635
  if (pagingHeightResizeDetector.current) {
3634
3636
  setPagingHeight(pagingHeightResizeDetector.current.getBoundingClientRect().height);
3635
3637
  }
@@ -3637,41 +3639,41 @@ var PTable = React.forwardRef(function (_a, ref) {
3637
3639
  setPagingHeight(undefined);
3638
3640
  }
3639
3641
  },
3640
- }).ref;
3642
+ });
3641
3643
  /********************************************************************************************************************
3642
3644
  * Function
3643
3645
  * ******************************************************************************************************************/
3644
- var getFinalColumnId = React.useCallback(function (column) {
3646
+ const getFinalColumnId = React.useCallback((column) => {
3645
3647
  if (finalColumns && finalColumnsIdRef.current) {
3646
- var idx = finalColumns.indexOf(column);
3648
+ const idx = finalColumns.indexOf(column);
3647
3649
  return finalColumnsIdRef.current[idx];
3648
3650
  }
3649
3651
  else {
3650
3652
  return '';
3651
3653
  }
3652
3654
  }, [finalColumns]);
3653
- var updateHeadCheck = React.useCallback(function (column) {
3655
+ const updateHeadCheck = React.useCallback((column) => {
3654
3656
  if (updateHeadCheckTimer.current) {
3655
3657
  clearTimeout(updateHeadCheckTimer.current);
3656
3658
  updateHeadCheckTimer.current = undefined;
3657
3659
  }
3658
- var columnId = getFinalColumnId(column);
3659
- var headColumnData = localHeaderDataRef.current[columnId];
3660
+ const columnId = getFinalColumnId(column);
3661
+ const headColumnData = localHeaderDataRef.current[columnId];
3660
3662
  if (headColumnData) {
3661
- updateHeadCheckTimer.current = setTimeout(function () {
3663
+ updateHeadCheckTimer.current = setTimeout(() => {
3662
3664
  var _a, _b;
3663
3665
  updateHeadCheckTimer.current = undefined;
3664
- var enabledCheckExists = !!Object.keys(localBodyDataRef.current).find(function (key) {
3665
- var columnData = localBodyDataRef.current[key].columns[columnId];
3666
+ const enabledCheckExists = !!Object.keys(localBodyDataRef.current).find((key) => {
3667
+ const columnData = localBodyDataRef.current[key].columns[columnId];
3666
3668
  if (columnData) {
3667
3669
  if (!columnData.checkDisabled) {
3668
3670
  return true;
3669
3671
  }
3670
3672
  }
3671
3673
  });
3672
- var allChecked = enabledCheckExists &&
3673
- !Object.keys(localBodyDataRef.current).find(function (key) {
3674
- var columnData = localBodyDataRef.current[key].columns[columnId];
3674
+ const allChecked = enabledCheckExists &&
3675
+ !Object.keys(localBodyDataRef.current).find((key) => {
3676
+ const columnData = localBodyDataRef.current[key].columns[columnId];
3675
3677
  if (columnData) {
3676
3678
  if (!columnData.checkDisabled) {
3677
3679
  return !columnData.checked;
@@ -3683,24 +3685,24 @@ var PTable = React.forwardRef(function (_a, ref) {
3683
3685
  }, 100);
3684
3686
  }
3685
3687
  }, [getFinalColumnId]);
3686
- var getChecked = React.useCallback(function (itemKey, itemValue, columnId) {
3687
- var checked = false;
3688
- Object.keys(localBodyDataRef.current).find(function (key) {
3689
- var itemData = localBodyDataRef.current[key];
3688
+ const getChecked = React.useCallback((itemKey, itemValue, columnId) => {
3689
+ let checked = false;
3690
+ Object.keys(localBodyDataRef.current).find((key) => {
3691
+ const itemData = localBodyDataRef.current[key];
3690
3692
  if (itemData.item[itemKey] === itemValue) {
3691
- var columnData = itemData.columns[columnId];
3693
+ const columnData = itemData.columns[columnId];
3692
3694
  checked = !!(columnData === null || columnData === void 0 ? void 0 : columnData.checked);
3693
3695
  return true;
3694
3696
  }
3695
3697
  });
3696
3698
  return checked;
3697
3699
  }, []);
3698
- var setChecked = React.useCallback(function (itemKey, itemValue, columnId, checked) {
3699
- Object.keys(localBodyDataRef.current).find(function (key) {
3700
+ const setChecked = React.useCallback((itemKey, itemValue, columnId, checked) => {
3701
+ Object.keys(localBodyDataRef.current).find((key) => {
3700
3702
  var _a;
3701
- var itemData = localBodyDataRef.current[key];
3703
+ const itemData = localBodyDataRef.current[key];
3702
3704
  if (itemData.item[itemKey] === itemValue) {
3703
- var columnData = itemData.columns[columnId];
3705
+ const columnData = itemData.columns[columnId];
3704
3706
  if (columnData) {
3705
3707
  (_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
3706
3708
  updateHeadCheck(columnData.column);
@@ -3709,12 +3711,12 @@ var PTable = React.forwardRef(function (_a, ref) {
3709
3711
  }
3710
3712
  });
3711
3713
  }, [updateHeadCheck]);
3712
- var toggleChecked = React.useCallback(function (itemKey, itemValue, columnId) {
3713
- Object.keys(localBodyDataRef.current).forEach(function (key) {
3714
+ const toggleChecked = React.useCallback((itemKey, itemValue, columnId) => {
3715
+ Object.keys(localBodyDataRef.current).forEach((key) => {
3714
3716
  var _a;
3715
- var itemData = localBodyDataRef.current[key];
3717
+ const itemData = localBodyDataRef.current[key];
3716
3718
  if (itemData.item[itemKey] === itemValue) {
3717
- var columnData = itemData.columns[columnId];
3719
+ const columnData = itemData.columns[columnId];
3718
3720
  if (columnData) {
3719
3721
  (_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(!columnData.checked);
3720
3722
  updateHeadCheck(columnData.column);
@@ -3723,23 +3725,23 @@ var PTable = React.forwardRef(function (_a, ref) {
3723
3725
  }
3724
3726
  });
3725
3727
  }, [updateHeadCheck]);
3726
- var setCheckedAll = React.useCallback(function (columnId, checked) {
3728
+ const setCheckedAll = React.useCallback((columnId, checked) => {
3727
3729
  var _a, _b;
3728
- Object.keys(localBodyDataRef.current).forEach(function (key) {
3730
+ Object.keys(localBodyDataRef.current).forEach((key) => {
3729
3731
  var _a;
3730
- var itemData = localBodyDataRef.current[key];
3731
- var columnData = itemData.columns[columnId];
3732
+ const itemData = localBodyDataRef.current[key];
3733
+ const columnData = itemData.columns[columnId];
3732
3734
  if (columnData) {
3733
3735
  (_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
3734
3736
  }
3735
3737
  });
3736
3738
  (_b = (_a = localHeaderDataRef.current[columnId]) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.setChecked(checked);
3737
3739
  }, []);
3738
- var getCheckedItems = React.useCallback(function (columnId) {
3739
- var checkedItems = [];
3740
- Object.keys(localBodyDataRef.current).forEach(function (key) {
3741
- var itemData = localBodyDataRef.current[key];
3742
- var columnData = itemData.columns[columnId];
3740
+ const getCheckedItems = React.useCallback((columnId) => {
3741
+ const checkedItems = [];
3742
+ Object.keys(localBodyDataRef.current).forEach((key) => {
3743
+ const itemData = localBodyDataRef.current[key];
3744
+ const columnData = itemData.columns[columnId];
3743
3745
  if (columnData) {
3744
3746
  if (columnData.checked) {
3745
3747
  checkedItems.push(itemData.item);
@@ -3748,57 +3750,57 @@ var PTable = React.forwardRef(function (_a, ref) {
3748
3750
  });
3749
3751
  return checkedItems;
3750
3752
  }, []);
3751
- var stopHeadCheckTimer = React.useCallback(function () {
3753
+ const stopHeadCheckTimer = React.useCallback(() => {
3752
3754
  if (updateHeadCheckTimer.current) {
3753
3755
  clearTimeout(updateHeadCheckTimer.current);
3754
3756
  updateHeadCheckTimer.current = undefined;
3755
3757
  }
3756
3758
  }, []);
3757
- var clearFireOnCheckChangeTimer = React.useCallback(function () {
3758
- Object.keys(fireOnCheckChangeTimer.current).forEach(function (key) {
3759
+ const clearFireOnCheckChangeTimer = React.useCallback(() => {
3760
+ Object.keys(fireOnCheckChangeTimer.current).forEach((key) => {
3759
3761
  if (fireOnCheckChangeTimer.current[key]) {
3760
3762
  clearTimeout(fireOnCheckChangeTimer.current[key]);
3761
3763
  }
3762
3764
  });
3763
3765
  fireOnCheckChangeTimer.current = {};
3764
3766
  }, []);
3765
- var fireOnCheckChange = React.useCallback(function (columnId) {
3767
+ const fireOnCheckChange = React.useCallback((columnId) => {
3766
3768
  if (fireOnCheckChangeTimer.current[columnId]) {
3767
3769
  clearTimeout(fireOnCheckChangeTimer.current[columnId]);
3768
3770
  fireOnCheckChangeTimer.current[columnId] = undefined;
3769
3771
  }
3770
3772
  if (onCheckChange) {
3771
- fireOnCheckChangeTimer.current[columnId] = setTimeout(function () {
3773
+ fireOnCheckChangeTimer.current[columnId] = setTimeout(() => {
3772
3774
  fireOnCheckChangeTimer.current[columnId] = undefined;
3773
3775
  onCheckChange && onCheckChange(columnId, getCheckedItems(columnId));
3774
3776
  }, 100);
3775
3777
  }
3776
3778
  }, [getCheckedItems, onCheckChange]);
3777
- var simpleBarScrollToTop = React.useCallback(function () {
3779
+ const simpleBarScrollToTop = React.useCallback(() => {
3778
3780
  var _a, _b;
3779
3781
  (_b = (_a = simpleBarRef.current) === null || _a === void 0 ? void 0 : _a.getScrollElement()) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
3780
3782
  }, []);
3781
3783
  /********************************************************************************************************************
3782
3784
  * Effect
3783
3785
  * ******************************************************************************************************************/
3784
- React.useEffect(function () {
3785
- return function () {
3786
+ React.useEffect(() => {
3787
+ return () => {
3786
3788
  stopHeadCheckTimer();
3787
3789
  clearFireOnCheckChangeTimer();
3788
3790
  };
3789
3791
  // eslint-disable-next-line react-hooks/exhaustive-deps
3790
3792
  }, []);
3791
- React.useEffect(function () {
3793
+ React.useEffect(() => {
3792
3794
  stopHeadCheckTimer();
3793
3795
  clearFireOnCheckChangeTimer();
3794
- Object.keys(localHeaderDataRef.current).forEach(function (key) {
3796
+ Object.keys(localHeaderDataRef.current).forEach((key) => {
3795
3797
  var _a;
3796
3798
  if (localHeaderDataRef.current[key].column.type === 'check') {
3797
3799
  (_a = localHeaderDataRef.current[key].commands) === null || _a === void 0 ? void 0 : _a.setChecked(false);
3798
3800
  }
3799
3801
  });
3800
- Object.keys(localBodyDataRef.current).forEach(function (key) {
3801
- Object.keys(localBodyDataRef.current[key].columns).forEach(function (cKey) {
3802
+ Object.keys(localBodyDataRef.current).forEach((key) => {
3803
+ Object.keys(localBodyDataRef.current[key].columns).forEach((cKey) => {
3802
3804
  var _a;
3803
3805
  (_a = localBodyDataRef.current[key].columns[cKey].commands) === null || _a === void 0 ? void 0 : _a.setChecked(false);
3804
3806
  });
@@ -3806,34 +3808,34 @@ var PTable = React.forwardRef(function (_a, ref) {
3806
3808
  setSortableItems(makeSortableItems(items));
3807
3809
  // eslint-disable-next-line react-hooks/exhaustive-deps
3808
3810
  }, [items]);
3809
- React.useEffect(function () {
3811
+ React.useEffect(() => {
3810
3812
  stopHeadCheckTimer();
3811
3813
  clearFireOnCheckChangeTimer();
3812
- var newFinalColumns = columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter);
3814
+ const newFinalColumns = columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter);
3813
3815
  setFinalColumns(newFinalColumns);
3814
- finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map(function (col) {
3816
+ finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map((col) => {
3815
3817
  if (col.id) {
3816
3818
  return col.id;
3817
3819
  }
3818
3820
  else {
3819
3821
  _columnId += 1;
3820
- return "$c$".concat(_columnId, "$");
3822
+ return `$c$${_columnId}$`;
3821
3823
  }
3822
3824
  });
3823
3825
  // eslint-disable-next-line react-hooks/exhaustive-deps
3824
3826
  }, [columns]);
3825
- React.useLayoutEffect(function () {
3827
+ React.useLayoutEffect(() => {
3826
3828
  clearFireOnCheckChangeTimer();
3827
3829
  if (sortableItems) {
3828
- localBodyDataRef.current = sortableItems.reduce(function (res, item) {
3830
+ localBodyDataRef.current = sortableItems.reduce((res, item) => {
3829
3831
  res[item.id] = {
3830
- item: item,
3832
+ item,
3831
3833
  columns: {},
3832
3834
  };
3833
3835
  if (finalColumns) {
3834
- finalColumns.forEach(function (c) {
3836
+ finalColumns.forEach((c) => {
3835
3837
  var _a;
3836
- var columnId = getFinalColumnId(c);
3838
+ const columnId = getFinalColumnId(c);
3837
3839
  if ((_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId]) {
3838
3840
  res[item.id].columns[columnId] = localBodyDataRef.current[item.id].columns[columnId];
3839
3841
  }
@@ -3853,9 +3855,9 @@ var PTable = React.forwardRef(function (_a, ref) {
3853
3855
  localBodyDataRef.current = {};
3854
3856
  }
3855
3857
  }, [sortableItems, finalColumns, clearFireOnCheckChangeTimer, getFinalColumnId]);
3856
- React.useLayoutEffect(function () {
3858
+ React.useLayoutEffect(() => {
3857
3859
  if (finalColumns) {
3858
- localHeaderDataRef.current = finalColumns.reduce(function (res, c) {
3860
+ localHeaderDataRef.current = finalColumns.reduce((res, c) => {
3859
3861
  res[getFinalColumnId(c)] = { column: c, checked: false };
3860
3862
  return res;
3861
3863
  }, {});
@@ -3867,36 +3869,36 @@ var PTable = React.forwardRef(function (_a, ref) {
3867
3869
  /********************************************************************************************************************
3868
3870
  * Commands
3869
3871
  * ******************************************************************************************************************/
3870
- reactHook.useForwardLayoutRef(ref, React.useMemo(function () {
3871
- var lastColumns = columns;
3872
- var lastItems = items;
3873
- var lastPaging = paging;
3872
+ reactHook.useForwardLayoutRef(ref, React.useMemo(() => {
3873
+ let lastColumns = columns;
3874
+ let lastItems = items;
3875
+ let lastPaging = paging;
3874
3876
  return {
3875
- getColumns: function () { return lastColumns; },
3876
- setColumns: function (columns) {
3877
+ getColumns: () => lastColumns,
3878
+ setColumns: (columns) => {
3877
3879
  lastColumns = columns;
3878
3880
  setColumns(lastColumns);
3879
3881
  },
3880
- getItems: function () { return lastItems; },
3881
- setItems: function (items) {
3882
+ getItems: () => lastItems,
3883
+ setItems: (items) => {
3882
3884
  lastItems = items;
3883
3885
  setItems(items);
3884
3886
  },
3885
- getPaging: function () { return lastPaging; },
3886
- setItemsPaging: function (items, paging) {
3887
+ getPaging: () => lastPaging,
3888
+ setItemsPaging: (items, paging) => {
3887
3889
  lastItems = items;
3888
3890
  lastPaging = paging;
3889
3891
  setItems(lastItems);
3890
3892
  setPaging(lastPaging);
3891
3893
  },
3892
- resetSort: function () {
3894
+ resetSort() {
3893
3895
  setSortableItems(makeSortableItems(lastItems));
3894
3896
  },
3895
- getCheckedItems: getCheckedItems,
3896
- getChecked: getChecked,
3897
- setChecked: setChecked,
3898
- toggleChecked: toggleChecked,
3899
- setCheckedAll: setCheckedAll,
3897
+ getCheckedItems,
3898
+ getChecked,
3899
+ setChecked,
3900
+ toggleChecked,
3901
+ setCheckedAll,
3900
3902
  scrollToTop: simpleBarScrollToTop,
3901
3903
  };
3902
3904
  }, [
@@ -3916,24 +3918,24 @@ var PTable = React.forwardRef(function (_a, ref) {
3916
3918
  /********************************************************************************************************************
3917
3919
  * Event Handler
3918
3920
  * ******************************************************************************************************************/
3919
- var handleDragEnd = React.useCallback(function (event) {
3920
- var active = event.active, over = event.over;
3921
+ const handleDragEnd = React.useCallback((event) => {
3922
+ const { active, over } = event;
3921
3923
  if (active && over) {
3922
- setSortableItems(function (items) {
3924
+ setSortableItems((items) => {
3923
3925
  if (items) {
3924
- var oldIndex_1 = null;
3925
- var newIndex_1 = null;
3926
- items.find(function (item, idx) {
3926
+ let oldIndex = null;
3927
+ let newIndex = null;
3928
+ items.find((item, idx) => {
3927
3929
  if (item.id === active.id) {
3928
- oldIndex_1 = idx;
3930
+ oldIndex = idx;
3929
3931
  }
3930
3932
  else if (item.id === over.id) {
3931
- newIndex_1 = idx;
3933
+ newIndex = idx;
3932
3934
  }
3933
- return oldIndex_1 != null && newIndex_1 != null;
3935
+ return oldIndex != null && newIndex != null;
3934
3936
  });
3935
- if (oldIndex_1 != null && newIndex_1 != null) {
3936
- var finalItems = sortable.arrayMove(items, oldIndex_1, newIndex_1);
3937
+ if (oldIndex != null && newIndex != null) {
3938
+ const finalItems = sortable.arrayMove(items, oldIndex, newIndex);
3937
3939
  onSortChange && onSortChange(finalItems);
3938
3940
  return finalItems;
3939
3941
  }
@@ -3947,10 +3949,10 @@ var PTable = React.forwardRef(function (_a, ref) {
3947
3949
  });
3948
3950
  }
3949
3951
  }, [onSortChange]);
3950
- var handleHeadCheckChange = React.useCallback(function (column, checked) {
3951
- Object.keys(localBodyDataRef.current).forEach(function (key) {
3952
+ const handleHeadCheckChange = React.useCallback((column, checked) => {
3953
+ Object.keys(localBodyDataRef.current).forEach((key) => {
3952
3954
  var _a;
3953
- var data = localBodyDataRef.current[key].columns[getFinalColumnId(column)];
3955
+ const data = localBodyDataRef.current[key].columns[getFinalColumnId(column)];
3954
3956
  if (data) {
3955
3957
  if (!data.checkDisabled) {
3956
3958
  (_a = data.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
@@ -3958,17 +3960,17 @@ var PTable = React.forwardRef(function (_a, ref) {
3958
3960
  }
3959
3961
  });
3960
3962
  }, [getFinalColumnId]);
3961
- var handleBodyCheckChange = React.useCallback(function (item, column) {
3963
+ const handleBodyCheckChange = React.useCallback((item, column) => {
3962
3964
  updateHeadCheck(column);
3963
3965
  }, [updateHeadCheck]);
3964
- var handlePageChange = React.useCallback(function (page) {
3966
+ const handlePageChange = React.useCallback((page) => {
3965
3967
  simpleBarScrollToTop();
3966
3968
  onPageChange && onPageChange(page);
3967
3969
  }, [onPageChange, simpleBarScrollToTop]);
3968
3970
  /********************************************************************************************************************
3969
3971
  * TableContext Function
3970
3972
  * ******************************************************************************************************************/
3971
- var TableContextSetMenuOpen = React.useCallback(function (newMenuOpen, newOpenMenuId) {
3973
+ const TableContextSetMenuOpen = React.useCallback((newMenuOpen, newOpenMenuId) => {
3972
3974
  if (newMenuOpen) {
3973
3975
  setMenuOpen(newMenuOpen);
3974
3976
  setOpenMenuId(newOpenMenuId);
@@ -3980,38 +3982,38 @@ var PTable = React.forwardRef(function (_a, ref) {
3980
3982
  }
3981
3983
  }
3982
3984
  }, [openMenuId]);
3983
- var TableContextSetItemColumnChecked = React.useCallback(function (item, column, checked) {
3985
+ const TableContextSetItemColumnChecked = React.useCallback((item, column, checked) => {
3984
3986
  var _a;
3985
- var columnId = getFinalColumnId(column);
3986
- var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId];
3987
+ const columnId = getFinalColumnId(column);
3988
+ const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId];
3987
3989
  if (data) {
3988
3990
  data.checked = checked;
3989
3991
  fireOnCheckChange(columnId);
3990
3992
  }
3991
3993
  }, [fireOnCheckChange, getFinalColumnId]);
3992
- var TableContextSetItemColumnCheckDisabled = React.useCallback(function (item, column, disabled) {
3994
+ const TableContextSetItemColumnCheckDisabled = React.useCallback((item, column, disabled) => {
3993
3995
  var _a;
3994
- var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
3996
+ const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
3995
3997
  if (data) {
3996
3998
  data.checkDisabled = disabled;
3997
3999
  updateHeadCheck(column);
3998
4000
  }
3999
4001
  }, [getFinalColumnId, updateHeadCheck]);
4000
- var TableContextSetItemColumnCommands = React.useCallback(function (item, column, commands) {
4002
+ const TableContextSetItemColumnCommands = React.useCallback((item, column, commands) => {
4001
4003
  var _a;
4002
- var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
4004
+ const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
4003
4005
  if (data) {
4004
4006
  data.commands = commands;
4005
4007
  }
4006
4008
  }, [getFinalColumnId]);
4007
- var TableContextSetHeadColumnChecked = React.useCallback(function (column, checked) {
4008
- var data = localHeaderDataRef.current[getFinalColumnId(column)];
4009
+ const TableContextSetHeadColumnChecked = React.useCallback((column, checked) => {
4010
+ const data = localHeaderDataRef.current[getFinalColumnId(column)];
4009
4011
  if (data) {
4010
4012
  data.checked = checked;
4011
4013
  }
4012
4014
  }, [getFinalColumnId]);
4013
- var TableContextSetHeadColumnCommands = React.useCallback(function (column, commands) {
4014
- var data = localHeaderDataRef.current[getFinalColumnId(column)];
4015
+ const TableContextSetHeadColumnCommands = React.useCallback((column, commands) => {
4016
+ const data = localHeaderDataRef.current[getFinalColumnId(column)];
4015
4017
  if (data) {
4016
4018
  data.commands = commands;
4017
4019
  }
@@ -4019,27 +4021,27 @@ var PTable = React.forwardRef(function (_a, ref) {
4019
4021
  /********************************************************************************************************************
4020
4022
  * Memo
4021
4023
  * ******************************************************************************************************************/
4022
- var isNoData = !!sortableItems && sortableItems.length <= 0;
4023
- var finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
4024
- var stickyHeader = !isNoData && initStickyHeader;
4025
- var _p = React.useMemo(function () {
4026
- var style = fullHeight
4027
- ? __assign$2(__assign$2({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : __assign$2({ width: '100%' }, initStyle);
4028
- var sx = { padding: typeof cellPadding === 'number' ? "".concat(cellPadding, "px") : cellPadding };
4029
- var tableSx = {
4024
+ const isNoData = !!sortableItems && sortableItems.length <= 0;
4025
+ const finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
4026
+ const stickyHeader = !isNoData && initStickyHeader;
4027
+ const { style, tableSx, pagingStyle } = React.useMemo(() => {
4028
+ const style = fullHeight
4029
+ ? Object.assign(Object.assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : Object.assign({ width: '100%' }, initStyle);
4030
+ const sx = { padding: typeof cellPadding === 'number' ? `${cellPadding}px` : cellPadding };
4031
+ const tableSx = {
4030
4032
  '> .MuiTableHead-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
4031
4033
  '> .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
4032
4034
  '> .MuiTableFooter-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
4033
4035
  };
4034
4036
  // pageStyle
4035
- var pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
4037
+ const pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
4036
4038
  if (fullHeight) {
4037
4039
  pagingStyle.position = 'sticky';
4038
4040
  }
4039
- return { style: style, tableSx: tableSx, pagingStyle: pagingStyle };
4040
- }, [cellPadding, fullHeight, initStyle]), style = _p.style, tableSx = _p.tableSx, pagingStyle = _p.pagingStyle;
4041
- var _q = React.useMemo(function () {
4042
- var contentContainerStyle = fullHeight
4041
+ return { style, tableSx, pagingStyle };
4042
+ }, [cellPadding, fullHeight, initStyle]);
4043
+ const { contentContainerStyle, tableStyle } = React.useMemo(() => {
4044
+ const contentContainerStyle = fullHeight
4043
4045
  ? {
4044
4046
  height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
4045
4047
  flex: 1,
@@ -4049,20 +4051,16 @@ var PTable = React.forwardRef(function (_a, ref) {
4049
4051
  right: 0,
4050
4052
  marginBottom: finalPagingHeight || 0,
4051
4053
  }
4052
- : { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
4053
- var tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
4054
- return { contentContainerStyle: contentContainerStyle, tableStyle: tableStyle };
4055
- }, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight]), contentContainerStyle = _q.contentContainerStyle, tableStyle = _q.tableStyle;
4056
- var tableTopHead = React.useMemo(function () {
4057
- return finalColumns && (React.createElement(PTableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
4058
- }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, items, topHeadRows]);
4059
- var tableBody = React.useMemo(function () {
4060
- return finalColumns && (React.createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(PTableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React.createElement(StyledBodyRow, null,
4061
- React.createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
4062
- React.createElement("div", null,
4063
- React.createElement(material.Icon, null, "error")),
4064
- React.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined));
4065
- }, [
4054
+ : { height, minHeight, maxHeight, marginBottom: -1 };
4055
+ const tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
4056
+ return { contentContainerStyle, tableStyle };
4057
+ }, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight]);
4058
+ const tableTopHead = React.useMemo(() => finalColumns && (React.createElement(PTableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange })), [caption, defaultAlign, finalColumns, handleHeadCheckChange, items, topHeadRows]);
4059
+ const tableBody = React.useMemo(() => finalColumns && (React.createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(PTableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React.createElement(StyledBodyRow, null,
4060
+ React.createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
4061
+ React.createElement("div", null,
4062
+ React.createElement(material.Icon, null, "error")),
4063
+ React.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined)), [
4066
4064
  defaultAlign,
4067
4065
  defaultEllipsis,
4068
4066
  finalColumns,
@@ -4080,19 +4078,17 @@ var PTable = React.forwardRef(function (_a, ref) {
4080
4078
  sortable$1,
4081
4079
  sortableItems,
4082
4080
  ]);
4083
- var tableFooter = React.useMemo(function () {
4084
- return finalColumns &&
4085
- !isNoData &&
4086
- footer && (React.createElement(material.TableFooter, null,
4087
- React.createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
4088
- }, [defaultAlign, finalColumns, footer, isNoData, items]);
4081
+ const tableFooter = React.useMemo(() => finalColumns &&
4082
+ !isNoData &&
4083
+ footer && (React.createElement(material.TableFooter, null,
4084
+ React.createElement(material.TableRow, null, finalColumns.map((column, idx) => (React.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })))))), [defaultAlign, finalColumns, footer, isNoData, items]);
4089
4085
  /********************************************************************************************************************
4090
4086
  * Render
4091
4087
  * ******************************************************************************************************************/
4092
4088
  return finalColumns ? (React.createElement(PTableContextProvider, { value: {
4093
- menuOpen: menuOpen,
4094
- openMenuId: openMenuId,
4095
- progressiveVisible: progressiveVisible,
4089
+ menuOpen,
4090
+ openMenuId,
4091
+ progressiveVisible,
4096
4092
  setMenuOpen: TableContextSetMenuOpen,
4097
4093
  setItemColumnChecked: TableContextSetItemColumnChecked,
4098
4094
  setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
@@ -4114,53 +4110,52 @@ var PTable = React.forwardRef(function (_a, ref) {
4114
4110
  tableFooter)))),
4115
4111
  finalColumns && paging && paging.total > 0 && (React.createElement(material.Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
4116
4112
  React.createElement(PTablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
4117
- });var getSearchInfo = function (search) {
4118
- var searchInfo = {};
4113
+ });const getSearchInfo = (search) => {
4114
+ const searchInfo = {};
4119
4115
  if (search) {
4120
- var ref = search.ref, searchGroups = search.searchGroups, props = __rest$1(search, ["ref", "searchGroups"]);
4116
+ const { ref, searchGroups } = search, props = __rest(search, ["ref", "searchGroups"]);
4121
4117
  searchInfo.ref = ref;
4122
4118
  searchInfo.searchGroups = searchGroups;
4123
4119
  searchInfo.props = props;
4124
4120
  }
4125
4121
  return searchInfo;
4126
4122
  };
4127
- var getTableInfo = function (table) {
4128
- var tableInfo = {};
4123
+ const getTableInfo = (table) => {
4124
+ const tableInfo = {};
4129
4125
  if (table) {
4130
- var ref = table.ref, props = __rest$1(table, ["ref"]);
4126
+ const { ref } = table, props = __rest(table, ["ref"]);
4131
4127
  tableInfo.ref = ref;
4132
4128
  tableInfo.props = props;
4133
4129
  }
4134
4130
  return tableInfo;
4135
4131
  };
4136
- var deHash = function () {
4137
- var values = {};
4138
- var hash = window.location.hash.substring(1);
4139
- hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
4132
+ const deHash = () => {
4133
+ const values = {};
4134
+ const hash = window.location.hash.substring(1);
4135
+ hash.replace(/([^=&]+)=([^&]*)/g, (substring, key, value) => {
4140
4136
  values[decodeURIComponent(key)] = decodeURIComponent(value);
4141
4137
  return substring;
4142
4138
  });
4143
4139
  return values;
4144
- };var PSearchTable = React.forwardRef(function (_a, ref) {
4140
+ };const PSearchTable = React.forwardRef(({ className, style: initStyle, sx, color, hash, stickyHeader, fullHeight, search, table, betweenSearchTableComponent, onGetData, onRequestHashChange, }, ref) => {
4145
4141
  /********************************************************************************************************************
4146
4142
  * Ref
4147
4143
  * ******************************************************************************************************************/
4148
- var className = _a.className, initStyle = _a.style, sx = _a.sx, color = _a.color, hash = _a.hash, stickyHeader = _a.stickyHeader, fullHeight = _a.fullHeight, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange;
4149
- var initPathRef = React.useRef(window.location.pathname);
4150
- var searchRef = React.useRef(undefined);
4151
- var tableRef = React.useRef(undefined);
4152
- var lastGetDataDataRef = React.useRef({});
4144
+ const initPathRef = React.useRef(window.location.pathname);
4145
+ const searchRef = React.useRef(undefined);
4146
+ const tableRef = React.useRef(undefined);
4147
+ const lastGetDataDataRef = React.useRef({});
4153
4148
  /********************************************************************************************************************
4154
4149
  * State
4155
4150
  * ******************************************************************************************************************/
4156
- var _b = React.useState(true), isFirstSearchSubmit = _b[0], setIsFirstSearchSubmit = _b[1];
4157
- var _c = React.useState(), tableData = _c[0], setTableData = _c[1];
4151
+ const [isFirstSearchSubmit, setIsFirstSearchSubmit] = React.useState(true);
4152
+ const [tableData, setTableData] = React.useState();
4158
4153
  /********************************************************************************************************************
4159
4154
  * searchInfo
4160
4155
  * ******************************************************************************************************************/
4161
- var searchInfoFirstUseEffect = React.useRef(true);
4162
- var _d = React.useState(function () { return getSearchInfo(search); }), searchInfo = _d[0], setSearchInfo = _d[1];
4163
- React.useEffect(function () {
4156
+ const searchInfoFirstUseEffect = React.useRef(true);
4157
+ const [searchInfo, setSearchInfo] = React.useState(() => getSearchInfo(search));
4158
+ React.useEffect(() => {
4164
4159
  if (searchInfoFirstUseEffect.current) {
4165
4160
  searchInfoFirstUseEffect.current = false;
4166
4161
  }
@@ -4171,9 +4166,9 @@ var deHash = function () {
4171
4166
  /********************************************************************************************************************
4172
4167
  * tableInfo
4173
4168
  * ******************************************************************************************************************/
4174
- var tableInfoFirstUseEffect = React.useRef(true);
4175
- var _e = React.useState(function () { return getTableInfo(table); }), tableInfo = _e[0], setTableInfo = _e[1];
4176
- React.useEffect(function () {
4169
+ const tableInfoFirstUseEffect = React.useRef(true);
4170
+ const [tableInfo, setTableInfo] = React.useState(() => getTableInfo(table));
4171
+ React.useEffect(() => {
4177
4172
  if (tableInfoFirstUseEffect.current) {
4178
4173
  tableInfoFirstUseEffect.current = false;
4179
4174
  }
@@ -4184,30 +4179,30 @@ var deHash = function () {
4184
4179
  /********************************************************************************************************************
4185
4180
  * Function
4186
4181
  * ******************************************************************************************************************/
4187
- var getData = React.useCallback(function (data) {
4182
+ const getData = React.useCallback((data) => {
4188
4183
  lastGetDataDataRef.current = data;
4189
4184
  if (onGetData) {
4190
4185
  onGetData(data).then(setTableData);
4191
4186
  }
4192
4187
  }, [onGetData]);
4193
- var hashToSearchValue = React.useCallback(function () {
4194
- var commands = searchRef.current;
4188
+ const hashToSearchValue = React.useCallback(() => {
4189
+ const commands = searchRef.current;
4195
4190
  if (commands) {
4196
4191
  commands.resetAll();
4197
- var hashValues_1 = deHash();
4198
- Object.keys(hashValues_1).forEach(function (name) {
4192
+ const hashValues = deHash();
4193
+ Object.keys(hashValues).forEach((name) => {
4199
4194
  var _a, _b;
4200
- var value = hashValues_1[name];
4195
+ const value = hashValues[name];
4201
4196
  if (name === 'page') {
4202
4197
  commands.setValue(name, Number(value) || 1);
4203
4198
  }
4204
4199
  else {
4205
- var itemCommands = commands.getItem(name);
4200
+ const itemCommands = commands.getItem(name);
4206
4201
  if (itemCommands) {
4207
4202
  switch (itemCommands.getType()) {
4208
4203
  case 'PFormCheckbox':
4209
4204
  if (compare.notEmpty(value)) {
4210
- var checkCommands = itemCommands;
4205
+ const checkCommands = itemCommands;
4211
4206
  if (value.toString() === ((_a = itemCommands.getValue()) === null || _a === void 0 ? void 0 : _a.toString())) {
4212
4207
  checkCommands.setChecked(true);
4213
4208
  }
@@ -4221,9 +4216,9 @@ var deHash = function () {
4221
4216
  case 'PFormTimePicker':
4222
4217
  {
4223
4218
  if (compare.notEmpty(value)) {
4224
- var dateCommands = itemCommands;
4225
- var format = dateCommands.getFormValueFormat();
4226
- var itemValue = dayjs(value, format);
4219
+ const dateCommands = itemCommands;
4220
+ const format = dateCommands.getFormValueFormat();
4221
+ const itemValue = dayjs(value, format);
4227
4222
  itemCommands.setValue(itemValue.isValid() ? itemValue : null);
4228
4223
  }
4229
4224
  else {
@@ -4233,13 +4228,13 @@ var deHash = function () {
4233
4228
  break;
4234
4229
  case 'PFormDateRangePicker':
4235
4230
  {
4236
- var dateRangePickerCommands = itemCommands;
4237
- var fromName = dateRangePickerCommands.getFormValueFromName();
4238
- var toName = dateRangePickerCommands.getFormValueToName();
4239
- var format = dateRangePickerCommands.getFormValueFormat();
4231
+ const dateRangePickerCommands = itemCommands;
4232
+ const fromName = dateRangePickerCommands.getFormValueFromName();
4233
+ const toName = dateRangePickerCommands.getFormValueToName();
4234
+ const format = dateRangePickerCommands.getFormValueFormat();
4240
4235
  if (name === fromName) {
4241
4236
  if (compare.notEmpty(value)) {
4242
- var startValue = dayjs(value, format);
4237
+ const startValue = dayjs(value, format);
4243
4238
  dateRangePickerCommands.setFromValue(startValue.isValid() ? startValue : null);
4244
4239
  }
4245
4240
  else {
@@ -4248,7 +4243,7 @@ var deHash = function () {
4248
4243
  }
4249
4244
  else if (name === toName) {
4250
4245
  if (compare.notEmpty(value)) {
4251
- var endValue = dayjs(value, format);
4246
+ const endValue = dayjs(value, format);
4252
4247
  dateRangePickerCommands.setToValue(endValue.isValid() ? endValue : null);
4253
4248
  }
4254
4249
  else {
@@ -4259,9 +4254,9 @@ var deHash = function () {
4259
4254
  break;
4260
4255
  case 'PFormYearRangePicker':
4261
4256
  {
4262
- var dateRangePickerCommands = itemCommands;
4263
- var fromName = dateRangePickerCommands.getFormValueFromName();
4264
- var toName = dateRangePickerCommands.getFormValueToName();
4257
+ const dateRangePickerCommands = itemCommands;
4258
+ const fromName = dateRangePickerCommands.getFormValueFromName();
4259
+ const toName = dateRangePickerCommands.getFormValueToName();
4265
4260
  if (name === fromName) {
4266
4261
  dateRangePickerCommands.setFromValue(compare.notEmpty(value) ? Number(value) : null);
4267
4262
  }
@@ -4272,9 +4267,9 @@ var deHash = function () {
4272
4267
  break;
4273
4268
  case 'PFormMonthPicker':
4274
4269
  {
4275
- var monthCommands = itemCommands;
4276
- var yearName = monthCommands.getFormValueYearName();
4277
- var monthName = monthCommands.getFormValueMonthName();
4270
+ const monthCommands = itemCommands;
4271
+ const yearName = monthCommands.getFormValueYearName();
4272
+ const monthName = monthCommands.getFormValueMonthName();
4278
4273
  if (name === yearName) {
4279
4274
  monthCommands.setYear(compare.notEmpty(value) ? Number(value) : null);
4280
4275
  }
@@ -4285,11 +4280,11 @@ var deHash = function () {
4285
4280
  break;
4286
4281
  case 'PFormMonthRangePicker':
4287
4282
  {
4288
- var monthRangeCommands = itemCommands;
4289
- var fromYearName = monthRangeCommands.getFormValueFromYearName();
4290
- var fromMonthName = monthRangeCommands.getFormValueFromMonthName();
4291
- var toYearName = monthRangeCommands.getFormValueToYearName();
4292
- var toMonthName = monthRangeCommands.getFormValueToMonthName();
4283
+ const monthRangeCommands = itemCommands;
4284
+ const fromYearName = monthRangeCommands.getFormValueFromYearName();
4285
+ const fromMonthName = monthRangeCommands.getFormValueFromMonthName();
4286
+ const toYearName = monthRangeCommands.getFormValueToYearName();
4287
+ const toMonthName = monthRangeCommands.getFormValueToMonthName();
4293
4288
  if (name === fromYearName) {
4294
4289
  monthRangeCommands.setFromYear(compare.notEmpty(value) ? Number(value) : null);
4295
4290
  }
@@ -4317,15 +4312,15 @@ var deHash = function () {
4317
4312
  /********************************************************************************************************************
4318
4313
  * Commands
4319
4314
  * ******************************************************************************************************************/
4320
- reactHook.useForwardLayoutRef(ref, React.useMemo(function () { return ({
4321
- reload: function (page) {
4315
+ reactHook.useForwardLayoutRef(ref, React.useMemo(() => ({
4316
+ reload: (page) => {
4322
4317
  var _a, _b, _c, _d;
4323
4318
  if (page != null) {
4324
4319
  (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
4325
4320
  }
4326
- var finalData;
4321
+ let finalData;
4327
4322
  if (lastGetDataDataRef.current) {
4328
- finalData = __assign$2({}, lastGetDataDataRef.current);
4323
+ finalData = Object.assign({}, lastGetDataDataRef.current);
4329
4324
  if (page != null) {
4330
4325
  (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', page);
4331
4326
  finalData.page = page;
@@ -4342,46 +4337,46 @@ var deHash = function () {
4342
4337
  }
4343
4338
  getData(finalData);
4344
4339
  },
4345
- getLastLoadData: function () { return lastGetDataDataRef.current || {}; },
4346
- getSearch: function () { return searchRef.current; },
4347
- getTable: function () { return tableRef.current; },
4348
- }); }, [getData, hash, hashToSearchValue]));
4340
+ getLastLoadData: () => lastGetDataDataRef.current || {},
4341
+ getSearch: () => searchRef.current,
4342
+ getTable: () => tableRef.current,
4343
+ }), [getData, hash, hashToSearchValue]));
4349
4344
  /********************************************************************************************************************
4350
4345
  * hash
4351
4346
  * ******************************************************************************************************************/
4352
- React.useEffect(function () {
4347
+ React.useEffect(() => {
4353
4348
  if (hash && window.location.pathname === initPathRef.current) {
4354
- var data = hashToSearchValue();
4349
+ const data = hashToSearchValue();
4355
4350
  if (data)
4356
4351
  getData(data);
4357
4352
  }
4358
4353
  // eslint-disable-next-line react-hooks/exhaustive-deps
4359
4354
  }, [window.location.hash]);
4360
- var hashChange = React.useCallback(function (params) {
4355
+ const hashChange = React.useCallback((params) => {
4361
4356
  if (onRequestHashChange) {
4362
- var hashes_1 = [];
4363
- Object.keys(params).forEach(function (name) {
4364
- var value = params[name];
4357
+ const hashes = [];
4358
+ Object.keys(params).forEach((name) => {
4359
+ const value = params[name];
4365
4360
  if (name === 'page') {
4366
4361
  if (Number(value) > 1) {
4367
- hashes_1.push("".concat(name, "=").concat(value));
4362
+ hashes.push(`${name}=${value}`);
4368
4363
  }
4369
4364
  }
4370
4365
  else {
4371
4366
  if (searchRef.current) {
4372
- var itemCommands = searchRef.current.getItem(name);
4367
+ const itemCommands = searchRef.current.getItem(name);
4373
4368
  if (itemCommands) {
4374
- var resetValue = null;
4369
+ let resetValue = null;
4375
4370
  switch (itemCommands.getType()) {
4376
4371
  case 'PFormDateRangePicker':
4377
4372
  case 'PFormYearRangePicker':
4378
4373
  {
4379
- var commands = itemCommands;
4380
- var itemName = itemCommands.getName();
4381
- var fromName = commands.getFormValueFromName();
4382
- var fromSuffix = commands.getFormValueFromNameSuffix();
4383
- var toName = commands.getFormValueToName();
4384
- var toSuffix = commands.getFormValueToNameSuffix();
4374
+ const commands = itemCommands;
4375
+ const itemName = itemCommands.getName();
4376
+ const fromName = commands.getFormValueFromName();
4377
+ const fromSuffix = commands.getFormValueFromNameSuffix();
4378
+ const toName = commands.getFormValueToName();
4379
+ const toSuffix = commands.getFormValueToNameSuffix();
4385
4380
  if (name === fromName) {
4386
4381
  resetValue = searchRef.current.getFormReset(itemName, fromSuffix);
4387
4382
  }
@@ -4392,12 +4387,12 @@ var deHash = function () {
4392
4387
  break;
4393
4388
  case 'PFormMonthPicker':
4394
4389
  {
4395
- var commands = itemCommands;
4396
- var itemName = commands.getName();
4397
- var yearName = commands.getFormValueYearName();
4398
- var yearSuffix = commands.getFormValueYearNameSuffix();
4399
- var monthName = commands.getFormValueMonthName();
4400
- var monthSuffix = commands.getFormValueMonthNameSuffix();
4390
+ const commands = itemCommands;
4391
+ const itemName = commands.getName();
4392
+ const yearName = commands.getFormValueYearName();
4393
+ const yearSuffix = commands.getFormValueYearNameSuffix();
4394
+ const monthName = commands.getFormValueMonthName();
4395
+ const monthSuffix = commands.getFormValueMonthNameSuffix();
4401
4396
  if (name === yearName) {
4402
4397
  resetValue = searchRef.current.getFormReset(itemName, yearSuffix);
4403
4398
  }
@@ -4408,16 +4403,16 @@ var deHash = function () {
4408
4403
  break;
4409
4404
  case 'PFormMonthRangePicker':
4410
4405
  {
4411
- var commands = itemCommands;
4412
- var itemName = commands.getName();
4413
- var fromYearName = commands.getFormValueFromYearName();
4414
- var fromYearSuffix = commands.getFormValueFromYearNameSuffix();
4415
- var fromMonthName = commands.getFormValueFromMonthName();
4416
- var fromMonthSuffix = commands.getFormValueFromMonthNameSuffix();
4417
- var toYearName = commands.getFormValueToYearName();
4418
- var toYearSuffix = commands.getFormValueToYearNameSuffix();
4419
- var toMonthName = commands.getFormValueToMonthName();
4420
- var toMonthSuffix = commands.getFormValueToMonthNameSuffix();
4406
+ const commands = itemCommands;
4407
+ const itemName = commands.getName();
4408
+ const fromYearName = commands.getFormValueFromYearName();
4409
+ const fromYearSuffix = commands.getFormValueFromYearNameSuffix();
4410
+ const fromMonthName = commands.getFormValueFromMonthName();
4411
+ const fromMonthSuffix = commands.getFormValueFromMonthNameSuffix();
4412
+ const toYearName = commands.getFormValueToYearName();
4413
+ const toYearSuffix = commands.getFormValueToYearNameSuffix();
4414
+ const toMonthName = commands.getFormValueToMonthName();
4415
+ const toMonthSuffix = commands.getFormValueToMonthNameSuffix();
4421
4416
  if (name === fromYearName) {
4422
4417
  resetValue = searchRef.current.getFormReset(itemName, fromYearSuffix);
4423
4418
  }
@@ -4437,30 +4432,30 @@ var deHash = function () {
4437
4432
  break;
4438
4433
  }
4439
4434
  if (resetValue != null && !compare.equal(resetValue, value) && typeof value !== 'object') {
4440
- hashes_1.push("".concat(name, "=").concat(encodeURIComponent(value)));
4435
+ hashes.push(`${name}=${encodeURIComponent(value)}`);
4441
4436
  }
4442
4437
  }
4443
4438
  }
4444
4439
  }
4445
4440
  });
4446
- var finalHash = hashes_1.join('&');
4441
+ const finalHash = hashes.join('&');
4447
4442
  if (window.location.hash.substring(1) === finalHash) {
4448
4443
  getData(params);
4449
4444
  }
4450
4445
  else {
4451
- onRequestHashChange(hashes_1.join('&'));
4446
+ onRequestHashChange(hashes.join('&'));
4452
4447
  }
4453
4448
  }
4454
4449
  }, [onRequestHashChange, getData]);
4455
4450
  /********************************************************************************************************************
4456
4451
  * Event Handler
4457
4452
  * ******************************************************************************************************************/
4458
- var handlePageChange = React.useCallback(function (page) {
4453
+ const handlePageChange = React.useCallback((page) => {
4459
4454
  var _a, _b;
4460
4455
  (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.setValue('page', page);
4461
- var finalData;
4456
+ let finalData;
4462
4457
  if (lastGetDataDataRef.current) {
4463
- finalData = __assign$2({}, lastGetDataDataRef.current);
4458
+ finalData = Object.assign({}, lastGetDataDataRef.current);
4464
4459
  finalData.page = page;
4465
4460
  }
4466
4461
  else {
@@ -4473,7 +4468,7 @@ var deHash = function () {
4473
4468
  getData(finalData || {});
4474
4469
  }
4475
4470
  }, [searchRef, hash, hashChange, getData]);
4476
- var handleSearchSubmit = React.useCallback(function (data) {
4471
+ const handleSearchSubmit = React.useCallback((data) => {
4477
4472
  var _a, _b;
4478
4473
  (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
4479
4474
  if (isFirstSearchSubmit) {
@@ -4484,7 +4479,7 @@ var deHash = function () {
4484
4479
  }
4485
4480
  else {
4486
4481
  (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', 1);
4487
- var finalData = __assign$2(__assign$2({}, data), { page: 1 });
4482
+ const finalData = Object.assign(Object.assign({}, data), { page: 1 });
4488
4483
  if (hash) {
4489
4484
  hashChange(finalData);
4490
4485
  }
@@ -4496,8 +4491,8 @@ var deHash = function () {
4496
4491
  /********************************************************************************************************************
4497
4492
  * Render
4498
4493
  * ******************************************************************************************************************/
4499
- var searchView = React.useMemo(function () { return (React.createElement(material.Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
4500
- React.createElement(reactForm.PSearch, __assign$2({ color: color }, searchInfo.props, { ref: function (commands) {
4494
+ const searchView = React.useMemo(() => (React.createElement(material.Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
4495
+ React.createElement(reactForm.PSearch, Object.assign({ color: color }, searchInfo.props, { ref: (commands) => {
4501
4496
  if (searchInfo.ref) {
4502
4497
  if (typeof searchInfo.ref === 'function') {
4503
4498
  searchInfo.ref(commands);
@@ -4510,11 +4505,11 @@ var deHash = function () {
4510
4505
  }, autoSubmit: true, onSubmit: handleSearchSubmit }),
4511
4506
  React.createElement(reactForm.PSearchGroup, { hidden: true },
4512
4507
  React.createElement(reactForm.PFormHidden, { name: 'page', value: 1 })),
4513
- searchInfo.searchGroups))); }, [color, handleSearchSubmit, searchInfo]);
4514
- var tableView = React.useMemo(function () {
4508
+ searchInfo.searchGroups))), [color, handleSearchSubmit, searchInfo]);
4509
+ const tableView = React.useMemo(() => {
4515
4510
  var _a, _b;
4516
4511
  return (React.createElement(material.Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
4517
- React.createElement(PTable, __assign$2({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: function (commands) {
4512
+ React.createElement(PTable, Object.assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: (commands) => {
4518
4513
  if (tableInfo.ref) {
4519
4514
  if (typeof tableInfo.ref === 'function') {
4520
4515
  tableInfo.ref(commands);
@@ -4526,41 +4521,41 @@ var deHash = function () {
4526
4521
  tableRef.current = commands || undefined;
4527
4522
  }, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange }))));
4528
4523
  }, [fullHeight, handlePageChange, stickyHeader, tableData === null || tableData === void 0 ? void 0 : tableData.items, tableData === null || tableData === void 0 ? void 0 : tableData.paging, tableInfo]);
4529
- return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ? __assign$2(__assign$2({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
4524
+ return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ? Object.assign(Object.assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
4530
4525
  searchView,
4531
4526
  betweenSearchTableComponent && React.createElement(material.Grid, null, betweenSearchTableComponent),
4532
4527
  tableView));
4533
- });var PTableButton = React.forwardRef(function (_a, ref) {
4534
- var children = _a.children, className = _a.className, initSx = _a.sx, _b = _a.variant, variant = _b === void 0 ? 'outlined' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest$1(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
4535
- return (React.createElement(reactComponent.PButton, __assign$2({ ref: ref, className: classNames(className, 'PTableButton'), variant: variant, type: 'button', size: 'small', sx: __assign$2({ minWidth: 0, px: compare.empty(startIcon) && compare.empty(endIcon)
4528
+ });const PTableButton = React.forwardRef((_a, ref) => {
4529
+ var { children, className, sx: initSx, variant = 'outlined', color = 'primary', startIcon, endIcon, onClick } = _a, props = __rest(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
4530
+ return (React.createElement(reactComponent.PButton, Object.assign({ ref: ref, className: classNames(className, 'PTableButton'), variant: variant, type: 'button', size: 'small', sx: Object.assign({ minWidth: 0, px: compare.empty(startIcon) && compare.empty(endIcon)
4536
4531
  ? '7px !important'
4537
4532
  : compare.empty(children)
4538
4533
  ? '5px !important'
4539
4534
  : '7px !important' }, initSx), color: color, startIcon: startIcon, endIcon: endIcon, onClick: onClick }, props), children));
4540
4535
  });
4541
- var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwardRef(function (_a, ref) {
4536
+ var PTableButton$1 = React.memo(PTableButton);const PTableMenuButton = React.forwardRef((_a, ref) => {
4542
4537
  /********************************************************************************************************************
4543
4538
  * ID
4544
4539
  * ******************************************************************************************************************/
4545
- var children = _a.children, className = _a.className, initSx = _a.sx, _b = _a.color, color = _b === void 0 ? 'primary' : _b, _c = _a.variant, variant = _c === void 0 ? 'text' : _c, startIcon = _a.startIcon, _d = _a.placement, placement = _d === void 0 ? 'bottom' : _d, inModal = _a.inModal, zIndex = _a.zIndex, menuList = _a.menuList, props = __rest$1(_a, ["children", "className", "sx", "color", "variant", "startIcon", "placement", "inModal", "zIndex", "menuList"]);
4546
- var buttonId = React.useId();
4547
- var menuId = React.useId();
4540
+ var { children, className, sx: initSx, color = 'primary', variant = 'text', startIcon, placement = 'bottom', inModal, zIndex, menuList } = _a, props = __rest(_a, ["children", "className", "sx", "color", "variant", "startIcon", "placement", "inModal", "zIndex", "menuList"]);
4541
+ const buttonId = React.useId();
4542
+ const menuId = React.useId();
4548
4543
  /********************************************************************************************************************
4549
4544
  * Use
4550
4545
  * ******************************************************************************************************************/
4551
- var _e = useTableState(), menuOpen = _e.menuOpen, openMenuId = _e.openMenuId, setMenuOpen = _e.setMenuOpen;
4546
+ const { menuOpen, openMenuId, setMenuOpen } = useTableState();
4552
4547
  /********************************************************************************************************************
4553
4548
  * Ref
4554
4549
  * ******************************************************************************************************************/
4555
- var anchorRef = React.useRef(null);
4550
+ const anchorRef = React.useRef(null);
4556
4551
  /********************************************************************************************************************
4557
4552
  * State
4558
4553
  * ******************************************************************************************************************/
4559
- var _f = React.useState(false), open = _f[0], setOpen = _f[1];
4554
+ const [open, setOpen] = React.useState(false);
4560
4555
  /********************************************************************************************************************
4561
4556
  * Effect
4562
4557
  * ******************************************************************************************************************/
4563
- React.useEffect(function () {
4558
+ React.useEffect(() => {
4564
4559
  if (open && menuOpen && openMenuId !== menuId) {
4565
4560
  setOpen(false);
4566
4561
  }
@@ -4568,8 +4563,8 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
4568
4563
  /********************************************************************************************************************
4569
4564
  * Event Handler
4570
4565
  * ******************************************************************************************************************/
4571
- var handleClick = React.useCallback(function () {
4572
- setOpen(function (old) { return !old; });
4566
+ const handleClick = React.useCallback(() => {
4567
+ setOpen((old) => !old);
4573
4568
  if (!open) {
4574
4569
  setMenuOpen(true, menuId);
4575
4570
  }
@@ -4577,13 +4572,13 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
4577
4572
  setMenuOpen(false, menuId);
4578
4573
  }
4579
4574
  }, [menuId, open, setMenuOpen]);
4580
- var handleClose = React.useCallback(function () {
4575
+ const handleClose = React.useCallback(() => {
4581
4576
  if (open) {
4582
4577
  setOpen(false);
4583
4578
  setMenuOpen(false, menuId);
4584
4579
  }
4585
4580
  }, [menuId, open, setMenuOpen]);
4586
- var handleListKeyDown = React.useCallback(function (event) {
4581
+ const handleListKeyDown = React.useCallback((event) => {
4587
4582
  if (event.key === 'Tab') {
4588
4583
  event.preventDefault();
4589
4584
  if (open) {
@@ -4601,7 +4596,7 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
4601
4596
  /********************************************************************************************************************
4602
4597
  * Memo
4603
4598
  * ******************************************************************************************************************/
4604
- var finalMenuList = React.useMemo(function () {
4599
+ const finalMenuList = React.useMemo(() => {
4605
4600
  return React.cloneElement(menuList, {
4606
4601
  autoFocusItem: open,
4607
4602
  id: menuId,
@@ -4613,12 +4608,12 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
4613
4608
  /********************************************************************************************************************
4614
4609
  * Variable
4615
4610
  * ******************************************************************************************************************/
4616
- var icon = !startIcon && !children ? 'MoreVert' : undefined;
4611
+ const icon = !startIcon && !children ? 'MoreVert' : undefined;
4617
4612
  /********************************************************************************************************************
4618
4613
  * Render
4619
4614
  * ******************************************************************************************************************/
4620
4615
  return (React.createElement("span", null,
4621
- React.createElement(reactComponent.PButton, __assign$2({ ref: function (r) {
4616
+ React.createElement(reactComponent.PButton, Object.assign({ ref: (r) => {
4622
4617
  if (ref) {
4623
4618
  if (typeof ref === 'function') {
4624
4619
  ref(r);
@@ -4628,11 +4623,10 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
4628
4623
  }
4629
4624
  }
4630
4625
  anchorRef.current = r;
4631
- }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx: __assign$2({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
4632
- React.createElement(material.Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
4633
- var TransitionProps = _a.TransitionProps, placement = _a.placement;
4634
- var placements = placement.split('-');
4635
- var transformOrigin;
4626
+ }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx: Object.assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
4627
+ React.createElement(material.Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, ({ TransitionProps, placement }) => {
4628
+ const placements = placement.split('-');
4629
+ let transformOrigin;
4636
4630
  if (placements[0] === 'left') {
4637
4631
  transformOrigin = 'right';
4638
4632
  // if (placements.length > 1) {
@@ -4676,8 +4670,8 @@ var PTableButton$1 = React.memo(PTableButton);var PTableMenuButton = React.forwa
4676
4670
  else {
4677
4671
  transformOrigin = 'top';
4678
4672
  }
4679
- return (React.createElement(material.Grow, __assign$2({}, TransitionProps, { style: {
4680
- transformOrigin: transformOrigin,
4673
+ return (React.createElement(material.Grow, Object.assign({}, TransitionProps, { style: {
4674
+ transformOrigin,
4681
4675
  } }),
4682
4676
  React.createElement(material.Paper, null,
4683
4677
  React.createElement(material.ClickAwayListener, { onClickAway: handleClose }, finalMenuList))));