@sunggang/ui-lib 0.1.78 → 0.1.80

package/index.esm.css

@@ -843,6 +843,9 @@ video {
 .w-\[100px\] {
   width: 100px;
 }
+.w-\[140px\] {
+  width: 140px;
+}
 .w-\[280px\] {
   width: 280px;
 }
@@ -1851,6 +1854,10 @@ video {
     display: flex;
   }
 
+  .lg\:w-60 {
+    width: 15rem;
+  }
+
   .lg\:justify-center {
     justify-content: center;
   }

package/index.esm.js

@@ -7,7 +7,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import clsx$1, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { format } from 'date-fns';
-import { Calendar as Calendar$3 } from 'lucide-react';
+import { Calendar as Calendar$3, ChevronDown } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { DayPicker } from 'react-day-picker';
@@ -17,7 +17,7 @@ import { Calendar as Calendar$4, DateRange } from 'react-date-range';
 import * as locales from 'react-date-range/dist/locale/index.js';
 import addDays from 'date-fns/addDays/index.js';
 import format$1 from 'date-fns/format/index.js';
-import '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ChevronRightIcon, CheckIcon, DotFilledIcon } from '@radix-ui/react-icons';
 import crypto$1 from 'crypto';
@@ -1118,13 +1118,13 @@ var PropTypes = propTypes$1.exports;
  * See the {@glink features/watchdog Watchdog feature guide} to learn the rationale behind it and how to use it.
  *
  * @internal
- */ function _array_like_to_array$7(arr, len) {
+ */ function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$3(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$7(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$8(arr);
 }
 function _class_call_check$2(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -1159,15 +1159,15 @@ function _non_iterable_spread$3() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$3(arr) {
-    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$7(arr) || _non_iterable_spread$3();
+    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$8(arr) || _non_iterable_spread$3();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 var Watchdog = /*#__PURE__*/ function() {
     function Watchdog(config) {
@@ -3754,12 +3754,12 @@ var now$1 = now;
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */ function _array_like_to_array$6(arr, len) {
+ */ function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _assert_this_initialized$1(self) {
@@ -3835,7 +3835,7 @@ function _inherits$2(subClass, superClass) {
     });
     if (superClass) _set_prototype_of$1(subClass, superClass);
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3859,7 +3859,7 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$a(target) {
@@ -3941,8 +3941,8 @@ function _set_prototype_of$1(o, p) {
     };
     return _set_prototype_of$1(o, p);
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$5();
 }
 function _super_prop_base$1(object, property) {
     while(!Object.prototype.hasOwnProperty.call(object, property)){
@@ -3955,13 +3955,13 @@ function _type_of$a(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function _is_native_reflect_construct$1() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
@@ -4109,7 +4109,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                     try {
                         // Traverse through the roots saved when the editor crashed and set up the discussed values.
                         for(var _iterator = Object.entries(_this._data.roots)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                            var _step_value = _sliced_to_array$4(_step.value, 2), rootName = _step_value[0], rootData = _step_value[1];
+                            var _step_value = _sliced_to_array$5(_step.value, 2), rootName = _step_value[0], rootData = _step_value[1];
                             if (rootData.isLoaded) {
                                 existingRoots[rootName] = "";
                                 rootsAttributes[rootName] = oldRootsAttributes[rootName] || {};
@@ -4469,14 +4469,14 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                 var _this = this;
                 var editor = this.editor;
                 Object.entries(this._data.roots).forEach(function(param) {
-                    var _param = _sliced_to_array$4(param, 2), rootName = _param[0], _param_ = _param[1], content = _param_.content, attributes = _param_.attributes;
+                    var _param = _sliced_to_array$5(param, 2), rootName = _param[0], _param_ = _param[1], content = _param_.content, attributes = _param_.attributes;
                     var parsedNodes = JSON.parse(content);
                     var parsedAttributes = JSON.parse(attributes);
                     var rootElement = editor.model.document.getRoot(rootName);
                     var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                     try {
                         for(var _iterator = parsedAttributes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                            var _step_value = _sliced_to_array$4(_step.value, 2), key = _step_value[0], value = _step_value[1];
+                            var _step_value = _sliced_to_array$5(_step.value, 2), key = _step_value[0], value = _step_value[1];
                             writer.setAttribute(key, value, rootElement);
                         }
                     } catch (err) {
@@ -4516,7 +4516,7 @@ var EditorWatchdog = /*#__PURE__*/ function(Watchdog) {
                     }
                 });
                 Object.entries(this._data.markers).forEach(function(param) {
-                    var _param = _sliced_to_array$4(param, 2), markerName = _param[0], markerOptions = _param[1];
+                    var _param = _sliced_to_array$5(param, 2), markerName = _param[0], markerOptions = _param[1];
                     var document = editor.model.document;
                     var _markerOptions_rangeJSON = markerOptions.rangeJSON, start = _markerOptions_rangeJSON.start, end = _markerOptions_rangeJSON.end, options = _object_without_properties$7(markerOptions, [
                         "rangeJSON"
@@ -79636,16 +79636,16 @@ var DragDropImages = function(param) {
     });
 };
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$3(arr) {
+function _array_with_holes$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$5(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$6(arr);
 }
 function _define_property$8(obj, key, value) {
     if (key in obj) {
@@ -79663,7 +79663,7 @@ function _define_property$8(obj, key, value) {
 function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$4(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -79687,7 +79687,7 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$2() {
@@ -79732,23 +79732,23 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$3();
+function _sliced_to_array$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$4();
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$6(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 var DropImage = function(param) {
     var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls;
-    var _useState = _sliced_to_array$3(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
+    var _useState = _sliced_to_array$4(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     useEffect(function() {
         setPreviewFiles(imageUrls);
     }, [
@@ -79769,11 +79769,11 @@ var DropImage = function(param) {
         onDrop: function(dropFiles) {
             var newFiles = [];
             setFiles(dropFiles);
-            dropFiles.forEach(function(dropFile) {
+            dropFiles.forEach(function(dropFile, index) {
                 Object.assign(dropFile, {
                     preview: URL.createObjectURL(dropFile),
                     id: v4(),
-                    index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + 1
+                    index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
                 });
                 newFiles.push(dropFile);
             });
@@ -79785,7 +79785,7 @@ var DropImage = function(param) {
     var onDragEnd = function(result) {
         if (!result.destination) return;
         var newItems = _to_consumable_array$2(previewFiles);
-        var _newItems_splice = _sliced_to_array$3(newItems.splice(result.source.index, 1), 1), reorderedItem = _newItems_splice[0];
+        var _newItems_splice = _sliced_to_array$4(newItems.splice(result.source.index, 1), 1), reorderedItem = _newItems_splice[0];
         newItems.splice(result.destination.index, 0, reorderedItem);
         var reSortItem = newItems.map(function(item, index) {
             return _object_spread_props$4(_object_spread$8({}, item), {
@@ -79951,15 +79951,15 @@ var Modal = function(param) {
     });
 };
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$3(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -79983,23 +79983,23 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+function _non_iterable_rest$3() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$3();
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 var BaseTemplate = function(param) {
     var file = param.file, imageUrl = param.imageUrl;
-    var _useState = _sliced_to_array$2(useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
+    var _useState = _sliced_to_array$3(useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
     useEffect(function() {
         var fileReader;
         var isCancel = false;
@@ -80060,15 +80060,15 @@ var BaseTemplate = function(param) {
     });
 };
 
-function _array_like_to_array$3(arr, len) {
+function _array_like_to_array$4(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$1(arr) {
+function _array_with_holes$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$1(arr, i) {
+function _iterable_to_array_limit$2(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -80092,25 +80092,25 @@ function _iterable_to_array_limit$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$1() {
+function _non_iterable_rest$2() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$1(arr, i) {
-    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$1();
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$2();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$4(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
 }
 var CustomUpload = function(param) {
     var className = param.className, children = param.children, file = param.file, setFile = param.setFile, imageUrl = param.imageUrl, setImageUrl = param.setImageUrl;
     var imageMimeType = /image\/(png|jpg|jpeg)/i;
     var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5120000; // 5000 KB
-    var _useState = _sliced_to_array$1(useState(null), 2), modal = _useState[0], setModal = _useState[1];
+    var _useState = _sliced_to_array$2(useState(null), 2), modal = _useState[0], setModal = _useState[1];
     var hiddenFileInput = useRef(null);
     var handleImageClick = function() {
         var _hiddenFileInput_current;
@@ -80694,15 +80694,15 @@ function DateRangePicker(param) {
     });
 }
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$3(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes(arr) {
+function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit(arr, i) {
+function _iterable_to_array_limit$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -80726,30 +80726,30 @@ function _iterable_to_array_limit(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest() {
+function _non_iterable_rest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest();
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$1();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$3(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
 }
 var ReactDateRange = function(param) {
     var className = param.className, item = param.item, onChange = param.onChange, dates = param.dates, date = param.date;
-    var _useState = _sliced_to_array(useState("zhTW"), 1), locale = _useState[0];
-    var _useState1 = _sliced_to_array(useState(""), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
-    var _useState2 = _sliced_to_array(useState({
+    var _useState = _sliced_to_array$1(useState("zhTW"), 1), locale = _useState[0];
+    var _useState1 = _sliced_to_array$1(useState(""), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
+    var _useState2 = _sliced_to_array$1(useState({
         startDate: new Date(),
         endDate: addDays(new Date(), 7),
         key: "selection"
     }), 2), range = _useState2[0], setRange = _useState2[1];
-    var _useState3 = _sliced_to_array(useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
+    var _useState3 = _sliced_to_array$1(useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
     var refOne = useRef(null);
     var hideOnEscape = function(e) {
         if (e.key === "Escape") {
@@ -80919,6 +80919,8 @@ function _object_without_properties_loose$2(source, excluded) {
     }
     return target;
 }
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuSubTrigger = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var className = _param.className, inset = _param.inset, children = _param.children, props = _object_without_properties$2(_param, [
         "className",
@@ -81250,6 +81252,282 @@ var TableCaption = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
 });
 TableCaption.displayName = "TableCaption";
 
+var TablePagination = function(param) {
+    var table = param.table;
+    var setPageIndex = table.setPageIndex, getCanPreviousPage = table.getCanPreviousPage, getCanNextPage = table.getCanNextPage, getPageCount = table.getPageCount, previousPage = table.previousPage, nextPage = table.nextPage, getPreFilteredRowModel = table.getPreFilteredRowModel, getState = table.getState;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-center flex-wrap",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex gap-2 items-center text-md font-medium",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "",
+                        children: "每頁"
+                    }),
+                    /*#__PURE__*/ jsx("select", {
+                        name: "",
+                        id: "",
+                        onChange: function(e) {
+                            return table.setPageSize(Number(e.target.value));
+                        },
+                        className: "border inline-flex gap-4 w-[70px] cursor-pointer rounded-md p-1",
+                        children: [
+                            5,
+                            10,
+                            20,
+                            50,
+                            100
+                        ].map(function(row) {
+                            return /*#__PURE__*/ jsx("option", {
+                                value: row,
+                                className: "mt-2",
+                                children: row
+                            }, row);
+                        })
+                    }),
+                    "筆"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "text-gray-400 text-sm pl-4",
+                children: [
+                    "共",
+                    getPreFilteredRowModel().rows.length,
+                    "筆資料"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex gap-8 justify-end",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex w-[100px] items-center justify-start lg:justify-center text-md font-medium",
+                        children: [
+                            "頁數 \xa0 ",
+                            /*#__PURE__*/ jsx("strong", {
+                                children: getState().pagination.pageIndex + 1
+                            }),
+                            "\xa0 / ",
+                            getPageCount()
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex gap-2 [&>button]:h-8 [&>button]:w-8 [&>button]:border [&>button]:border-gray-300 [&>button]:rounded-md [&>button]:grid [&>button]:place-items-center [&>button:disabled]:opacity-50 [&>button:disabled]:border-gray-200 ",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanPreviousPage(),
+                                onClick: function() {
+                                    return setPageIndex(0);
+                                },
+                                children: "<<"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanPreviousPage(),
+                                onClick: previousPage,
+                                children: "<"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanNextPage(),
+                                onClick: nextPage,
+                                children: ">"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                disabled: !getCanNextPage(),
+                                onClick: function() {
+                                    return setPageIndex(getPageCount() - 1);
+                                },
+                                children: ">>"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+function _array_like_to_array$2(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array$2(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+}
+var DataTable = function(param) {
+    var data = param.data, filterColumn = param.filterColumn, columns = param.columns, _param_searchData = param.searchData, searchData = _param_searchData === void 0 ? {
+        disable: true,
+        label: "",
+        name: ""
+    } : _param_searchData;
+    var _table_getColumn, _table_getRowModel_rows;
+    var _useState = _sliced_to_array(useState([]), 2), sorting = _useState[0], setSorting = _useState[1];
+    var _useState1 = _sliced_to_array(useState([]), 2), columnFilters = _useState1[0], setColumnFilters = _useState1[1];
+    var _useState2 = _sliced_to_array(useState({}), 2), columnVisibility = _useState2[0], setColumnVisibility = _useState2[1];
+    var _useState3 = _sliced_to_array(useState({}), 2), rowSelection = _useState3[0], setRowSelection = _useState3[1];
+    var table = useReactTable({
+        data: data,
+        columns: columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting: sorting,
+            columnFilters: columnFilters,
+            columnVisibility: columnVisibility,
+            rowSelection: rowSelection
+        }
+    });
+    useEffect(function() {
+        table.setPageSize(5);
+    }, []);
+    var _table_getColumn_getFilterValue;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center py-4 gap-2",
+                children: [
+                    !(searchData === null || searchData === void 0 ? void 0 : searchData.disable) && /*#__PURE__*/ jsx(Input, {
+                        placeholder: searchData === null || searchData === void 0 ? void 0 : searchData.label,
+                        value: (_table_getColumn_getFilterValue = (_table_getColumn = table.getColumn(searchData === null || searchData === void 0 ? void 0 : searchData.name)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.getFilterValue()) !== null && _table_getColumn_getFilterValue !== void 0 ? _table_getColumn_getFilterValue : "",
+                        onChange: function(event) {
+                            var _table_getColumn;
+                            return (_table_getColumn = table.getColumn(searchData === null || searchData === void 0 ? void 0 : searchData.name)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.setFilterValue(event.target.value);
+                        },
+                        className: "max-w-sm"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: table.pagesize
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs(Button, {
+                                    variant: "outline",
+                                    className: "ml-auto",
+                                    children: [
+                                        "欄位篩選 ",
+                                        /*#__PURE__*/ jsx(ChevronDown, {
+                                            className: "ml-2 h-4 w-4"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                align: "end",
+                                children: table.getAllColumns().filter(function(column) {
+                                    return column.getCanHide();
+                                }).map(function(column) {
+                                    return /*#__PURE__*/ jsx(DropdownMenuCheckboxItem, {
+                                        className: "capitalize",
+                                        checked: column.getIsVisible(),
+                                        onCheckedChange: function(value) {
+                                            return column.toggleVisibility(!!value);
+                                        },
+                                        children: filterColumn[column.id]
+                                    }, column.id);
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "rounded-md border",
+                children: /*#__PURE__*/ jsxs(Table, {
+                    children: [
+                        /*#__PURE__*/ jsx(TableHeader, {
+                            children: table.getHeaderGroups().map(function(headerGroup) {
+                                return /*#__PURE__*/ jsx(TableRow, {
+                                    children: headerGroup.headers.map(function(header) {
+                                        return /*#__PURE__*/ jsx(TableHead, {
+                                            children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                                        }, header.id);
+                                    })
+                                }, headerGroup.id);
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TableBody, {
+                            children: ((_table_getRowModel_rows = table.getRowModel().rows) === null || _table_getRowModel_rows === void 0 ? void 0 : _table_getRowModel_rows.length) ? table.getRowModel().rows.map(function(row) {
+                                return /*#__PURE__*/ jsx(TableRow, {
+                                    "data-state": row.getIsSelected() && "selected",
+                                    children: row.getVisibleCells().map(function(cell) {
+                                        return /*#__PURE__*/ jsx(TableCell, {
+                                            className: "min-w-[2rem]",
+                                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                        }, cell.id);
+                                    })
+                                }, row.id);
+                            }) : /*#__PURE__*/ jsx(TableRow, {
+                                children: /*#__PURE__*/ jsx(TableCell, {
+                                    colSpan: columns.length,
+                                    className: "h-24 text-center",
+                                    children: "無資料"
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-end space-x-2 py-4",
+                children: /*#__PURE__*/ jsx(TablePagination, {
+                    table: table
+                })
+            })
+        ]
+    });
+};
+
 var phone = /^09\d{8}$/;
 var email = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/i;
 var birthday = /^(19|20)\d\d[-](0[1-9]|1[012])[-](0[1-9]|[12][0-9]|3[01])$/;
@@ -101765,4 +102043,4 @@ function DnDCalendar(props) {
     });
 }
 
-export { BigCalender, CkEditor, CustomUpload, DateRangePicker, DnDCalendar, DropImage, ReactDateRange, Regex, Spin, Switch, UiLibrary, decryptByEcPay, encryptByEcPay, verifyId, verifyTaxId };
+export { BigCalender, CkEditor, CustomUpload, DataTable, DateRangePicker, DnDCalendar, DropImage, ReactDateRange, Regex, Spin, Switch, UiLibrary, decryptByEcPay, encryptByEcPay, verifyId, verifyTaxId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.1.78",
+  "version": "0.1.80",
   "dependencies": {
     "@iconify/react": "^4.1.1",
     "@mdx-js/react": "^3.0.1",

package/src/Type/index.d.ts

@@ -16,4 +16,6 @@ export interface DataTableProps {
         label: string;
         name: string;
     };
+    mappingColumn: any;
+    paginationConfig: any;
 }

package/src/lib/DataTable/BasePagination.d.ts

@@ -0,0 +1,6 @@
+declare const BasePagination: ({ table, total, handleLastPageClick }: {
+    table: any;
+    total: any;
+    handleLastPageClick: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default BasePagination;

package/src/lib/DataTable/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DataTableProps } from '../../Type';
-declare const DataTable: React.FC<DataTableProps>;
+export declare const DataTable: React.FC<DataTableProps>;
 export default DataTable;